"use client";

import { useEffect, useState } from "react";
import {
  BarChart3,
  TrendingUp,
  TrendingDown,
  BadgeDollarSign,
  Users,
} from "lucide-react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line,
} from "recharts";

interface ReportData {
  revenueByCategory: Array<{
    category: string | null;
    revenue: string;
    quantity: string;
  }>;
  monthlyRevenue: Array<{
    month: string;
    revenue: string;
    orderCount: string;
  }>;
  expenseBreakdown: Array<{
    category: string;
    total: string;
  }>;
  topCustomers: Array<{
    name: string;
    facebookName: string | null;
    totalOrders: number;
    totalSpent: string;
    city: string | null;
  }>;
  profitSummary: {
    totalSales: string;
    totalCost: string;
    totalExpenses: string;
    grossProfit: string;
    netProfit: string;
  };
}

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

const COLORS = ["#ec4899", "#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#ef4444", "#06b6d4", "#84cc16"];

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

  useEffect(() => {
    fetch("/api/reports")
      .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 reports</div>;

  const grossMargin = parseFloat(data.profitSummary.totalSales) > 0
    ? ((parseFloat(data.profitSummary.grossProfit) / parseFloat(data.profitSummary.totalSales)) * 100).toFixed(1)
    : "0";

  const categoryChartData = data.revenueByCategory.map((d) => ({
    name: d.category || "Uncategorized",
    revenue: parseFloat(d.revenue),
    quantity: parseInt(d.quantity),
  }));

  const monthChartData = data.monthlyRevenue.map((d) => ({
    month: d.month,
    revenue: parseFloat(d.revenue),
    orders: parseInt(d.orderCount),
  }));

  const expensePieData = data.expenseBreakdown.map((d) => ({
    name: d.category,
    value: parseFloat(d.total),
  }));

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
          <BarChart3 className="text-brand-500" size={28} />
          Reports & Analytics
        </h1>
        <p className="text-gray-500 mt-1">Business performance insights for ChicAdorn</p>
      </div>

      {/* Profit Summary */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-5 mb-8">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
          <div className="flex items-center gap-2 mb-1">
            <BadgeDollarSign size={16} className="text-green-500" />
            <p className="text-sm text-gray-500">Total Sales</p>
          </div>
          <p className="text-2xl font-bold text-green-600">{formatCurrency(data.profitSummary.totalSales)}</p>
        </div>
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
          <div className="flex items-center gap-2 mb-1">
            <TrendingDown size={16} className="text-red-500" />
            <p className="text-sm text-gray-500">Cost of Goods</p>
          </div>
          <p className="text-2xl font-bold text-red-600">{formatCurrency(data.profitSummary.totalCost)}</p>
        </div>
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
          <div className="flex items-center gap-2 mb-1">
            <TrendingUp size={16} className="text-blue-500" />
            <p className="text-sm text-gray-500">Gross Profit</p>
          </div>
          <p className="text-2xl font-bold text-blue-600">{formatCurrency(data.profitSummary.grossProfit)}</p>
          <p className="text-xs text-gray-400">{grossMargin}% margin</p>
        </div>
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
          <div className="flex items-center gap-2 mb-1">
            <TrendingDown size={16} className="text-orange-500" />
            <p className="text-sm text-gray-500">Expenses</p>
          </div>
          <p className="text-2xl font-bold text-orange-600">{formatCurrency(data.profitSummary.totalExpenses)}</p>
        </div>
        <div className="bg-gradient-to-br from-brand-500 to-brand-700 rounded-2xl shadow-lg p-5 text-white">
          <p className="text-sm text-brand-200">Net Profit</p>
          <p className="text-2xl font-bold">{formatCurrency(data.profitSummary.netProfit)}</p>
          <p className="text-xs text-brand-200 mt-1">After all expenses</p>
        </div>
      </div>

      {/* Charts Row 1 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-8">
        {/* Revenue by Category */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-4">Revenue by Saree Category</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={categoryChartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
              <XAxis dataKey="name" tick={{ fontSize: 11 }} stroke="#94a3b8" angle={-20} textAnchor="end" height={60} />
              <YAxis tick={{ fontSize: 11 }} stroke="#94a3b8" />
              <Tooltip formatter={(value: unknown) => [formatCurrency(String(value)), "Revenue"]} />
              <Bar dataKey="revenue" fill="#ec4899" radius={[6, 6, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>

        {/* Expense Breakdown */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-4">Expense Breakdown</h3>
          <div className="flex items-center gap-8">
            <ResponsiveContainer width="50%" height={250}>
              <PieChart>
                <Pie data={expensePieData} cx="50%" cy="50%" outerRadius={90} innerRadius={45} dataKey="value" paddingAngle={3}>
                  {expensePieData.map((_, i) => (
                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(value: unknown) => formatCurrency(String(value))} />
              </PieChart>
            </ResponsiveContainer>
            <div className="flex-1 space-y-2">
              {expensePieData.map((entry, i) => (
                <div key={i} className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-2">
                    <div className="w-3 h-3 rounded-full" style={{ backgroundColor: COLORS[i % COLORS.length] }} />
                    <span className="text-gray-600">{entry.name}</span>
                  </div>
                  <span className="font-medium">{formatCurrency(entry.value)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Monthly Revenue Trend */}
      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-8">
        <h3 className="font-semibold text-gray-800 mb-4">Monthly Revenue & Orders</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={monthChartData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
            <XAxis dataKey="month" tick={{ fontSize: 12 }} stroke="#94a3b8" />
            <YAxis yAxisId="left" tick={{ fontSize: 12 }} stroke="#94a3b8" />
            <YAxis yAxisId="right" orientation="right" tick={{ fontSize: 12 }} stroke="#94a3b8" />
            <Tooltip formatter={(value: unknown, name: unknown) => [
              name === "revenue" ? formatCurrency(String(value)) : String(value),
              name === "revenue" ? "Revenue" : "Orders"
            ]} />
            <Line yAxisId="left" type="monotone" dataKey="revenue" stroke="#ec4899" strokeWidth={3} dot={{ r: 5 }} />
            <Line yAxisId="right" type="monotone" dataKey="orders" stroke="#3b82f6" strokeWidth={2} dot={{ r: 4 }} strokeDasharray="5 5" />
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* Top Customers */}
      <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">
          <Users size={18} className="text-brand-500" />
          Top Customers
        </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-3 text-gray-500 font-medium">#</th>
                <th className="text-left py-3 px-3 text-gray-500 font-medium">Customer</th>
                <th className="text-left py-3 px-3 text-gray-500 font-medium">Facebook</th>
                <th className="text-left py-3 px-3 text-gray-500 font-medium">City</th>
                <th className="text-center py-3 px-3 text-gray-500 font-medium">Orders</th>
                <th className="text-right py-3 px-3 text-gray-500 font-medium">Total Spent</th>
              </tr>
            </thead>
            <tbody>
              {data.topCustomers.map((c, i) => (
                <tr key={i} className="border-b border-gray-50 hover:bg-gray-50/50">
                  <td className="py-3 px-3">
                    <span className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white ${
                      i === 0 ? "bg-gold-500" : i === 1 ? "bg-gray-400" : i === 2 ? "bg-amber-700" : "bg-gray-300"
                    }`}>
                      {i + 1}
                    </span>
                  </td>
                  <td className="py-3 px-3 font-medium text-gray-900">{c.name}</td>
                  <td className="py-3 px-3 text-blue-500 text-xs">{c.facebookName || "—"}</td>
                  <td className="py-3 px-3 text-gray-500">{c.city || "—"}</td>
                  <td className="py-3 px-3 text-center">
                    <span className="px-2.5 py-1 bg-brand-50 text-brand-700 text-xs rounded-full font-medium">
                      {c.totalOrders}
                    </span>
                  </td>
                  <td className="py-3 px-3 text-right font-bold text-green-600">{formatCurrency(c.totalSpent)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}