"use client";

import { useState } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";
import { LedgerTransactionsTable } from "./LedgerTransactionsTable";
import type { LedgerResult, AssetTypeOption, WorkflowDocument } from "@/types/ocr";
import { getChangeClass } from "@/types/ocr";

interface WorkflowLedgerResultsProps {
  ledger: LedgerResult;
  documents?: WorkflowDocument[];
  selectedTransactions: Set<string>;
  assetTypeOverrides: Record<string, AssetTypeOption>;
  onToggleTransaction: (id: string) => void;
  onSetAssetType: (id: string, value: AssetTypeOption) => void;
  onToggleAllInPeriod: (periodIndex: number, selectAll: boolean) => void;
}

export function WorkflowLedgerResults({
  ledger,
  documents = [],
  selectedTransactions,
  assetTypeOverrides,
  onToggleTransaction,
  onSetAssetType,
  onToggleAllInPeriod,
}: WorkflowLedgerResultsProps) {
  const [expandedPeriods, setExpandedPeriods] = useState<Set<number>>(
    new Set(ledger.periods.map((_, i) => i))
  );

  const togglePeriod = (index: number) => {
    setExpandedPeriods((prev) => {
      const next = new Set(prev);
      if (next.has(index)) {
        next.delete(index);
      } else {
        next.add(index);
      }
      return next;
    });
  };

  const getDocById = (docId: unknown) =>
    documents.find((doc) => String(doc.document_id) === String(docId));

  const formatPeriodDate = (date?: string | null) => {
    if (!date) return "";
    const parsed = new Date(date);
    if (Number.isNaN(parsed.getTime())) return date;
    return parsed.toLocaleDateString("en-GB");
  };

  const getPeriodHeader = (
    period: LedgerResult["periods"][number],
    periodIndex: number
  ) => {
    const fromDoc = getDocById(period.from_document_id);
    const toDoc = getDocById(period.to_document_id);

    const fromDate = formatPeriodDate(period.from_date);
    const toDate = formatPeriodDate(period.to_date);

    if (fromDoc || toDoc) {
      const fromPart = fromDoc
        ? `${fromDoc.filename}${fromDate ? ` (${fromDate})` : ""}`
        : `Database${fromDate ? ` (${fromDate})` : ""}`;
      const toPart = toDoc
        ? `${toDoc.filename}${toDate ? ` (${toDate})` : ""}`
        : `${period.to_source === "database" ? "Database" : "OCR"}${toDate ? ` (${toDate})` : ""}`;
      return `${fromPart} -> ${toPart}`;
    }

    return period.period_label || `Period ${periodIndex + 1}`;
  };

  const summary = ledger.cumulative_summary;

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-semibold text-gray-700">Ledger Results</h3>

      {/* Cumulative Summary */}
      {summary && (
        <div className="space-y-3">
          {summary.missing_months_warning && (
            <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800">
              {summary.missing_months_warning}
            </div>
          )}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div className="rounded-xl border border-gray-200/80 bg-white pl-0 pr-4 py-3 flex">
              <div className="w-1 rounded-r-full bg-[#428B4D] mr-3 self-stretch shrink-0" />
              <div>
                <div className="text-[10px] font-semibold text-[#428B4D] uppercase tracking-wider">
                  Periods
                </div>
                <div className="text-lg font-bold text-gray-800 mt-0.5 tabular-nums">
                  {summary.total_periods || 0}
                </div>
              </div>
            </div>
            <div className="rounded-xl border border-gray-200/80 bg-white pl-0 pr-4 py-3 flex">
              <div className="w-1 rounded-r-full bg-[#428B4D] mr-3 self-stretch shrink-0" />
              <div>
                <div className="text-[10px] font-semibold text-[#428B4D] uppercase tracking-wider">
                  Total Transactions
                </div>
                <div className="text-lg font-bold text-gray-800 mt-0.5 tabular-nums">
                  {summary.total_transactions || 0}
                </div>
              </div>
            </div>
            <div className="rounded-xl border border-gray-200/80 bg-white pl-0 pr-4 py-3 flex">
              <div className="w-1 rounded-r-full bg-[#428B4D] mr-3 self-stretch shrink-0" />
              <div>
                <div className="text-[10px] font-semibold text-[#428B4D] uppercase tracking-wider">
                  New Purchases
                </div>
                <div className="text-lg font-bold text-gray-800 mt-0.5 tabular-nums">
                  {summary.new_purchases || 0}
                </div>
              </div>
            </div>
            <div className="rounded-xl border border-gray-200/80 bg-white pl-0 pr-4 py-3 flex">
              <div className="w-1 rounded-r-full bg-[#428B4D] mr-3 self-stretch shrink-0" />
              <div>
                <div className="text-[10px] font-semibold text-[#428B4D] uppercase tracking-wider">
                  Full Sales
                </div>
                <div className="text-lg font-bold text-gray-800 mt-0.5 tabular-nums">
                  {summary.full_sales || 0}
                </div>
              </div>
            </div>
          </div>

          {summary.net_value_change && (
            <div className="rounded-xl border border-gray-200/80 bg-white pl-0 pr-4 py-3 flex">
              <div className="w-1 rounded-r-full bg-[#428B4D] mr-3 self-stretch shrink-0" />
              <div>
                <div className="text-[10px] font-semibold text-[#428B4D] uppercase tracking-wider">
                  Net Value Change
                </div>
                <div className={`text-lg font-bold mt-0.5 tabular-nums ${getChangeClass(summary.net_value_change)}`}>
                  {summary.net_value_change}
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Periods */}
      <div className="space-y-3">
        {ledger.periods.map((period, pIdx) => (
          <div key={pIdx} className="border rounded-lg overflow-hidden">
            {/* Period header */}
            <button
              onClick={() => togglePeriod(pIdx)}
              className="w-full flex items-center justify-between px-4 py-2.5 bg-gray-50 hover:bg-gray-100 transition-colors"
            >
              <div className="flex items-center gap-2">
                {expandedPeriods.has(pIdx) ? (
                  <ChevronDown className="h-4 w-4 text-gray-500" />
                ) : (
                  <ChevronRight className="h-4 w-4 text-gray-500" />
                )}
                <span className="text-xs font-semibold text-gray-700">
                  {getPeriodHeader(period, pIdx)}
                </span>
              </div>
              {period.summary && (
                <div className="flex items-center gap-4 text-[10px] text-gray-500">
                  <span>{period.summary.total_transactions || 0} transactions</span>
                  {period.summary.new_purchases != null && (
                    <span className="text-green-600">
                      +{period.summary.new_purchases} new
                    </span>
                  )}
                  {period.summary.full_sales != null && (
                    <span className="text-red-600">
                      -{period.summary.full_sales} sold
                    </span>
                  )}
                  {period.summary.net_value_change && (
                    <span className={getChangeClass(period.summary.net_value_change)}>
                      Net: {period.summary.net_value_change}
                    </span>
                  )}
                </div>
              )}
            </button>

            {/* Period content */}
            {expandedPeriods.has(pIdx) && (
              <LedgerTransactionsTable
                transactions={period.transactions}
                periodIndex={pIdx}
                selectedTransactions={selectedTransactions}
                assetTypeOverrides={assetTypeOverrides}
                onToggleTransaction={onToggleTransaction}
                onSetAssetType={onSetAssetType}
                onToggleAll={onToggleAllInPeriod}
              />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}