"use client";

import { useEffect, useState } from "react";
import {
  BadgeDollarSign,
  ShoppingCart,
  Users,
  Package,
  AlertTriangle,
  TrendingUp,
  Clock,
  CreditCard,
} from "lucide-react";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar,
} from "recharts";
import { format } from "date-fns";
import BrandLogo from "@/components/BrandLogo";

interface DashboardData {
  metrics: {
    totalRevenue: string;
    monthRevenue: string;
    totalOrders: string;
    pendingOrders: string;
    totalCustomers: string;
    totalProducts: string;
    lowStockItems: string;
    totalExpenses: string;
  };
  recentOrders: Array<{
    id: number;
    orderNumber: string;
    customerName: string | null;
    total: string;
    status: string;
    paymentStatus: string;
    createdAt: string;
  }>;
  topProducts: Array<{
    productName: string | null;
    totalSold: string;
    totalRevenue: string;
  }>;
  dailyRevenue: Array<{
    date: string;
    revenue: string;
    orderCount: string;
  }>;
  statusDistribution: Array<{
    status: string;
    count: string;
  }>;
  lowStockProducts: Array<{
    id: number;
    name: string;
    sku: string;
    stock: number;
    lowStockThreshold: number;
  }>;
}

const STATUS_COLORS: Record<string, string> = {
  pending: "#f59e0b",
  confirmed: "#3b82f6",
  shipped: "#8b5cf6",
  delivered: "#10b981",
  cancelled: "#ef4444",
  returned: "#6b7280",
};

const PIE_COLORS = ["#ec4899", "#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#ef4444"];

function formatCurrency(val: string | number) {
  const num = typeof val === "string" ? parseFloat(val) : val;
  return "৳" + new Intl.NumberFormat("bn-BD", {
    maximumFractionDigits: 0,
  }).format(num);
}

const statusLabel: Record<string, string> = {
  pending: "Pending",
  confirmed: "Confirmed",
  shipped: "Shipped",
  delivered: "Delivered",
  cancelled: "Cancelled",
  returned: "Returned",
};

const paymentLabel: Record<string, string> = {
  unpaid: "Unpaid",
  partial: "Partial",
  paid: "Paid",
  refunded: "Refunded",
};

export default function Dashboard() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/dashboard")
      .then((r) => r.json())
      .then(setData)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="animate-spin w-10 h-10 border-4 border-brand-500 border-t-transparent rounded-full" />
      </div>
    );
  }

  if (!data) return <div className="text-center py-20 text-gray-500">Failed to load dashboard</div>;

  const chartData = data.dailyRevenue.map((d) => ({
    date: format(new Date(d.date), "dd MMM"),
    revenue: parseFloat(d.revenue),
    orders: parseInt(d.orderCount),
  }));

  const pieData = data.statusDistribution.map((d) => ({
    name: statusLabel[d.status] || d.status,
    value: parseInt(d.count),
    color: STATUS_COLORS[d.status] || "#6b7280",
  }));

  return (
    <div>
      {/* Header */}
      <div className="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
          <p className="text-gray-500 mt-1">Welcome back to ChicAdorn ERP — your saree business at a glance</p>
        </div>
        <div className="rounded-2xl bg-white px-4 py-3 shadow-sm border border-gray-100">
          <BrandLogo variant="dashboard" className="h-28 w-auto rounded-xl object-contain" />
        </div>
      </div>

      {/* Metric Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        <MetricCard
          icon={<BadgeDollarSign size={22} />}
          label="Total Revenue"
          value={formatCurrency(data.metrics.totalRevenue)}
          sub={`This month: ${formatCurrency(data.metrics.monthRevenue)}`}
          color="bg-gradient-to-br from-green-500 to-emerald-600"
        />
        <MetricCard
          icon={<ShoppingCart size={22} />}
          label="Total Orders"
          value={data.metrics.totalOrders}
          sub={`${data.metrics.pendingOrders} pending`}
          color="bg-gradient-to-br from-blue-500 to-blue-600"
        />
        <MetricCard
          icon={<Users size={22} />}
          label="Customers"
          value={data.metrics.totalCustomers}
          sub="Facebook customers"
          color="bg-gradient-to-br from-purple-500 to-purple-600"
        />
        <MetricCard
          icon={<Package size={22} />}
          label="Products"
          value={data.metrics.totalProducts}
          sub={`${data.metrics.lowStockItems} low stock`}
          color="bg-gradient-to-br from-brand-500 to-brand-600"
          alert={parseInt(data.metrics.lowStockItems) > 0}
        />
      </div>

      {/* Charts Row */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-8">
        {/* Revenue Chart */}
        <div className="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <TrendingUp size={18} className="text-green-500" />
            Revenue Trend (Last 30 Days)
          </h3>
          <ResponsiveContainer width="100%" height={280}>
            <AreaChart data={chartData}>
              <defs>
                <linearGradient id="colorRev" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#ec4899" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="#ec4899" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
              <XAxis dataKey="date" tick={{ fontSize: 12 }} stroke="#94a3b8" />
              <YAxis tick={{ fontSize: 12 }} stroke="#94a3b8" />
              <Tooltip
                formatter={(value: unknown) => [formatCurrency(String(value)), "Revenue"]}
                contentStyle={{ borderRadius: "12px", border: "none", boxShadow: "0 4px 20px rgba(0,0,0,0.1)" }}
              />
              <Area type="monotone" dataKey="revenue" stroke="#ec4899" fill="url(#colorRev)" strokeWidth={2} />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* Order Status Pie */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <Clock size={18} className="text-blue-500" />
            Order Status
          </h3>
          <ResponsiveContainer width="100%" height={220}>
            <PieChart>
              <Pie
                data={pieData}
                cx="50%"
                cy="50%"
                innerRadius={50}
                outerRadius={80}
                paddingAngle={4}
                dataKey="value"
              >
                {pieData.map((entry, i) => (
                  <Cell key={i} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
          <div className="flex flex-wrap gap-2 mt-2 justify-center">
            {pieData.map((entry, i) => (
              <div key={i} className="flex items-center gap-1.5 text-xs text-gray-600">
                <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: entry.color }} />
                {entry.name} ({entry.value})
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom Row */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        {/* Recent Orders */}
        <div className="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <CreditCard size={18} className="text-brand-500" />
            Recent Orders
          </h3>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-100">
                  <th className="text-left py-3 px-2 text-gray-500 font-medium">Order</th>
                  <th className="text-left py-3 px-2 text-gray-500 font-medium">Customer</th>
                  <th className="text-left py-3 px-2 text-gray-500 font-medium">Amount</th>
                  <th className="text-left py-3 px-2 text-gray-500 font-medium">Status</th>
                  <th className="text-left py-3 px-2 text-gray-500 font-medium">Payment</th>
                </tr>
              </thead>
              <tbody>
                {data.recentOrders.map((order) => (
                  <tr key={order.id} className="border-b border-gray-50 hover:bg-gray-50">
                    <td className="py-3 px-2 font-medium text-brand-600">{order.orderNumber}</td>
                    <td className="py-3 px-2">{order.customerName || "N/A"}</td>
                    <td className="py-3 px-2 font-medium">{formatCurrency(order.total)}</td>
                    <td className="py-3 px-2">
                      <span
                        className="px-2.5 py-1 rounded-full text-xs font-medium text-white"
                        style={{ backgroundColor: STATUS_COLORS[order.status] }}
                      >
                        {statusLabel[order.status]}
                      </span>
                    </td>
                    <td className="py-3 px-2">
                      <span className={`text-xs font-medium ${
                        order.paymentStatus === "paid" ? "text-green-600" :
                        order.paymentStatus === "partial" ? "text-yellow-600" :
                        "text-red-500"
                      }`}>
                        {paymentLabel[order.paymentStatus]}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Low Stock + Top Products */}
        <div className="space-y-5">
          {/* Low Stock Alert */}
          {data.lowStockProducts.length > 0 && (
            <div className="bg-white rounded-2xl shadow-sm border border-orange-200 p-6">
              <h3 className="font-semibold text-orange-700 mb-3 flex items-center gap-2">
                <AlertTriangle size={18} />
                Low Stock Alert
              </h3>
              <div className="space-y-3">
                {data.lowStockProducts.map((p) => (
                  <div key={p.id} className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-800">{p.name}</p>
                      <p className="text-xs text-gray-400">{p.sku}</p>
                    </div>
                    <span className="px-2 py-1 bg-red-100 text-red-700 text-xs font-bold rounded-lg">
                      {p.stock} left
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Top Products */}
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <h3 className="font-semibold text-gray-800 mb-3 flex items-center gap-2">
              <TrendingUp size={18} className="text-brand-500" />
              Top Selling Sarees
            </h3>
            <ResponsiveContainer width="100%" height={180}>
              <BarChart data={data.topProducts.map((p) => ({
                name: (p.productName || "").substring(0, 15),
                revenue: parseFloat(p.totalRevenue),
              }))}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                <XAxis dataKey="name" tick={{ fontSize: 10 }} stroke="#94a3b8" />
                <YAxis tick={{ fontSize: 10 }} stroke="#94a3b8" />
                <Tooltip formatter={(value: unknown) => [formatCurrency(String(value)), "Revenue"]} />
                <Bar dataKey="revenue" fill="#ec4899" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    </div>
  );
}

function MetricCard({
  icon,
  label,
  value,
  sub,
  color,
  alert,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  sub: string;
  color: string;
  alert?: boolean;
}) {
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm text-gray-500 mb-1">{label}</p>
          <p className="text-2xl font-bold text-gray-900">{value}</p>
          <p className="text-xs text-gray-400 mt-1">{sub}</p>
        </div>
        <div className={`${color} text-white p-3 rounded-xl shadow-lg relative`}>
          {icon}
          {alert && (
            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse" />
          )}
        </div>
      </div>
    </div>
  );
}