"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import {
  DollarSign,
  Users,
  FileText,
  Calendar,
  ArrowUpRight,
  ArrowDownRight,
  Bell,
  Search,
  MoreHorizontal,
  ChevronRight,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { fetchDashboardData, fetchUserRole, type DashboardData } from "@/lib/supabase/dashboard-actions";
import { centsToDecimal, INVOICE_STATUS_LABELS } from "@/lib/supabase/invoicing-types";

// ── Skeleton ─────────────────────────────────────────────────

function DashboardSkeleton() {
  return (
    <div className="p-6 lg:p-8 space-y-8 animate-pulse">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <div className="w-48 h-8 bg-gray-200 rounded" />
          <div className="w-32 h-4 bg-gray-100 rounded mt-2" />
        </div>
        <div className="flex items-center gap-3">
          <div className="w-64 h-10 bg-gray-200 rounded-lg" />
          <div className="w-9 h-9 bg-gray-200 rounded-lg" />
        </div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="h-32 bg-gray-100 rounded-lg" />
        ))}
      </div>
      <div className="h-80 bg-gray-100 rounded-lg" />
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
        <div className="lg:col-span-3 h-64 bg-gray-100 rounded-lg" />
        <div className="lg:col-span-2 h-64 bg-gray-100 rounded-lg" />
      </div>
    </div>
  );
}

// ── Components ───────────────────────────────────────────────

function MetricCard({
  title,
  value,
  change,
  changeSuffix,
  trend,
  comparisonLabel,
  Icon,
  gradient,
  bgSoft,
  iconColor,
}: {
  title: string;
  value: string;
  change: string | null;
  changeSuffix?: string;
  trend: "up" | "down" | "idle";
  comparisonLabel?: string | null;
  Icon: typeof DollarSign;
  gradient: string;
  bgSoft: string;
  iconColor: string;
}) {
  const TrendIcon = trend === "up" ? ArrowUpRight : trend === "down" ? ArrowDownRight : null;
  const trendColor = trend === "up" ? "text-emerald-600" : trend === "down" ? "text-red-500" : "text-gray-400";
  const trendBg = trend === "up" ? "bg-emerald-50" : trend === "down" ? "bg-red-50" : "bg-gray-100";

  return (
    <Card className="relative overflow-hidden border-0 shadow-sm hover:shadow-md transition-all duration-300 group">
      <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient} opacity-80`} />
      <CardContent className="p-6">
        <div className="flex items-start justify-between mb-4">
          <div className={`w-11 h-11 rounded-xl ${bgSoft} flex items-center justify-center transition-transform duration-300 group-hover:scale-110`}>
            <Icon className={`w-5 h-5 ${iconColor}`} />
          </div>
          {trend !== "idle" && TrendIcon && change && (
            <div className={`flex items-center gap-1 px-2 py-1 rounded-full ${trendBg} ${trendColor} text-xs font-medium`}>
              <TrendIcon className="w-3 h-3" />
              {change === "new" ? "New" : `${change}${changeSuffix || "%"}`}
            </div>
          )}
        </div>
        <p className="text-sm font-medium text-gray-500 mb-1">{title}</p>
        <p className="text-3xl font-bold text-gray-900 tracking-tight">{value}</p>
        {comparisonLabel && <p className="text-xs text-gray-400 mt-2">{comparisonLabel}</p>}
      </CardContent>
    </Card>
  );
}

function StatusBadge({ status }: { status: string }) {
  const variants: Record<string, string> = {
    paid: "bg-emerald-100 text-emerald-700 border-emerald-200",
    pending: "bg-amber-100 text-amber-700 border-amber-200",
    overdue: "bg-red-100 text-red-700 border-red-200",
    draft: "bg-gray-100 text-gray-600 border-gray-200",
    sent: "bg-blue-100 text-blue-700 border-blue-200",
    cancelled: "bg-gray-100 text-gray-500 border-gray-200",
    active: "bg-emerald-100 text-emerald-700 border-emerald-200",
    "on-leave": "bg-gray-100 text-gray-600 border-gray-200",
  };

  const cls = variants[status] || "bg-gray-100 text-gray-600 border-gray-200";
  const label = INVOICE_STATUS_LABELS[status as keyof typeof INVOICE_STATUS_LABELS] || status;

  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${cls}`}>
      {label}
    </span>
  );
}

function Avatar({ initials, color }: { initials: string; color: string }) {
  const colors: Record<string, string> = {
    teal: "bg-teal-500", blue: "bg-blue-500", purple: "bg-purple-500",
    orange: "bg-orange-500", pink: "bg-pink-500",
  };
  return (
    <div className={`w-9 h-9 rounded-full ${colors[color] || colors.teal} flex items-center justify-center text-white text-xs font-semibold flex-shrink-0`}>
      {initials}
    </div>
  );
}

const ICON_MAP: Record<string, typeof DollarSign> = {
  DollarSign, Users, Calendar, FileText,
};

const avatarColors = ["teal", "blue", "purple", "orange", "pink"];

function formatDate(dateStr: string): string {
  const d = new Date(dateStr + "T00:00:00");
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

// ── Main Dashboard ───────────────────────────────────────────

export default function DashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [userRole, setUserRole] = useState<string>("employee");

  const router = useRouter();

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetchDashboardData(),
      fetchUserRole(),
    ])
      .then(([d, role]) => {
        if (!cancelled) {
          setData(d);
          setUserRole(role);
        }
      })
      .catch((err) => { 
        if (!cancelled) {
          console.error("Dashboard error:", err);
          const errorMessage = err instanceof Error ? err.message : String(err);
          
          // If no organisation found, redirect to onboarding
          if (errorMessage.includes("Organisation error") || errorMessage.includes("No organisation found")) {
            router.push("/onboarding");
            return;
          }
          
          setError(errorMessage); 
        }
      })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [router]);

  const [greeting, setGreeting] = useState<string>("");

  useEffect(() => {
    const today = new Date();
    setGreeting(
      today.toLocaleDateString("en-US", {
        weekday: "long", month: "long", day: "numeric",
      })
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (loading) return <DashboardSkeleton />;
  if (error) {
    return (
      <div className="p-6 lg:p-8">
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      </div>
    );
  }
  if (!data) return null;

  const metrics: {
    title: string;
    value: string;
    change: string | null;
    trend: "up" | "down" | "idle";
    comparisonLabel?: string | null;
    Icon: typeof DollarSign;
    gradient: string;
    bgSoft: string;
    iconColor: string;
  }[] = [
    {
      title: "Cash on hand",
      value: `$${(data.metrics.cash_on_hand / 100).toLocaleString()}`,
      change: data.trends.cash?.value ?? null,
      trend: data.trends.cash ? (data.trends.cash.direction as "up" | "down") : "idle",
      comparisonLabel: data.metrics.cash_on_hand > 0 ? data.comparisonLabel : null,
      Icon: DollarSign,
      gradient: "from-teal-500 to-emerald-600",
      bgSoft: "bg-teal-50",
      iconColor: "text-teal-600",
    },
    {
      title: "Outstanding invoices",
      value: `$${(data.metrics.outstanding_invoices / 100).toLocaleString()}`,
      change: data.trends.outstanding?.value ?? null,
      trend: data.trends.outstanding ? (data.trends.outstanding.direction as "up" | "down") : "idle",
      comparisonLabel: data.metrics.outstanding_invoices > 0 ? data.comparisonLabel : null,
      Icon: FileText,
      gradient: "from-blue-500 to-indigo-600",
      bgSoft: "bg-blue-50",
      iconColor: "text-blue-600",
    },
    {
      title: "Payroll due",
      value: `$${(data.metrics.payroll_due / 100).toLocaleString()}`,
      change: null,
      trend: "idle",
      comparisonLabel: data.payrollDueDate ? `due ${data.payrollDueDate}` : null,
      Icon: Users,
      gradient: "from-purple-500 to-violet-600",
      bgSoft: "bg-purple-50",
      iconColor: "text-purple-600",
    },
    {
      title: "Headcount",
      value: String(data.metrics.headcount),
      change: null,
      trend: "idle",
      comparisonLabel: null,
      Icon: Users,
      gradient: "from-orange-500 to-amber-600",
      bgSoft: "bg-orange-50",
      iconColor: "text-orange-600",
    },
  ];

  return (
    <div className="p-6 lg:p-8 space-y-8">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Dashboard</h1>
          <p className="text-gray-500 mt-1">{greeting}</p>
        </div>
        <div className="flex items-center gap-3">
          <div className="relative flex-1 sm:flex-none">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <input
              type="text"
              placeholder="Search..."
              className="w-full sm:w-64 pl-10 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-gray-50 transition-all duration-200"
            />
          </div>
          <button className="relative p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-200 cursor-pointer">
            <Bell className="w-5 h-5" />
            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white" />
          </button>
        </div>
      </div>

      {/* Metrics */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {metrics.map((m, i) => <MetricCard key={i} {...m} />)}
      </div>

      {/* Revenue Chart — visible to owner, admin, accountant */}
      {(userRole === "owner" || userRole === "admin" || userRole === "accountant") && (
      <Card className="border-0 shadow-sm">
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-lg font-semibold text-gray-900">Revenue Overview</CardTitle>
              <p className="text-sm text-gray-500 mt-0.5">Revenue vs expenses over the last 7 months</p>
            </div>
            {data.revenueData.some((d) => d.revenue > 0) && (
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-teal-100 text-teal-700 border border-teal-200">
                +22.4% vs last period
              </span>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <div className="h-72">
            {data.revenueData.every((d) => d.revenue === 0) ? (
              <div className="h-full flex items-center justify-center text-center">
                <div>
                  <DollarSign className="w-10 h-10 text-gray-200 mx-auto mb-3" />
                  <p className="text-sm text-gray-400 font-medium">No revenue data yet</p>
                  <p className="text-xs text-gray-300 mt-1">Create and mark invoices as paid to see your revenue trend</p>
                </div>
              </div>
            ) : (
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data.revenueData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                  <defs>
                    <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#1D9E75" stopOpacity={0.15} />
                      <stop offset="95%" stopColor="#1D9E75" stopOpacity={0} />
                    </linearGradient>
                    <linearGradient id="expensesGradient" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#6366F1" stopOpacity={0.1} />
                      <stop offset="95%" stopColor="#6366F1" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F1F5F9" />
                  <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: "#94A3B8" }} />
                  <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: "#94A3B8" }} tickFormatter={(v: number) => v > 0 ? `$${v / 1000}k` : ""} />
                  <Tooltip
                    contentStyle={{ backgroundColor: "#fff", border: "1px solid #E2E8F0", borderRadius: "8px", boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)", fontSize: "13px" }}
                    formatter={(value) => [`$${Number(value).toLocaleString()}`, ""]}
                  />
                  <Area type="monotone" dataKey="revenue" stroke="#1D9E75" strokeWidth={2.5} fill="url(#revenueGradient)" name="Revenue" />
                  <Area type="monotone" dataKey="expenses" stroke="#6366F1" strokeWidth={2.5} fill="url(#expensesGradient)" name="Expenses" />
                </AreaChart>
              </ResponsiveContainer>
            )}
          </div>
        </CardContent>
      </Card>

      )}

      {/* Two Columns */}
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
        {/* Recent Invoices — visible to owner, admin, accountant */}
        {(userRole === "owner" || userRole === "admin" || userRole === "accountant") && (
        <Card className="lg:col-span-3 border-0 shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg font-semibold text-gray-900">Recent Invoices</CardTitle>
              <span className="text-sm text-teal-600 font-medium flex items-center gap-1 cursor-pointer hover:text-teal-700 transition-colors">
                View all <ChevronRight className="w-4 h-4" />
              </span>
            </div>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-100">
                    <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">Company</th>
                    <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 hidden sm:table-cell">Due</th>
                    <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">Amount</th>
                    <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider pb-3">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50">
                  {data.recentInvoices.map((invoice) => {
                    const displayTotal = invoice.total_cents > 0
                      ? `$${centsToDecimal(invoice.total_cents)}`
                      : invoice.amount != null ? `$${invoice.amount.toFixed(2)}` : "$0.00";
                    return (
                      <tr key={invoice.id} className="hover:bg-gray-50/50 transition-colors duration-150 cursor-pointer">
                        <td className="py-3.5"><span className="text-sm font-medium text-gray-900">{invoice.client_name}</span></td>
                        <td className="py-3.5 text-sm text-gray-500 hidden sm:table-cell">{formatDate(invoice.due_date)}</td>
                        <td className="py-3.5 text-sm font-semibold text-gray-900 text-right">{displayTotal}</td>
                        <td className="py-3.5 text-right"><StatusBadge status={invoice.status} /></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
        )}

        {/* Upcoming Events — visible to all roles */}
        <Card className="lg:col-span-2 border-0 shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg font-semibold text-gray-900">Upcoming</CardTitle>
              <button className="text-gray-400 hover:text-gray-600 transition-colors cursor-pointer">
                <MoreHorizontal className="w-5 h-5" />
              </button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {data.upcomingEvents.map((event, index) => {
                const Icon = ICON_MAP[event.icon] || Calendar;
                return (
                  <div key={index} className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors duration-150 cursor-pointer group">
                    <div className={`w-10 h-10 rounded-lg ${event.bg} flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-110`}>
                      <Icon className={`w-5 h-5 ${event.color}`} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-gray-900 truncate">{event.title}</p>
                      <p className="text-xs text-gray-500">{event.date}</p>
                    </div>
                    <ChevronRight className="w-4 h-4 text-gray-300 group-hover:text-gray-500 transition-colors" />
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Row — People Snapshot (owner/admin/hr) */}
      {(userRole === "owner" || userRole === "admin" || userRole === "hr_manager") && (
      <div className="grid grid-cols-1 gap-6">
        {/* People Snapshot */}
        <Card className="border-0 shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg font-semibold text-gray-900">People Snapshot</CardTitle>
              <span className="text-sm text-teal-600 font-medium flex items-center gap-1 cursor-pointer hover:text-teal-700 transition-colors">
                Manage <ChevronRight className="w-4 h-4" />
              </span>
            </div>
          </CardHeader>
          <CardContent>
            {data.peopleSnapshot.length === 0 ? (
              <div className="flex items-center justify-center py-10 text-center">
                <div>
                  <Users className="w-10 h-10 text-gray-200 mx-auto mb-3" />
                  <p className="text-sm text-gray-400 font-medium">No employees added yet.</p>
                </div>
              </div>
            ) : (
              <div className="space-y-1">
                {data.peopleSnapshot.map((person) => (
                  <div key={person.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors duration-150 cursor-pointer group">
                    <Avatar initials={person.initials} color={avatarColors[avatarColors.length - 1]} />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-gray-900 truncate">{person.name}</p>
                      <p className="text-xs text-gray-500">{person.department}{person.job_title ? ` · ${person.job_title}` : ""}</p>
                    </div>
                    <StatusBadge status={person.status} />
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
      )}

      {/* Budget vs Actuals — visible to owner, admin, accountant */}
      {(userRole === "owner" || userRole === "admin" || userRole === "accountant") && data.budgetData.length > 0 && data.budgetData.some((b) => b.budget > 0) && (
        <Card className="border-0 shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold text-gray-900">Budget vs Actuals</CardTitle>
            <p className="text-sm text-gray-500 mt-0.5">Department-level monthly salary spend</p>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {data.budgetData.map((item, index) => {
                const percentage = item.budget > 0 ? (item.actual / item.budget) * 100 : 0;
                const isOverBudget = percentage > 100;
                return (
                  <div key={index} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-900">{item.category}</span>
                      <div className="flex items-center gap-3">
                        <span className="text-sm text-gray-500">
                          ${(item.actual / 1000).toFixed(1)}k / ${(item.budget / 1000).toFixed(1)}k
                        </span>
                        <span className={`text-sm font-semibold px-2 py-0.5 rounded-full ${isOverBudget ? "bg-red-100 text-red-700" : "bg-emerald-100 text-emerald-700"}`}>
                          {percentage.toFixed(0)}%
                        </span>
                      </div>
                    </div>
                    <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                      <div
                        className={`h-full rounded-full transition-all duration-500 ${isOverBudget ? "bg-red-500" : item.color}`}
                        style={{ width: `${Math.min(percentage, 100)}%` }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}