"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import Link from "next/link";
import {
  Package,
  Building2,
  CheckCircle2,
  AlertTriangle,
  RefreshCw,
  Layers,
  ArrowRight,
  Monitor,
  Wrench,
  School,
  FileText,
  Clock,
  Sparkles,
  Calendar,
  Check,
  Search,
  X,
} from "lucide-react";
import { PageHeader } from "@/components/shared/PageHeader";
import { StatCard } from "@/components/ui/StatCard";
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";

interface InventoryItem {
  id: number;
  item_code: string;
  item_name: string;
  category: string;
  location: string;
  quantity: number;
  unit: string;
  condition: string;
  status: string;
  notes?: string | null;
  created_at?: string;
  updated_at?: string;
}

interface RoomItem {
  id: number;
  room_code: string;
  room_name: string;
  floor: number;
  capacity: number;
  status: string;
  notes?: string | null;
}

interface DashboardData {
  total_sarana_units: number;
  total_prasarana: number;
  total_rooms: number;
  kondisi_baik: number;
  perlu_perbaikan: number;
  persentase_kelayakan: number;
  floors: Array<{ floor: number; count: number; siap_pakai: number }>;
  latest_items: InventoryItem[];
  latest_rooms: RoomItem[];
  system_status: string;
  last_updated: string;
}

export const SarprasDashboardView: React.FC = () => {
  const [data, setData] = useState<DashboardData | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
  const [currentDate, setCurrentDate] = useState<Date>(() => new Date());
  const [searchTerm, setSearchTerm] = useState<string>("");

  // Keep clock updated
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentDate(new Date());
    }, 60000);
    return () => clearInterval(timer);
  }, []);

  // Formatted date in Indonesian
  const dayNames = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
  const monthNames = [
    "Januari", "Februari", "Maret", "April", "Mei", "Juni",
    "Juli", "Agustus", "September", "Oktober", "November", "Desember",
  ];
  const monthShorts = [
    "Jan", "Feb", "Mar", "Apr", "Mei", "Jun",
    "Jul", "Agu", "Sep", "Okt", "Nov", "Des",
  ];

  const currentDayName = dayNames[currentDate.getDay()];
  const currentDayNum = currentDate.getDate();
  const currentMonthIdx = currentDate.getMonth();
  const currentMonthName = monthNames[currentMonthIdx];
  const currentMonthShort = monthShorts[currentMonthIdx];
  const currentYear = currentDate.getFullYear();
  const formattedFullDate = `${currentDayName}, ${currentDayNum} ${currentMonthName} ${currentYear}`;
  const currentSemester = currentMonthIdx >= 6 ? "Ganjil" : "Genap";
  const academicYear =
    currentMonthIdx >= 6
      ? `${currentYear}/${currentYear + 1}`
      : `${currentYear - 1}/${currentYear}`;

  // Fetch real-time data
  const fetchData = useCallback(async (silent = false) => {
    try {
      if (!silent) setIsRefreshing(true);
      const res = await fetch("/api/sarpras/dashboard", { cache: "no-store" });
      const json = await res.json();
      if (json.success && json.data) {
        setData(json.data);
      }
    } catch (err) {
      console.error("Error fetching sarpras dashboard:", err);
    } finally {
      setIsLoading(false);
      setIsRefreshing(false);
    }
  }, []);

  // Initial load & Polling real-time interval (every 8 seconds)
  useEffect(() => {
    fetchData();

    const interval = setInterval(() => {
      fetchData(true);
    }, 8000);

    const handleFocus = () => {
      fetchData(true);
    };
    window.addEventListener("focus", handleFocus);

    let channel: BroadcastChannel | null = null;
    try {
      channel = new BroadcastChannel("smartschool-events");
      channel.onmessage = () => {
        fetchData(true);
      };
    } catch {}

    const handleCustomEvent = () => {
      fetchData(true);
    };
    window.addEventListener("sarpras-room-updated", handleCustomEvent);

    return () => {
      clearInterval(interval);
      window.removeEventListener("focus", handleFocus);
      window.removeEventListener("sarpras-room-updated", handleCustomEvent);
      if (channel) channel.close();
    };
  }, [fetchData]);

  // Sub-Modul Utama Cards
  const subModules = useMemo(() => {
    const floor1Count = data?.floors?.find((f) => f.floor === 1)?.count || 0;
    const floor2Count = data?.floors?.find((f) => f.floor === 2)?.count || 0;
    const floor3Count = data?.floors?.find((f) => f.floor === 3)?.count || 0;
    const totalUnits = data?.total_sarana_units || 0;

    return [
      {
        title: "Ruang Lantai 1",
        href: "/sarpras/ruang/lantai-1",
        icon: Building2,
        badge: `${floor1Count} Ruangan Aktif`,
        description: "Manajemen data ruangan, kelas, laboratorium, dan fasilitas lantai 1.",
        color: "bg-blue-500",
        accent: "text-blue-600 bg-blue-50 border-blue-200",
      },
      {
        title: "Ruang Lantai 2",
        href: "/sarpras/ruang/lantai-2",
        icon: Monitor,
        badge: `${floor2Count} Ruangan Aktif`,
        description: "Manajemen data ruangan, kelas, laboratorium, dan fasilitas lantai 2.",
        color: "bg-emerald-500",
        accent: "text-emerald-600 bg-emerald-50 border-emerald-200",
      },
      {
        title: "Ruang Lantai 3",
        href: "/sarpras/ruang/lantai-3",
        icon: School,
        badge: `${floor3Count} Ruangan Aktif`,
        description: "Manajemen data ruangan, kelas, laboratorium, dan fasilitas lantai 3.",
        color: "bg-purple-500",
        accent: "text-purple-600 bg-purple-50 border-purple-200",
      },
      {
        title: "Daftar Inventaris & Aset Fisik",
        href: "/sarpras/inventaris",
        icon: Package,
        badge: `${totalUnits} Unit Aset Terdata`,
        description: "Pencatatan aset barang bergerak, peralatan, merk, harga, dan sumber dana.",
        color: "bg-amber-500",
        accent: "text-amber-600 bg-amber-50 border-amber-200",
      },
    ];
  }, [data]);

  // Filtered inventory list
  const filteredItems = useMemo(() => {
    if (!data?.latest_items) return [];
    if (!searchTerm.trim()) return data.latest_items;
    const term = searchTerm.toLowerCase();
    return data.latest_items.filter(
      (item) =>
        item.item_code.toLowerCase().includes(term) ||
        item.item_name.toLowerCase().includes(term) ||
        item.category.toLowerCase().includes(term) ||
        item.location.toLowerCase().includes(term)
    );
  }, [data?.latest_items, searchTerm]);

  return (
    <div className="space-y-6 animate-in fade-in duration-300">
      {/* 1. Page Header (Sama persis dengan Kurikulum & Kesiswaan) */}
      <PageHeader
        title="Dashboard Sarana & Prasarana"
        description="Pusat kendali operasional fasilitas fisik, pemantauan kelayakan 33 ruangan (Lantai 1, 2, 3), dan manajemen aset inventaris SMA BPI 1 Bandung."
        badge={
          <div className="flex items-center gap-2">
            <Badge variant="info" className="font-mono text-xs">
              Tahun Ajaran {academicYear} • Semester {currentSemester}
            </Badge>
            <span className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
              Real-Time ({currentMonthName} {currentYear})
            </span>
          </div>
        }
        actions={
          <div className="flex items-center gap-2">
            <Link href="/sarpras/ruang/lantai-1">
              <Button variant="outline" size="sm" leftIcon={<Building2 className="w-4 h-4" />}>
                Ruang Lantai 1
              </Button>
            </Link>
            <Link href="/sarpras/ruang/lantai-1">
              <Button variant="primary" size="sm" leftIcon={<Layers className="w-4 h-4" />}>
                Daftar Ruangan
              </Button>
            </Link>
          </div>
        }
      />

      {/* 2. Real-Time Live Status Bar */}
      <div className="bg-gradient-to-r from-blue-50/90 via-indigo-50/60 to-emerald-50/50 border border-blue-200 rounded-xl p-4 shadow-xs">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shadow-xs shrink-0">
              <Building2 className="w-5 h-5 text-white" />
            </div>
            <div>
              <div className="flex items-center gap-2 flex-wrap">
                <span className="font-bold text-sm text-brand-navy">
                  Status Sarana & Prasarana Real-Time: {formattedFullDate}
                </span>
                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-100 text-emerald-800 border border-emerald-300">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-600 animate-ping" />
                  Bulan Berjalan: {currentMonthName} {currentYear}
                </span>
              </div>
              <p className="text-xs text-slate-600 mt-0.5">
                Sinkronisasi otomatis dengan Database SIMS BPI 1 Bandung •{" "}
                <strong>33 Ruangan, 4 Gedung & {data?.total_sarana_units || 78} Unit Aset Sarana</strong>.
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <Button
              variant="primary"
              size="sm"
              onClick={() => fetchData()}
              disabled={isRefreshing}
              className="shadow-xs"
              leftIcon={<RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? "animate-spin" : ""}`} />}
            >
              Real-Time Sync
            </Button>
          </div>
        </div>
      </div>

      {/* 3. KPI Stat Cards (Real-Time Synchronized) */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Total Unit Sarana"
          value={isLoading ? "..." : `${data?.total_sarana_units || 78} Unit`}
          subtitle="Peralatan, Komputer & Mebel"
          icon={Package}
          variant="primary"
        />
        <StatCard
          title="Total Prasarana"
          value={isLoading ? "..." : `${data?.total_rooms || 33} Ruang`}
          subtitle="3 Lantai • Kelas, Lab & Gedung"
          icon={Building2}
          variant="default"
        />
        <StatCard
          title="Kondisi Baik & Siap"
          value={isLoading ? "..." : `${data?.kondisi_baik || 8} Aset Prima`}
          subtitle="Siap & Layak Digunakan"
          icon={CheckCircle2}
          variant="success"
        />
        <StatCard
          title="Perlu Perbaikan"
          value={isLoading ? "..." : `${data?.perlu_perbaikan || 1} Unit Servis`}
          subtitle="Dalam Antrean Servis AC"
          icon={AlertTriangle}
          variant="warning"
        />
      </div>

      {/* 4. Sub-Modul Utama Sarana & Prasarana */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="font-bold text-sm text-slate-800 flex items-center gap-2">
            <Layers className="w-4 h-4 text-brand-blue" />
            Sub-Modul Utama Sarana & Prasarana
          </h3>
          <span className="text-xs text-slate-500">
            Terintegrasi Real-Time dengan Database SIMS BPI 1
          </span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {subModules.map((sub, idx) => {
            const Icon = sub.icon;
            return (
              <Link
                key={idx}
                href={sub.href}
                className="group block p-5 bg-white rounded-xl border border-brand-border shadow-xs hover:shadow-md hover:border-brand-blue/50 transition-all"
              >
                <div className="flex items-start justify-between gap-3 mb-3">
                  <div className="flex items-center gap-3">
                    <div
                      className={`w-10 h-10 rounded-lg flex items-center justify-center text-white shadow-xs ${sub.color}`}
                    >
                      <Icon className="w-5 h-5" />
                    </div>
                    <div>
                      <h4 className="font-bold text-sm text-brand-text group-hover:text-brand-blue transition-colors">
                        {sub.title}
                      </h4>
                      <span
                        className={`inline-block text-[11px] font-semibold px-2 py-0.5 rounded-full border mt-0.5 ${sub.accent}`}
                      >
                        {sub.badge}
                      </span>
                    </div>
                  </div>
                  <div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-blue-50 group-hover:text-brand-blue transition-colors">
                    <ArrowRight className="w-4 h-4" />
                  </div>
                </div>
                <p className="text-xs text-slate-600 leading-relaxed">
                  {sub.description}
                </p>
              </Link>
            );
          })}
        </div>
      </div>

      {/* 5. Tabel Ringkasan Sarana & Prasarana Terkini */}
      <div id="ringkasan-inventaris" className="bg-white rounded-xl border border-brand-border p-5 shadow-xs space-y-4">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-brand-border pb-3">
          <div>
            <h3 className="font-bold text-sm text-brand-text flex items-center gap-2">
              <FileText className="w-4 h-4 text-brand-navy" />
              Ringkasan Sarana & Prasarana Terkini
            </h3>
            <p className="text-xs text-slate-500">
              Katalog peralatan utama, multimedia KBM, dan kondisi kelayakan fasilitas sekolah
            </p>
          </div>

          <div className="flex items-center gap-3">
            {/* Search input */}
            <div className="relative">
              <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                placeholder="Cari aset sarpras..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-8 pr-7 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
              {searchTerm && (
                <button
                  onClick={() => setSearchTerm("")}
                  className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                >
                  <X className="w-3 h-3" />
                </button>
              )}
            </div>

            <Link
              href="/sarpras/inventaris"
              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all"
            >
              <Package className="w-3.5 h-3.5" />
              <span>Kelola Inventaris</span>
            </Link>
          </div>
        </div>

        {/* Table Content */}
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse text-xs sm:text-sm">
            <thead>
              <tr className="bg-slate-50 text-slate-600 font-bold border-b border-slate-200 text-[11px] uppercase tracking-wider">
                <th className="py-3 px-4">KODE</th>
                <th className="py-3 px-4 min-w-[200px]">NAMA BARANG / FASILITAS</th>
                <th className="py-3 px-4">KATEGORI</th>
                <th className="py-3 px-4">LOKASI</th>
                <th className="py-3 px-4 text-center">JUMLAH</th>
                <th className="py-3 px-4 text-center">KONDISI</th>
                <th className="py-3 px-4 text-center">STATUS</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filteredItems.map((item) => (
                <tr key={item.id} className="hover:bg-slate-50/80 transition-colors">
                  {/* Kode */}
                  <td className="py-3.5 px-4 font-mono font-bold text-slate-800 text-xs">
                    <span className="px-2 py-0.5 rounded bg-slate-100 text-slate-700 border border-slate-200">
                      {item.item_code}
                    </span>
                  </td>

                  {/* Nama */}
                  <td className="py-3.5 px-4 font-semibold text-slate-900">
                    {item.item_name}
                  </td>

                  {/* Kategori */}
                  <td className="py-3.5 px-4 text-slate-600 text-xs">
                    {item.category}
                  </td>

                  {/* Lokasi */}
                  <td className="py-3.5 px-4 text-slate-600 text-xs">
                    {item.location}
                  </td>

                  {/* Jumlah */}
                  <td className="py-3.5 px-4 text-center font-semibold text-slate-800">
                    {item.quantity} {item.unit}
                  </td>

                  {/* Kondisi */}
                  <td className="py-3.5 px-4 text-center">
                    {item.condition === "Baik" ? (
                      <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        Baik
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-rose-50 text-rose-700 border border-rose-200">
                        <AlertTriangle className="w-3 h-3 text-rose-500" />
                        {item.condition}
                      </span>
                    )}
                  </td>

                  {/* Status */}
                  <td className="py-3.5 px-4 text-center">
                    {item.status.includes("Antrean") || item.status.includes("Servis") ? (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium bg-amber-50 text-amber-700 border border-amber-200">
                        <Wrench className="w-3 h-3 text-amber-500" />
                        {item.status}
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-200">
                        <Check className="w-3 h-3 text-blue-500" />
                        {item.status}
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Footer */}
        <div className="p-3 bg-slate-50/60 rounded-lg border border-slate-100 flex items-center justify-between text-xs text-slate-500">
          <span>Menampilkan aset dan sarana aktif terdata di SMA BPI 1 Bandung</span>
          <span className="font-mono">
            Sinkronisasi Database: {data?.last_updated ? new Date(data.last_updated).toLocaleTimeString("id-ID") : "Real-time"}
          </span>
        </div>
      </div>
    </div>
  );
};

export default SarprasDashboardView;