"use client";

import { useState, useEffect } from "react";
import { Calendar, Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { fetchBalanceSheet, type BalanceSheetData } from "@/lib/supabase/reports-actions";
import PageSkeleton from "./PageSkeleton";

const PERIOD_OPTIONS = [
  { label: "Today", value: "today" },
  { label: "End of Last Month", value: "last-month-end" },
  { label: "End of Last Quarter", value: "last-quarter-end" },
  { label: "End of Last Year", value: "last-year-end" },
];

function getAsOfDate(period: string): string {
  const now = new Date();
  const y = now.getFullYear();
  const m = now.getMonth();

  switch (period) {
    case "today":
      return `${y}-${String(m + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
    case "last-month-end":
      return `${y}-${String(m).padStart(2, "0")}-${new Date(y, m, 0).getDate()}`;
    case "last-quarter-end": {
      const qm = Math.floor((m - 1) / 3) * 3;
      return `${y}-${String(Math.min(qm + 3, 12)).padStart(2, "0")}-${new Date(y, Math.min(qm + 3, 12), 0).getDate()}`;
    }
    case "last-year-end":
      return `${y - 1}-12-31`;
    default:
      return `${y}-${String(m + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
  }
}

function formatCurrency(amount: number): string {
  return `$${amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

export default function ReportsBalanceSheetPage() {
  const [period, setPeriod] = useState("today");
  const [data, setData] = useState<BalanceSheetData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const asOf = getAsOfDate(period);
    let cancelled = false;
    fetchBalanceSheet(asOf)
      .then((d) => { if (!cancelled) setData(d); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [period]);

  if (loading) return <PageSkeleton name="Balance Sheet" />;
  if (!data) return null;

  return (
    <div className="space-y-6">
      {/* Controls */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex items-center gap-2">
          <Calendar className="w-4 h-4 text-gray-400" />
          <select
            value={period}
            onChange={(e) => setPeriod(e.target.value)}
            className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
          >
            {PERIOD_OPTIONS.map((p) => (
              <option key={p.value} value={p.value}>{p.label}</option>
            ))}
          </select>
          <span className="text-sm text-gray-500">As of {data.asOfDate}</span>
        </div>
        <Button variant="outline" onClick={() => window.print()} className="gap-2 cursor-pointer print:hidden">
          <Download className="w-4 h-4" />
          Print
        </Button>
      </div>

      {/* Summary */}
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Total Assets</p>
          <p className="text-xl font-bold text-emerald-600 mt-1">{formatCurrency(data.totalAssets)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Total Liabilities</p>
          <p className="text-xl font-bold text-red-600 mt-1">{formatCurrency(data.totalLiabilities)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Net Assets</p>
          <p className={`text-xl font-bold mt-1 ${data.netAssets >= 0 ? "text-emerald-600" : "text-red-600"}`}>
            {formatCurrency(data.netAssets)}
          </p>
        </div>
      </div>

      {/* Detailed Balance Sheet */}
      <Card className="border-0 shadow-sm">
        <CardContent className="p-6 sm:p-8">
          <h2 className="text-lg font-semibold text-gray-900 mb-6">Balance Sheet</h2>

          <div className="space-y-8">
            {/* Assets */}
            <div>
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Assets</h3>
              {data.assets.length > 0 ? (
                data.assets.map((item) => (
                  <div key={item.name} className="flex justify-between text-sm py-1.5">
                    <span className="text-gray-600">{item.name}</span>
                    <span className="text-gray-900 font-medium">{formatCurrency(item.amount)}</span>
                  </div>
                ))
              ) : (
                <p className="text-sm text-gray-400">No assets recorded</p>
              )}
              <div className="flex justify-between text-sm font-semibold border-t border-gray-100 pt-2 mt-2">
                <span className="text-gray-900">Total Assets</span>
                <span className="text-emerald-600">{formatCurrency(data.totalAssets)}</span>
              </div>
            </div>

            {/* Liabilities */}
            <div>
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Liabilities</h3>
              {data.liabilities.length > 0 ? (
                data.liabilities.map((item) => (
                  <div key={item.name} className="flex justify-between text-sm py-1.5">
                    <span className="text-gray-600">{item.name}</span>
                    <span className="text-gray-900 font-medium">{formatCurrency(item.amount)}</span>
                  </div>
                ))
              ) : (
                <p className="text-sm text-gray-400">No liabilities recorded</p>
              )}
              <div className="flex justify-between text-sm font-semibold border-t border-gray-100 pt-2 mt-2">
                <span className="text-gray-900">Total Liabilities</span>
                <span className="text-red-600">{formatCurrency(data.totalLiabilities)}</span>
              </div>
            </div>

            {/* Equity */}
            <div>
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Equity</h3>
              {data.equity.length > 0 ? (
                data.equity.map((item) => (
                  <div key={item.name} className="flex justify-between text-sm py-1.5">
                    <span className="text-gray-600">{item.name}</span>
                    <span className="text-gray-900 font-medium">{formatCurrency(item.amount)}</span>
                  </div>
                ))
              ) : (
                <p className="text-sm text-gray-400">No equity tracked</p>
              )}
              <div className="flex justify-between text-sm font-semibold border-t border-gray-100 pt-2 mt-2">
                <span className="text-gray-900">Net Assets</span>
                <span className={`text-gray-900 ${data.netAssets < 0 ? "text-red-600" : ""}`}>
                  {formatCurrency(data.netAssets)}
                </span>
              </div>
            </div>

            {/* Verification */}
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-500">Assets = Liabilities + Equity</span>
                <span className={`font-semibold ${Math.abs(data.totalAssets - (data.totalLiabilities + data.netAssets)) < 0.01 ? "text-emerald-600" : "text-red-600"}`}>
                  {Math.abs(data.totalAssets - (data.totalLiabilities + data.netAssets)) < 0.01 ? "Balanced ✓" : "Out of balance ✗"}
                </span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}