import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import {
  LayoutDashboard,
  Users,
  ShieldCheck,
  CarFront,
  Gavel,
  ClipboardCheck,
  CreditCard,
  ChartNoAxesCombined,
  Settings,
  Search,
  Bell,
  Plus,
  ChevronRight,
  Menu,
  X,
  CheckCircle2,
  Database,
  RefreshCw,
  Sparkles,
  LogOut
} from "lucide-react";
import "./styles.css";

// API & Database Client
import { fetchCars, saveCar, deleteCar, getSystemHealth } from "./api";
import { supabase } from "./supabaseClient";

// Components
import LoginPage from "./components/LoginPage";
import ThreeGridCarForm from "./components/ThreeGridCarForm";
import CarInventoryTable from "./components/CarInventoryTable";
import InspectionsDashboard from "./components/InspectionsDashboard";
import ComingSoon from "./components/ComingSoon";

function App() {
  const [currentUser, setCurrentUser] = useState(() => {
    try {
      return JSON.parse(localStorage.getItem("carboli_auth_user") || "null");
    } catch {
      return null;
    }
  });

  const [page, setPage] = useState("cars");
  const [mobileOpen, setMobileOpen] = useState(false);
  const [cars, setCars] = useState([]);
  const [loading, setLoading] = useState(true);
  const [dbStatus, setDbStatus] = useState("Connecting to Backend...");
  const [schemaNeeded, setSchemaNeeded] = useState(false);
  const [search, setSearch] = useState("");
  const [toast, setToast] = useState("");

  const handleLogout = async () => {
    try {
      if (supabase) await supabase.auth.signOut();
    } catch (e) {
      // ignore
    }
    localStorage.removeItem("carboli_auth_user");
    setCurrentUser(null);
    notify("Signed out from CarBoli Desk.");
  };

  // Car Management View Mode: 'inventory' (List / Grid View) vs 'create' (3-Grid Workspace)
  const [carViewMode, setCarViewMode] = useState("inventory");
  const [selectedCar, setSelectedCar] = useState(null);

  const notify = (message) => {
    setToast(message);
    window.setTimeout(() => setToast(""), 3500);
  };

  const navigate = (next) => {
    setPage(next);
    setMobileOpen(false);
  };

  // Load cars and system health from backend / Supabase
  const loadData = async () => {
    setLoading(true);
    try {
      const [fetchedCars, health] = await Promise.all([
        fetchCars().catch(() => []),
        getSystemHealth().catch(() => null)
      ]);
      setCars(fetchedCars || []);
      if (health?.supabaseConnected) {
        if (health.tablesReady === false) {
          setDbStatus("Supabase (Run Schema)");
          setSchemaNeeded(true);
        } else {
          setDbStatus("Supabase Connected");
          setSchemaNeeded(false);
        }
      } else if (health) {
        setDbStatus("Backend Connected");
        setSchemaNeeded(false);
      } else {
        setDbStatus("Connecting to Backend...");
        setSchemaNeeded(false);
      }
    } catch (err) {
      console.warn("Could not fetch cars from database:", err.message);
      setCars([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const handleOpenCarStudio = (car) => {
    setSelectedCar(car || null);
    setCarViewMode("create");
    if (car) {
      notify(`Loaded ${car.make} ${car.model} in 3-Grid Studio`);
    }
  };

  const handleAddNewCar = async (newCarData) => {
    try {
      const payload = selectedCar?.id 
        ? { ...newCarData, id: selectedCar.id } 
        : newCarData;

      console.log("Saving vehicle payload to API / Supabase:", payload);
      const saved = await saveCar(payload);
      setCars(prev => {
        const idx = prev.findIndex(c => c.id === saved.id || (saved.reg && c.reg === saved.reg));
        if (idx !== -1) {
          const updated = [...prev];
          updated[idx] = saved;
          return updated;
        }
        return [saved, ...prev];
      });
      const verb = saved.status === 'Draft' ? 'saved as Draft' : 'published to Live Auction';
      notify(`✓ Vehicle ${saved.make} ${saved.model} ${verb} in Supabase!`);
      setSelectedCar(null);
      setCarViewMode("inventory");
      return saved;
    } catch (err) {
      console.error("Save error in API:", err);
      // Fallback
      setCars(prev => [newCarData, ...prev]);
      notify(`Notice: ${err.message}. Saved locally.`);
      setSelectedCar(null);
      setCarViewMode("inventory");
      return newCarData;
    }
  };

  const handleDeleteCar = async (id) => {
    try {
      await deleteCar(id);
      setCars(prev => prev.filter(c => c.id !== id));
      notify("Vehicle removed from database.");
    } catch (err) {
      setCars(prev => prev.filter(c => c.id !== id));
      notify("Vehicle removed locally.");
    }
  };

  const navItems = [
    { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
    { id: "cars", label: "Car Management", icon: CarFront, count: String(cars.length), highlight: true },
    { id: "users", label: "User Management", icon: Users },
    { id: "kyc", label: "KYC Verification", icon: ShieldCheck },
    { id: "auctions", label: "Live Auctions", icon: Gavel },
    { id: "inspection", label: "Inspections", icon: ClipboardCheck },
    { id: "payments", label: "Payments & Settlements", icon: CreditCard },
    { id: "reports", label: "Reports & Analytics", icon: ChartNoAxesCombined },
    { id: "settings", label: "Settings", icon: Settings }
  ];

  const currentLabel = navItems.find((item) => item.id === page)?.label || "Car Management";

  if (!currentUser) {
    return (
      <>
        <LoginPage onLoginSuccess={setCurrentUser} notify={notify} />
        {toast && (
          <div className="toast fixed bottom-6 right-6 z-50 bg-slate-900 text-white px-4 py-3 rounded-2xl shadow-2xl flex items-center gap-3 text-xs font-semibold animate-in fade-in">
            <CheckCircle2 size={18} className="text-emerald-400 shrink-0" />
            <span>{toast}</span>
          </div>
        )}
      </>
    );
  }

  return (
    <div className="app-shell font-sans text-slate-800">
      {/* Sidebar Navigation */}
      <aside className={`sidebar ${mobileOpen ? "mobile-open" : ""}`}>
        {/* Brand Header */}
        <div className="brand cursor-pointer" onClick={() => navigate("cars")}>
          <div className="w-10 h-10 rounded-xl bg-white border border-slate-200 p-1 flex items-center justify-center shadow-sm shrink-0">
            <img 
              src="/logo.png" 
              alt="CarBoli Logo" 
              className="w-full h-full object-contain"
              onError={(e) => {
                e.target.style.display = 'none';
                e.target.parentElement.innerHTML = '<span class="font-extrabold text-blue-600 text-lg">CB</span>';
              }}
            />
          </div>
          <div>
            <div className="brand-name font-extrabold tracking-tight">Car<span>Boli</span></div>
            <div className="brand-caption uppercase text-[10px] tracking-wider text-slate-400 font-bold">
              ADMIN DESK
            </div>
          </div>
          <button className="mobile-close" onClick={() => setMobileOpen(false)}>
            <X size={18}/>
          </button>
        </div>

        {/* Navigation Items */}
        <div className="nav-label text-[10px] uppercase tracking-wider text-slate-400 font-bold">
          MAIN WORKSPACE
        </div>

        {navItems.slice(0, 5).map((item) => (
          <NavButton 
            key={item.id} 
            item={item} 
            active={page === item.id} 
            onClick={() => navigate(item.id)} 
          />
        ))}

        <div className="nav-label text-[10px] uppercase tracking-wider text-slate-400 font-bold pt-3">
          FINANCIAL & SYSTEM
        </div>

        {navItems.slice(5).map((item) => (
          <NavButton 
            key={item.id} 
            item={item} 
            active={page === item.id} 
            onClick={() => navigate(item.id)} 
          />
        ))}

        {/* Footer Admin Info */}
        <div className="sidebar-bottom mt-auto pt-4 border-t border-slate-100">
          <div className="profile flex items-center justify-between p-1">
            <div className="flex items-center gap-2.5 min-w-0">
              <div className="w-9 h-9 rounded-full bg-blue-100 text-blue-700 font-bold flex items-center justify-center text-xs shrink-0">
                {currentUser?.name?.slice(0, 2).toUpperCase() || 'CB'}
              </div>
              <div className="min-w-0">
                <strong className="text-xs font-bold text-slate-800 block truncate">{currentUser?.name || "CarBoli Admin"}</strong>
                <span className="text-[10px] font-mono text-blue-600 block truncate">{currentUser?.email || "info@carboli.com"}</span>
              </div>
            </div>
            <button
              type="button"
              onClick={handleLogout}
              className="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors shrink-0"
              title="Sign Out from Admin Desk"
            >
              <LogOut size={16} />
            </button>
          </div>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="main-area">
        {/* Topbar */}
        <header className="topbar">
          <div className="breadcrumbs flex items-center gap-2 text-xs">
            <button className="menu-button" onClick={() => setMobileOpen(true)}>
              <Menu size={20}/>
            </button>
            <span className="text-slate-400">Workspace</span>
            <ChevronRight size={14} className="text-slate-300"/>
            <strong className="text-slate-800 font-bold">{currentLabel}</strong>
          </div>

          <div className="topbar-right flex items-center gap-3">
            <label className="top-search">
              <Search size={15}/>
              <input 
                placeholder="Search inventory, reg..." 
                value={search} 
                onChange={(e) => setSearch(e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter") navigate("cars"); }}
              />
            </label>

            <div className="hidden sm:flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-100 border border-slate-200 text-[11px] font-semibold text-slate-600" title="Database Connection Status">
              <span className={`w-2 h-2 rounded-full ${dbStatus.includes('Supabase') ? 'bg-emerald-500 animate-pulse' : dbStatus.includes('Active') ? 'bg-blue-500' : 'bg-amber-500'}`} />
              <span>{dbStatus}</span>
            </div>

            <button 
              className="icon-button" 
              onClick={() => {
                loadData();
                notify("Refreshing inventory from database...");
              }}
              title="Refresh from Database"
            >
              <RefreshCw size={16} className={loading ? "animate-spin text-blue-600" : ""}/>
            </button>

            <button 
              className="icon-button" 
              onClick={() => notify("Notifications: All systems operational")}
              title="Notifications"
            >
              <Bell size={18}/>
              <i/>
            </button>

            <div className="avatar small-avatar" title={`Signed in as ${currentUser?.name || 'Admin'} (${currentUser?.email || ''})`}>
              {currentUser?.name?.slice(0, 2).toUpperCase() || 'CB'}
            </div>
          </div>
        </header>

        {/* Page Switcher */}
        {page === "cars" ? (
          <div className="page-content space-y-6">
            {schemaNeeded && (
              <div className="bg-amber-50 border border-amber-200 text-amber-900 px-4 py-3 rounded-2xl flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs shadow-xs animate-in fade-in">
                <div className="flex items-center gap-2.5">
                  <Database size={18} className="text-amber-600 shrink-0" />
                  <div>
                    <span className="font-bold block">Supabase Connected — Database Setup Required</span>
                    <span className="text-amber-700 text-[11px]">
                      The <code>cars</code> table is not created yet. Please execute the provided <code>supabase_schema.sql</code> in your Supabase SQL Editor.
                    </span>
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => {
                    navigator.clipboard.writeText(`https://supabase.com/dashboard/project/fdyygnhrnudpcoonrwsj/sql`);
                    notify("Copied Supabase SQL Editor link to clipboard!");
                  }}
                  className="px-3 py-1.5 bg-white border border-amber-300 rounded-xl text-amber-900 font-bold hover:bg-amber-100 transition-colors shrink-0 shadow-2xs"
                >
                  Copy SQL Link
                </button>
              </div>
            )}

            {/* Render 3-Grid Form Studio or Inventory Table */}
            {carViewMode === "create" ? (
              <ThreeGridCarForm 
                onSaveCar={handleAddNewCar} 
                notify={notify} 
                activeCar={selectedCar}
                onBackToInventory={() => setCarViewMode("inventory")}
              />
            ) : (
              <CarInventoryTable 
                cars={cars} 
                onAddNewCar={handleOpenCarStudio} 
                notify={notify} 
                onDeleteCar={handleDeleteCar}
                loading={loading}
              />
            )}
          </div>
        ) : page === "inspection" ? (
          <div className="page-content space-y-6">
            <InspectionsDashboard
              cars={cars}
              onInspectCar={(car) => {
                handleOpenCarStudio(car);
                setPage("cars");
              }}
              notify={notify}
            />
          </div>
        ) : (
          /* ALL OTHER PAGES RENDER SLEEK COMING SOON SCREENS (As requested by user!) */
          <ComingSoon
            title={`${currentLabel} — Coming Soon`}
            subtitle={`The ${currentLabel} module is currently being configured. Use Car Management for the 3-Grid vehicle creation and 210-point technical inspection system.`}
            icon={navItems.find(i => i.id === page)?.icon}
            onGoToCars={() => {
              setPage("cars");
              setCarViewMode("create");
            }}
          />
        )}
      </main>

      {/* Floating Toast Notification */}
      {toast && (
        <div className="toast fixed bottom-6 right-6 z-50 bg-slate-900 text-white px-4 py-3 rounded-2xl shadow-2xl flex items-center gap-3 text-xs font-semibold animate-in fade-in">
          <CheckCircle2 size={18} className="text-emerald-400 shrink-0" />
          <span>{toast}</span>
        </div>
      )}
    </div>
  );
}

function NavButton({ item, active, onClick }) {
  const Icon = item.icon;
  return (
    <button className={`nav-item ${active ? "active" : ""}`} onClick={onClick}>
      <Icon size={18}/>
      <span>{item.label}</span>
      {item.count && <small>{item.count}</small>}
    </button>
  );
}

createRoot(document.getElementById("root")).render(<App />);