import React, { useMemo } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
  LayoutDashboard,
  CreditCard,
  ArrowRightLeft,
  Users,
  Store,
  Package,
  Settings,
  TrendingUp,
  TrendingDown,
  CalendarDays,
  Banknote,
  Wallet,
  Link2,
  Bell,
  HelpCircle,
  Search,
  Menu,
  CheckCircle2,
  Clock3,
  AlertTriangle,
  Download,
} from "lucide-react";
import { motion } from "framer-motion";

// --- Types ---
interface MetricBar {
  label: string;
  value: number; // current
  max: number; // scale
  tint?: "green" | "blue" | "orange" | "pink" | "purple" | "slate";
  href?: string;
}

interface QuickLink {
  label: string;
  icon: React.ReactNode;
  href: string;
}

interface TimelineItem {
  date: string; // ISO or human
  title: string;
  amount?: string;
  href?: string;
  type?: "note" | "info" | "warning" | "success";
}

interface DashboardData {
  dateLabel: string;
  kpi: {
    monthTurnoverTL: string;
    monthExpensesTL: string;
    stockValueTL: string;
  };
  assets: MetricBar[];
  liabilities: MetricBar[];
  overdueReceivables: TimelineItem[];
  upcomingExpenses: TimelineItem[];
  recentActions: TimelineItem[];
  announcements: TimelineItem[];
  quickLinks: QuickLink[];
}

const demo: DashboardData = {
  dateLabel: "28 Eylül 2025 Pazar",
  kpi: {
    monthTurnoverTL: "TL 19.825,06",
    monthExpensesTL: "TL 9.883,32",
    stockValueTL: "214.448,78",
  },
  assets: [
    { label: "Kasa", value: 31_023, max: 365_022, tint: "green", href: "/finance/cash" },
    { label: "POS", value: 101_346, max: 365_022, tint: "blue", href: "/finance/pos" },
    { label: "Banka", value: 12_615, max: 365_022, tint: "purple", href: "/finance/banks" },
    { label: "Stok", value: 214_448, max: 365_022, tint: "orange", href: "/inventory" },
    { label: "Açık Hesap", value: 5_587, max: 365_022, tint: "slate", href: "/crm/open-accounts" },
  ],
  liabilities: [
    { label: "Açık Hesap", value: 177_773, max: 216_000, tint: "pink", href: "/payables" },
  ],
  overdueReceivables: [
    { date: "335 gün gecikmiş", title: "ALTINSOFT BİLİŞİM TEKNOLOJİLERİ", amount: "5.587,98 TL", href: "/crm/receivables/altinsoft", type: "warning" },
  ],
  upcomingExpenses: [
    { date: "29.09.2025", title: "Geldi Elektrik Per. / Tedarikçi No: 062", amount: "1.140,00", href: "/expenses/062", type: "info" },
  ],
  recentActions: [
    { date: "28.09.2025 20:12", title: "İsmail Eker sisteme giriş yaptı", type: "success" },
    { date: "27.09.2025 11:21", title: "İsmail Eker sisteme giriş yaptı", type: "success" },
    { date: "26.09.2025 23:45", title: "KÖFTECİ YUSUF HAZIR YEMEK TEMİZLİK CANLI HAYVAN – 900,00 TL tahsilat kaydedildi", type: "note" },
  ],
  announcements: [
    { date: "Davet et, kazan", title: "Arkadaşını davet et, 1 ay ek kullanım tanımlayalım!", href: "/referral", type: "info" },
  ],
  quickLinks: [
    { label: "Muhasebe", icon: <CreditCard className="h-4 w-4" />, href: "/accounting" },
    { label: "Müşteriler", icon: <Users className="h-4 w-4" />, href: "/customers" },
    { label: "Tedarikçiler", icon: <Store className="h-4 w-4" />, href: "/suppliers" },
    { label: "Ürünler", icon: <Package className="h-4 w-4" />, href: "/products" },
    { label: "Teklifler", icon: <ArrowRightLeft className="h-4 w-4" />, href: "/quotes" },
    { label: "E‑Ticaret", icon: <Link2 className="h-4 w-4" />, href: "/ecommerce" },
    { label: "Raporlar", icon: <Download className="h-4 w-4" />, href: "/reports" },
    { label: "Ayarlar", icon: <Settings className="h-4 w-4" />, href: "/settings" },
  ],
};

// --- Helpers ---
const tintToClass = (t: MetricBar["tint"]) => {
  switch (t) {
    case "green":
      return "bg-emerald-500";
    case "blue":
      return "bg-sky-500";
    case "orange":
      return "bg-amber-500";
    case "pink":
      return "bg-pink-500";
    case "purple":
      return "bg-violet-500";
    default:
      return "bg-slate-400";
  }
};

function formatTL(n: number) {
  try {
    return new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY" }).format(n);
  } catch {
    return `${n.toLocaleString("tr-TR")} TL`;
  }
}

function NavItem({ icon, label, active = false }: { icon: React.ReactNode; label: string; active?: boolean }) {
  return (
    <button className={`w-full flex items-center gap-3 px-3 py-2 rounded-xl text-left hover:bg-slate-800/50 transition ${
      active ? "bg-slate-800/70 text-white" : "text-slate-200"
    }`}>
      {icon}
      <span className="text-sm">{label}</span>
    </button>
  );
}

export default function EGAdminDashboard({ data = demo }: { data?: DashboardData }) {
  const totalAssets = useMemo(() => data.assets.reduce((a, b) => a + (b.value || 0), 0), [data.assets]);

  const navigate = (href?: string) => {
    if (!href) return;
    // 👉 Burayı projede kendi router'ınıza bağlayın (Next.js: useRouter, React Router: useNavigate)
    window?.open?.(href, "_self");
  };

  return (
    <TooltipProvider>
      <div className="min-h-screen w-full bg-slate-100">
        {/* Top Bar */}
        <div className="sticky top-0 z-40 backdrop-blur bg-white/80 border-b">
          <div className="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3">
            <Button size="icon" variant="ghost" className="md:hidden">
              <Menu className="h-5 w-5" />
            </Button>
            <LayoutDashboard className="h-5 w-5 text-slate-700" />
            <div className="font-semibold">Yönetim Paneli</div>
            <Badge className="ml-2" variant="secondary">Ana Ekran</Badge>
            <div className="ml-auto flex items-center gap-2">
              <div className="hidden md:flex items-center gap-2">
                <Search className="h-4 w-4 text-slate-500" />
                <Input placeholder="Panelde ara…" className="w-72" />
              </div>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="ghost" size="icon"><Bell className="h-5 w-5" /></Button>
                </TooltipTrigger>
                <TooltipContent>Bildirimler</TooltipContent>
              </Tooltip>
              <div className="text-xs text-slate-500 ml-2">{data.dateLabel}</div>
            </div>
          </div>
        </div>

        <div className="max-w-7xl mx-auto grid grid-cols-12 gap-4 px-4 py-6">
          {/* Sidebar */}
          <div className="hidden md:block col-span-2">
            <div className="sticky top-20 bg-slate-900 text-slate-100 rounded-2xl p-3 shadow-sm">
              <div className="px-2 py-3 text-xs uppercase tracking-wide text-slate-400">Modüller</div>
              <nav className="space-y-1">
                {data.quickLinks.map((q, i) => (
                  <div key={i} onClick={() => navigate(q.href)}>
                    <NavItem icon={q.icon} label={q.label} />
                  </div>
                ))}
              </nav>
              <Separator className="my-3 bg-slate-700" />
              <div className="px-2 pb-2 text-[11px] text-slate-400">Toplam Varlık: <span className="text-slate-200 font-medium">{formatTL(totalAssets)}</span></div>
            </div>
          </div>

          {/* Main */}
          <div className="col-span-12 md:col-span-10 space-y-4">
            {/* KPI Row */}
            <div className="grid grid-cols-12 gap-4">
              <Card className="col-span-12 md:col-span-5 rounded-2xl">
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm text-slate-500">Eylül Cirosu</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="text-2xl font-bold">{data.kpi.monthTurnoverTL}</div>
                  <div className="mt-4 space-y-3">
                    {data.assets.map((m, i) => (
                      <div key={i} className="cursor-pointer" onClick={() => navigate(m.href)}>
                        <div className="flex items-center justify-between text-sm mb-1">
                          <span className="text-slate-600">{m.label}</span>
                          <span className="font-medium">{formatTL(m.value)}</span>
                        </div>
                        <div className="h-2 w-full rounded-full bg-slate-200 overflow-hidden">
                          <motion.div
                            initial={{ width: 0 }}
                            animate={{ width: `${Math.min(100, (m.value / m.max) * 100)}%` }}
                            transition={{ duration: 0.6, delay: i * 0.05 }}
                            className={`h-full ${tintToClass(m.tint)} rounded-full`}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <Card className="col-span-12 md:col-span-4 rounded-2xl">
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm text-slate-500">Eylül Masrafları</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="text-2xl font-bold">{data.kpi.monthExpensesTL}</div>
                  <div className="mt-4 space-y-3">
                    {data.liabilities.map((m, i) => (
                      <div key={i} className="cursor-pointer" onClick={() => navigate(m.href)}>
                        <div className="flex items-center justify-between text-sm mb-1">
                          <span className="text-slate-600">{m.label}</span>
                          <span className="font-medium">{formatTL(m.value)}</span>
                        </div>
                        <div className="h-2 w-full rounded-full bg-slate-200 overflow-hidden">
                          <motion.div
                            initial={{ width: 0 }}
                            animate={{ width: `${Math.min(100, (m.value / m.max) * 100)}%` }}
                            transition={{ duration: 0.6 }}
                            className={`h-full ${tintToClass(m.tint)} rounded-full`}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <Card className="col-span-12 md:col-span-3 rounded-2xl">
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm text-slate-500">Stok Değeri</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="text-2xl font-bold">{data.kpi.stockValueTL}</div>
                  <div className="text-xs text-slate-500 mt-2">Güncel envanter maliyet toplamı</div>
                  <div className="mt-4 grid grid-cols-2 gap-2">
                    <Button variant="secondary" onClick={() => navigate("/inventory")}>Envanter</Button>
                    <Button variant="outline" onClick={() => navigate("/purchase-orders")}>Satın Alma</Button>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Middle Row */}
            <div className="grid grid-cols-12 gap-4">
              <Card className="col-span-12 md:col-span-6 rounded-2xl">
                <CardHeader className="pb-2 flex-row items-center justify-between">
                  <CardTitle className="text-sm text-slate-500">Vadesi Geçen Açık Hesap Alacaklar</CardTitle>
                  <Button size="sm" variant="ghost" onClick={() => navigate("/crm/receivables")}>Tümü</Button>
                </CardHeader>
                <CardContent className="pt-0">
                  <ScrollArea className="h-40 pr-2">
                    {data.overdueReceivables.map((i, idx) => (
                      <div key={idx} className="flex items-center justify-between py-2 border-b last:border-b-0">
                        <div className="space-y-0.5">
                          <div className="font-medium text-sm cursor-pointer hover:underline" onClick={() => navigate(i.href)}>{i.title}</div>
                          <div className="text-xs text-slate-500">{i.date}</div>
                        </div>
                        <div className="text-sm font-semibold">{i.amount}</div>
                      </div>
                    ))}
                  </ScrollArea>
                </CardContent>
              </Card>

              <Card className="col-span-12 md:col-span-6 rounded-2xl">
                <CardHeader className="pb-2 flex-row items-center justify-between">
                  <CardTitle className="text-sm text-slate-500">Duyurular</CardTitle>
                  <Button size="sm" variant="ghost" onClick={() => navigate("/announcements")}>Detay</Button>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="space-y-3">
                    {data.announcements.map((n, idx) => (
                      <div key={idx} className="flex items-center gap-3 p-3 rounded-xl bg-slate-50 border">
                        <Badge variant="outline" className="shrink-0">{n.date}</Badge>
                        <div className="text-sm">{n.title}</div>
                        <div className="ml-auto">
                          <Button size="sm" variant="secondary" onClick={() => navigate(n.href)}>Git</Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Bottom Row */}
            <div className="grid grid-cols-12 gap-4">
              <Card className="col-span-12 md:col-span-7 rounded-2xl">
                <CardHeader className="pb-2 flex-row items-center justify-between">
                  <CardTitle className="text-sm text-slate-500">Yaklaşan Masraflar</CardTitle>
                  <Button size="sm" variant="ghost" onClick={() => navigate("/expenses")}>Takvim</Button>
                </CardHeader>
                <CardContent className="pt-0">
                  <ScrollArea className="h-44 pr-2">
                    {data.upcomingExpenses.map((e, idx) => (
                      <div key={idx} className="grid grid-cols-12 items-center py-2 border-b last:border-b-0">
                        <div className="col-span-3 text-xs text-slate-500">{e.date}</div>
                        <div className="col-span-7 text-sm cursor-pointer hover:underline" onClick={() => navigate(e.href)}>{e.title}</div>
                        <div className="col-span-2 text-right font-semibold">{e.amount}</div>
                      </div>
                    ))}
                  </ScrollArea>
                </CardContent>
              </Card>

              <Card className="col-span-12 md:col-span-5 rounded-2xl">
                <CardHeader className="pb-2 flex-row items-center justify-between">
                  <CardTitle className="text-sm text-slate-500">Son İşlemler</CardTitle>
                  <Button size="sm" variant="ghost" onClick={() => navigate("/activity")}>Tümü</Button>
                </CardHeader>
                <CardContent className="pt-0">
                  <ScrollArea className="h-44 pr-2">
                    {data.recentActions.map((a, idx) => (
                      <div key={idx} className="flex items-center gap-3 py-2 border-b last:border-b-0">
                        {a.type === "success" && <CheckCircle2 className="h-4 w-4 text-emerald-600" />}
                        {a.type === "warning" && <AlertTriangle className="h-4 w-4 text-amber-600" />}
                        {(!a.type || a.type === "note" || a.type === "info") && <Clock3 className="h-4 w-4 text-slate-400" />}
                        <div className="text-sm">{a.title}</div>
                        <div className="text-xs text-slate-500 ml-auto">{a.date}</div>
                      </div>
                    ))}
                  </ScrollArea>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </TooltipProvider>
  );
}