"use client";
import { API, authFetch } from "@/lib/api";
import { useState, useEffect } from "react";
import { Users, Wallet, FileWarning, Briefcase, RefreshCw } from "lucide-react";
import { StatCard } from "@/components/dashboard/StatCard";
import { OverviewChart } from "@/components/dashboard/OverviewChart";
import { RecentActivity } from "@/components/dashboard/RecentActivity";
import { LiveAttendance } from "@/components/dashboard/LiveAttendance";
import { DepartmentStats } from "@/components/dashboard/DepartmentStats";
import { QuickActions } from "@/components/dashboard/QuickActions";

export default function DashboardPage() {
  const [stats, setStats] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date());

  const fetchStats = async (syncFromDevice = false) => {
    try {
      setIsLoading(true);
      if (syncFromDevice) {
        try {
          await authFetch(`${API}/zkteco/sync?days=1`, { method: "POST" });
        } catch (syncErr) {
          console.warn("ZKTeco sync failed:", syncErr);
        }
      }
      const res = await authFetch(`${API}/dashboard/stats`);
      const data = await res.json();
      setStats(data);
      setLastUpdated(new Date());
    } catch (err) {
      console.error("Failed to fetch stats:", err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    let shouldSync = false;
    if (typeof window !== "undefined") {
      const hasSynced = sessionStorage.getItem("zkteco_synced_this_session");
      if (!hasSynced) {
        shouldSync = true;
        sessionStorage.setItem("zkteco_synced_this_session", "true");
      }
    }
    fetchStats(shouldSync);
    // Auto-refresh stats (no device sync to avoid rate limits/lag) every 30 seconds
    const interval = setInterval(() => fetchStats(false), 30000);
    return () => clearInterval(interval);
  }, []);

  const fmtMoney = (n: number) =>
    `Rs ${n?.toLocaleString("en-PK", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) ?? "0.00"}`;

  const statCards = [
    {
      title: "Total Employees",
      value: isLoading ? "..." : stats?.totalEmployees?.toString() ?? "0",
      icon: Users,
      trend: isLoading ? "" : stats?.newJoinersThisMonth > 0 ? `+${stats.newJoinersThisMonth} new this month` : "No new joiners",
      trendUp: (stats?.newJoinersThisMonth ?? 0) > 0,
      delay: 0,
    },
    {
      title: "Monthly Payroll",
      value: isLoading ? "..." : fmtMoney(stats?.payroll?.total ?? 0),
      icon: Wallet,
      trend: isLoading ? "" : `${stats?.payroll?.employeeCount ?? 0} employees processed`,
      trendUp: (stats?.payroll?.total ?? 0) > 0,
      delay: 0.1,
    },
    {
      title: "Active Loans",
      value: isLoading ? "..." : stats?.loans?.active?.toString() ?? "0",
      icon: FileWarning,
      trend: isLoading ? "" : `${fmtMoney(stats?.loans?.totalAmount ?? 0)} outstanding`,
      trendUp: false,
      delay: 0.2,
    },
    {
      title: "Pending Leaves",
      value: isLoading ? "..." : stats?.leaves?.pending?.toString() ?? "0",
      icon: Briefcase,
      trend: isLoading ? "" : stats?.leaves?.pending > 0 ? "Needs approval" : "All caught up",
      trendUp: false,
      delay: 0.3,
    },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:tracking-tight">
            Dashboard
          </h1>
          <p className="mt-1 text-sm text-gray-500">
            Real-time HR analytics and workforce overview
          </p>
        </div>
        <button
          onClick={() => fetchStats(true)}
          disabled={isLoading}
          className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50"
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
          Refresh
        </button>
      </div>

      {/* Last Updated */}
      <p className="text-xs text-gray-400">
        Last updated: {lastUpdated.toLocaleTimeString()}
      </p>

      {/* Stats Row */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {statCards.map((stat, idx) => (
          <StatCard key={idx} {...stat} />
        ))}
      </div>

      {/* Main Dashboard Grid - 2x2 Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Quick Actions */}
        <QuickActions 
          pendingLeaves={stats?.leaves?.pending ?? 0}
          pendingPayrolls={stats?.payroll?.pendingCount ?? 0}
        />
        
        {/* Today's Attendance */}
        {stats?.attendance && (
          <LiveAttendance 
            data={stats.attendance}
            recentCheckins={stats.recentCheckins || []}
            totalEmployees={stats.totalEmployees || 0}
          />
        )}
        
        {/* Department Overview */}
        {stats?.departmentBreakdown && (
          <DepartmentStats 
            departments={stats.departmentBreakdown}
            totalEmployees={stats.totalEmployees || 0}
          />
        )}
        
        {/* Growth & Salary Expense */}
        <OverviewChart />
      </div>

      {/* Recent Activity */}
      <div className="grid grid-cols-1 gap-6">
        <RecentActivity />
      </div>
    </div>
  );
}