"use client";

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

const PERIOD_OPTIONS = [
  { label: "This Month", value: "this-month" },
  { label: "Last Month", value: "last-month" },
  { label: "This Quarter", value: "this-quarter" },
  { label: "This Year", value: "this-year" },
];

function getPeriodDates(period: string): { start: string; end: string } {
  const now = new Date();
  const y = now.getFullYear();
  const m = now.getMonth();

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

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

export default function ReportsPLPage() {
  const [period, setPeriod] = useState("this-year");
  const [data, setData] = useState<ProfitAndLossData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const { start, end } = getPeriodDates(period);
    let cancelled = false;
    fetchProfitAndLoss(start, end)
      .then((d) => { if (!cancelled) setData(d); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [period]);

  if (loading) return <PageSkeleton name="Profit & Loss" />;
  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>
        </div>
        <Button variant="outline" onClick={() => window.print()} className="gap-2 cursor-pointer print:hidden">
          <Download className="w-4 h-4" />
          Print
        </Button>
      </div>

      {/* Summary cards */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Revenue</p>
          <p className="text-xl font-bold text-emerald-600 mt-1">{formatCurrency(data.revenue.total)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Gross Profit</p>
          <p className="text-xl font-bold text-gray-900 mt-1">{formatCurrency(data.grossProfit)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Operating Expenses</p>
          <p className="text-xl font-bold text-red-600 mt-1">{formatCurrency(data.operatingExpenses.total)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Net Profit</p>
          <p className={`text-xl font-bold mt-1 ${data.netProfit >= 0 ? "text-emerald-600" : "text-red-600"}`}>
            {formatCurrency(data.netProfit)}
          </p>
        </div>
      </div>

      {/* Detailed P&L Statement */}
      <Card className="border-0 shadow-sm">
        <CardContent className="p-6 sm:p-8">
          <h2 className="text-lg font-semibold text-gray-900 mb-6">Profit & Loss Statement</h2>

          <div className="space-y-6">
            {/* Revenue */}
            <div>
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Revenue</h3>
              <div className="space-y-2">
                {data.revenue.byMonth.length > 0 ? (
                  data.revenue.byMonth.map((m) => (
                    <div key={m.month} className="flex justify-between text-sm">
                      <span className="text-gray-600">{m.month}</span>
                      <span className="text-gray-900 font-medium">{formatCurrency(m.amount)}</span>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-gray-400">No revenue recorded</p>
                )}
                <div className="flex justify-between text-sm font-semibold border-t border-gray-100 pt-2">
                  <span className="text-gray-900">Total Revenue</span>
                  <span className="text-emerald-600">{formatCurrency(data.revenue.total)}</span>
                </div>
              </div>
            </div>

            {/* Cost of Sales */}
            <div>
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Cost of Sales</h3>
              {data.costOfSales.items.length > 0 ? (
                data.costOfSales.items.map((item) => (
                  <div key={item.name} className="flex justify-between text-sm">
                    <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 cost of sales 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">Gross Profit</span>
                <span className="text-gray-900">{formatCurrency(data.grossProfit)} ({data.grossMargin.toFixed(1)}%)</span>
              </div>
            </div>

            {/* Operating Expenses */}
            <div>
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Operating Expenses</h3>
              {data.operatingExpenses.byCategory.length > 0 ? (
                data.operatingExpenses.byCategory.map((item) => (
                  <div key={item.category} className="flex justify-between text-sm">
                    <span className="text-gray-600">{item.category}</span>
                    <span className="text-gray-900 font-medium">-{formatCurrency(item.amount)}</span>
                  </div>
                ))
              ) : (
                <p className="text-sm text-gray-400">No operating expenses</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 Operating Expenses</span>
                <span className="text-red-600">-{formatCurrency(data.operatingExpenses.total)}</span>
              </div>
            </div>

            {/* Net Profit */}
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex justify-between items-center">
                <span className="text-base font-bold text-gray-900">Net Profit</span>
                <span className={`text-xl font-bold ${data.netProfit >= 0 ? "text-emerald-600" : "text-red-600"}`}>
                  {formatCurrency(data.netProfit)}
                </span>
              </div>
              <div className="flex justify-between items-center mt-1">
                <span className="text-xs text-gray-500">Net margin</span>
                <span className={`text-xs font-semibold ${data.netMargin >= 0 ? "text-emerald-600" : "text-red-600"}`}>
                  {data.netMargin.toFixed(1)}%
                </span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}