"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import {
    Home,
    Map,
    Building2,
    Users,
    FileText,
    CreditCard,
    Settings,
    X,
    LogOut,
    LayoutDashboard,
    Compass,
    Building,
    UserCircle,
    FileSignature,
    Wallet,
    HelpCircle
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { useRouter, usePathname } from "next/navigation";
import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import { clearAuthTokens } from "@/lib/auth";
import { useCompanyLogo } from "@/hooks/useCompanyLogo";

interface SidebarProps {
    isOpen: boolean;
    setIsOpen: (open: boolean) => void;
}

export function Sidebar({ isOpen, setIsOpen }: SidebarProps) {
    const router = useRouter();
    const pathname = usePathname();
    const [companyName, setCompanyName] = useState("DohaInstall");
    const [companyInitial, setCompanyInitial] = useState("D");
    const logo = useCompanyLogo();

    useEffect(() => {
        async function fetchCompany() {
            try {
                const res = await fetch(`${API_BASE_URL}/companies/`, { headers: getAuthHeaders() });
                if (res.ok) {
                    const data = await res.json();
                    const list = data.results || data;
                    if (list.length > 0 && list[0].name) {
                        setCompanyName(list[0].name);
                        setCompanyInitial(list[0].name.charAt(0).toUpperCase());
                    }
                }
            } catch (err) {
                // silently fail - use defaults
            }
        }
        fetchCompany();
    }, []);

    const handleLogout = () => {
        clearAuthTokens();
        router.push("/login");
    };

    const navItems = [
        { name: "Dashboard", href: "/", icon: LayoutDashboard },
        { name: "Interactive Map", href: "/map", icon: Compass },
        { name: "Properties & Assets", href: "/assets", icon: Building },
        { name: "Clients", href: "/clients", icon: UserCircle },
        { name: "Contracts", href: "/contracts", icon: FileSignature },
        { name: "Payments & Ledger", href: "/payments", icon: Wallet },
    ];

    return (
        <>
            {/* Mobile overlay */}
            {isOpen && (
                <div
                    className="fixed inset-0 z-40 bg-black/60 backdrop-blur-md md:hidden transition-all duration-300"
                    onClick={() => setIsOpen(false)}
                />
            )}

            {/* Sidebar logic */}
            <aside className={`fixed inset-y-0 left-0 z-50 w-72 transform border-r bg-card transition-all duration-500 ease-in-out md:static md:translate-x-0 ${isOpen ? "translate-x-0" : "-translate-x-full"}`}>

                <div className="flex h-20 items-center justify-between px-6 border-b">
                    <Link href="/" className="flex items-center gap-3 group" onClick={() => setIsOpen(false)}>
                        <div
                            className="flex h-10 w-10 items-center justify-center rounded-xl font-bold text-white shadow-lg transition-transform group-hover:rotate-12 duration-300 overflow-hidden"
                            style={logo ? {} : { backgroundColor: "var(--dynamic-primary, #2563eb)" }}
                        >
                            {logo
                                ? <img src={logo} alt="Logo" className="w-full h-full object-contain" />
                                : companyInitial
                            }
                        </div>
                        <div className="flex flex-col">
                            <span className="font-bold tracking-tight text-foreground text-lg">{companyName}</span>
                            <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Enterprise ERP</span>
                        </div>
                    </Link>

                    {/* Mobile close button */}
                    <Button
                        variant="ghost"
                        size="icon"
                        className="md:hidden text-foreground hover:bg-accent rounded-xl"
                        onClick={() => setIsOpen(false)}
                    >
                        <X className="h-5 w-5" />
                    </Button>
                </div>

                <div className="px-4 py-6 overflow-y-auto max-h-[calc(100vh-200px)]">
                    <p className="px-4 text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-4">Main Menu</p>
                    <nav className="space-y-1.5">
                        {navItems.map((item) => {
                            const Icon = item.icon;
                            const isActive = pathname === item.href;

                            return (
                                <Link
                                    key={item.name}
                                    href={item.href}
                                    onClick={() => setIsOpen(false)}
                                    className={`flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all duration-300 group ${isActive
                                        ? "bg-primary/10 text-primary dark:bg-primary/20 shadow-sm"
                                        : "text-muted-foreground hover:bg-accent hover:text-foreground hover:translate-x-1"
                                        }`}
                                >
                                    <Icon
                                        className={`h-5 w-5 transition-transform duration-300 group-hover:scale-110 ${isActive ? "text-primary" : "text-muted-foreground"}`}
                                    />
                                    <span>{item.name}</span>
                                    {isActive && (
                                        <div className="ml-auto w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
                                    )}
                                </Link>
                            );
                        })}
                    </nav>
                </div>

                <div className="absolute inset-x-0 bottom-0 p-4 border-t bg-muted/30 shadow-up">
                    <Link
                        href="/settings"
                        onClick={() => setIsOpen(false)}
                        className="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-muted-foreground transition-all hover:bg-accent hover:text-foreground mb-1"
                    >
                        <Settings className="h-5 w-5" />
                        System Settings
                    </Link>
                    <Link
                        href="/contact"
                        onClick={() => setIsOpen(false)}
                        className="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-muted-foreground transition-all hover:bg-accent hover:text-foreground mb-1"
                    >
                        <HelpCircle className="h-5 w-5" />
                        Help &amp; Contact
                    </Link>
                    <button
                        onClick={handleLogout}
                        className="w-full flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-rose-500 transition-all hover:bg-rose-500/10 hover:text-rose-600"
                    >
                        <LogOut className="h-5 w-5" />
                        Logout
                    </button>

                    <div className="mt-4 px-4 py-2 bg-primary/5 dark:bg-primary/10 rounded-xl border border-primary/10 hidden sm:block">
                        <div className="flex items-center gap-3">
                            <div className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
                            <span className="text-[9px] font-bold uppercase text-primary tracking-tighter">System Online</span>
                        </div>
                    </div>
                </div>
            </aside>
        </>
    );
}