components/Layout.tsx

import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import {
    Home,
    FileInput,
    FileOutput,
    Users,
    Package,
    Settings,
    Menu,
    X,
    TrendingUp
} from 'lucide-react';

interface LayoutProps {
    children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const [isSidebarOpen, setSidebarOpen] = useState(false);
    const location = useLocation();

    const [pigmiPopup, setPigmiPopup] = useState<{ open: boolean; message: string }>(() => ({
        open: false,
        message: '',
    }));

    const getPigmiState = () => {
        try {
            const stored = localStorage.getItem('pp_pigmi_config');
            if (!stored) return null;
            const parsed = JSON.parse(stored);

            const enabled = typeof parsed.enabled === 'boolean' ? parsed.enabled : false;
            const message = typeof parsed.message === 'string' ? parsed.message : '';
            const time = typeof parsed.time === 'string' && parsed.time ? parsed.time : '09:00';
            const dayOfMonth =
                typeof parsed.dayOfMonth === 'number' &&
                !Number.isNaN(parsed.dayOfMonth) &&
                parsed.dayOfMonth >= 1 &&
                parsed.dayOfMonth <= 31
                    ? parsed.dayOfMonth
                    : 1;

            if (!enabled || !message.trim()) return null;

            const now = new Date();
            const key = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
            const lastKey = localStorage.getItem('pp_pigmi_last_shown_month') || '';

            const [hh, mm] = String(time).split(':').map((v: string) => Number(v));
            const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
            const day = Math.max(1, Math.min(lastDay, dayOfMonth));
            const scheduled = new Date(now.getFullYear(), now.getMonth(), day, hh || 0, mm || 0, 0, 0);

            return {
                key,
                lastKey,
                message: message.trim(),
                dueNow: now.getTime() >= scheduled.getTime(),
                alreadyShownThisMonth: lastKey === key,
            };
        } catch (error) {
            console.error('Error reading pigmi config', error);
            return null;
        }
    };

    const triggerPigmiIfDue = () => {
        const pigmi = getPigmiState();
        if (!pigmi) return;

        if (pigmi.dueNow && !pigmi.alreadyShownThisMonth) {
            try {
                localStorage.setItem('pp_pigmi_last_shown_month', pigmi.key);
            } catch (error) {
                console.error('Error saving pigmi month key', error);
            }

            setPigmiPopup({ open: true, message: pigmi.message });
        }
    };

    useEffect(() => {
        triggerPigmiIfDue();
        const id = window.setInterval(() => triggerPigmiIfDue(), 30_000);
        return () => window.clearInterval(id);
    }, []);

    const navItems = [
        { path: '/', label: 'डॅशबोर्ड (Home)', icon: Home },
        { path: '/jawaak', label: 'जावक बिल (Sales)', icon: FileOutput },
        { path: '/awaak', label: 'आवक बिल (Purchase)', icon: FileInput },
        { path: '/ledger', label: 'पार्टी लेजर (Ledger)', icon: Users },
        { path: '/stock', label: 'स्टॉक रिपोर्ट (Stock)', icon: Package },
        { path: '/analysis', label: 'अ‍ॅनालिसीस (Analysis)', icon: TrendingUp },
        { path: '/settings', label: 'सेटिंग्स (Settings)', icon: Settings },
    ];

    const isActive = (path: string) => location.pathname === path;

    return (
        <div className="flex h-screen bg-gray-50 overflow-hidden">

            {pigmiPopup.open && (

                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">

                    <div

                        className="absolute inset-0 bg-black/40"

                        onClick={() => setPigmiPopup((p) => ({ ...p, open: false }))}

                    />

                    <div className="relative w-full max-w-md bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden">

                        <div className="p-4 bg-teal-700 text-white flex items-center justify-between">

                            <div className="font-semibold">Pigmi Reminder</div>

                            <button

                                className="text-white/90 hover:text-white text-sm font-medium"

                                onClick={() => setPigmiPopup((p) => ({ ...p, open: false }))}

                            >

                                Close

                            </button>

                        </div>

                        <div className="p-4">

                            <div className="text-sm text-gray-700 whitespace-pre-wrap">{pigmiPopup.message}</div>

                            <div className="mt-4 flex justify-end">

                                <button

                                    className="px-4 py-2 bg-teal-600 text-white rounded-lg text-sm font-medium hover:bg-teal-700"

                                    onClick={() => setPigmiPopup((p) => ({ ...p, open: false }))}

                                >

                                    OK

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            )}



            {/* Mobile Sidebar Overlay */}

            {isSidebarOpen && (

                <div

                    className="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden"

                    onClick={() => setSidebarOpen(false)}

                />

            )}



            {/* Sidebar */}

            <aside

                className={`fixed lg:static inset-y-0 left-0 w-64 bg-teal-800 text-white transform transition-transform duration-200 ease-in-out z-30 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'

                    }`}

            >

                <div className="flex items-center justify-between p-4 border-b border-teal-700 h-16">

                    <div className="flex items-center gap-2">

                        <TrendingUp className="w-6 h-6 text-teal-300" />

                        <span className="font-bold text-xl">Mirchi Vyapar</span>

                    </div>

                    <button

                        className="lg:hidden p-1 hover:bg-teal-700 rounded"

                        onClick={() => setSidebarOpen(false)}

                    >

                        <X size={24} />

                    </button>

                </div>



                <nav className="p-4 space-y-1">

                    {navItems.map((item) => (

                        <Link

                            key={item.path}

                            to={item.path}

                            onClick={() => setSidebarOpen(false)}

                            className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive(item.path)

                                ? 'bg-teal-900 text-teal-100 shadow-sm'

                                : 'text-teal-100 hover:bg-teal-700'

                                }`}

                        >

                            <item.icon size={20} />

                            <span className="font-medium">{item.label}</span>

                        </Link>

                    ))}

                </nav>



                <div className="absolute bottom-0 w-full p-4 border-t border-teal-700 bg-teal-800">

                    <div className="flex items-center gap-3">

                        <div className="w-8 h-8 rounded-full bg-teal-600 flex items-center justify-center font-bold">

                            A

                        </div>

                        <div>

                            <p className="text-sm font-medium">Admin User</p>

                            <p className="text-xs text-teal-300">Mirchi Mandi</p>

                        </div>

                    </div>

                </div>

            </aside>



            {/* Main Content */}

            <main className="flex-1 flex flex-col overflow-hidden">

                {/* Top Header */}

                <header className="h-16 bg-white border-b flex items-center justify-between px-4 lg:px-8">

                    <button

                        className="lg:hidden p-2 -ml-2 text-gray-600 hover:bg-gray-100 rounded-lg"

                        onClick={() => setSidebarOpen(true)}

                    >

                        <Menu size={24} />

                    </button>



                    <h1 className="text-xl font-semibold text-gray-800 ml-2 lg:ml-0">

                        {navItems.find(i => isActive(i.path))?.label.split(' (')[0] || 'Mirchi Vyapar'}

                    </h1>



                    <div className="flex items-center gap-4">

                        <span className="text-sm text-gray-500 hidden md:block">

                            {new Date().toLocaleDateString('mr-IN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

                        </span>

                    </div>

                </header>



                {/* Page Content */}

                <div className="flex-1 overflow-auto p-4 lg:p-6 pb-20 lg:pb-6">

                    {children}

                </div>

            </main>

        </div>
    );
};

export default Layout;