"use client";

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

interface WorkflowLedgerResultsProps {
  ledger: LedgerResult;
  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,
  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 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">
          <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">
                  {period.period_label || `Period ${pIdx + 1}`}
                </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>
  );
}