"use client";

import { useState } from "react";
import type { ComparisonResult } from "@/types/ocr";
import { TransactionsTable } from "./TransactionsTable";
import { Plus, Minus, Edit3, ArrowRightLeft } from "lucide-react";

interface ComparisonResultsDisplayProps {
  result: ComparisonResult;
}

type TabKey = "all" | "additions" | "removals" | "changes";

export function ComparisonResultsDisplay({
  result,
}: ComparisonResultsDisplayProps) {
  const [activeTab, setActiveTab] = useState<TabKey>("all");
  const { comparison, document: doc } = result;
  const summary = comparison.summary;

  const tabs: { key: TabKey; label: string; count: number }[] = [
    { key: "all", label: "All Transactions", count: summary.total_transactions },
    { key: "additions", label: "Additions", count: summary.additions },
    { key: "removals", label: "Removals", count: summary.removals },
    { key: "changes", label: "Changes", count: summary.changes },
  ];

  const transactionsForTab = () => {
    switch (activeTab) {
      case "additions":
        return comparison.additions;
      case "removals":
        return comparison.removals;
      case "changes":
        return comparison.changes;
      default:
        return comparison.transactions;
    }
  };

  return (
    <div className="border rounded-lg overflow-hidden">
      {/* Document header */}
      <div className="px-4 py-3 bg-gray-50 border-b">
        <span className="text-sm font-medium text-gray-800">
          {doc.filename}
        </span>
      </div>

      {/* Summary boxes */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4">
        <div className="bg-green-50 border border-green-200 rounded-lg p-2.5 text-center">
          <Plus className="h-4 w-4 mx-auto text-green-600 mb-1" />
          <div className="text-lg font-bold text-green-800">
            {summary.additions}
          </div>
          <div className="text-[10px] text-green-600 font-medium">
            Additions
          </div>
        </div>
        <div className="bg-red-50 border border-red-200 rounded-lg p-2.5 text-center">
          <Minus className="h-4 w-4 mx-auto text-red-600 mb-1" />
          <div className="text-lg font-bold text-red-800">
            {summary.removals}
          </div>
          <div className="text-[10px] text-red-600 font-medium">
            Removals
          </div>
        </div>
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-2.5 text-center">
          <Edit3 className="h-4 w-4 mx-auto text-amber-600 mb-1" />
          <div className="text-lg font-bold text-amber-800">
            {summary.changes}
          </div>
          <div className="text-[10px] text-amber-600 font-medium">
            Changes
          </div>
        </div>
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-2.5 text-center">
          <ArrowRightLeft className="h-4 w-4 mx-auto text-blue-600 mb-1" />
          <div className="text-lg font-bold text-blue-800">
            {summary.total_transactions}
          </div>
          <div className="text-[10px] text-blue-600 font-medium">
            Transactions
          </div>
        </div>
      </div>

      {/* Tabs */}
      {comparison.transactions.length > 0 && (
        <>
          <div className="border-t border-b flex">
            {tabs.map((tab) => {
              if (tab.key !== "all" && tab.count === 0) return null;
              return (
                <button
                  key={tab.key}
                  onClick={() => setActiveTab(tab.key)}
                  className={`px-4 py-2 text-xs font-medium transition-colors ${
                    activeTab === tab.key
                      ? "text-[#428B4D] border-b-2 border-[#428B4D] bg-white"
                      : "text-gray-500 hover:text-gray-700"
                  }`}
                >
                  {tab.label} ({tab.count})
                </button>
              );
            })}
          </div>

          <TransactionsTable transactions={transactionsForTab()} />
        </>
      )}
    </div>
  );
}