"use client";

import { useState, useEffect, useRef } from "react";
import { Upload, FileText, CheckCircle, XCircle, Download, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  importBankTransactions,
  fetchBankTransactions,
  reconcileTransaction,
  type BankTransaction,
} from "@/lib/supabase/bank-feeds-actions";
import PageSkeleton from "./PageSkeleton";

export default function BankFeedsPage() {
  const [transactions, setTransactions] = useState<BankTransaction[]>([]);
  const [loading, setLoading] = useState(true);
  const [importing, setImporting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMsg, setSuccessMsg] = useState<string | null>(null);
  const [accountName, setAccountName] = useState("Primary Account");
  const [showImport, setShowImport] = useState(false);
  const [csvContent, setCsvContent] = useState("");
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    let cancelled = false;
    fetchBankTransactions()
      .then((t) => { if (!cancelled) setTransactions(t); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setImporting(true);
    setError(null);
    setSuccessMsg(null);

    const text = await file.text();
    try {
      const result = await importBankTransactions(text, accountName);
      if (!result.success) { setError(result.error || "Import failed"); return; }
      setSuccessMsg(`Imported ${result.count} transactions`);
      const updated = await fetchBankTransactions();
      setTransactions(updated);
      setShowImport(false);
      setCsvContent("");
    } catch (err: any) {
      setError(err.message || "An unexpected error occurred");
    } finally {
      setImporting(false);
    }
  };

  const handleReconcile = async (id: string) => {
    const result = await reconcileTransaction(id);
    if (result.success) setTransactions((prev) => prev.map((t) => t.id === id ? { ...t, reconciled: true } : t));
  };

  if (loading) return <PageSkeleton name="Bank Feeds" />;

  const totalCredits = transactions.filter((t) => t.type === "credit").reduce((s, t) => s + Math.abs(t.amount), 0);
  const totalDebits = transactions.filter((t) => t.type === "debit").reduce((s, t) => s + Math.abs(t.amount), 0);
  const unreconciled = transactions.filter((t) => !t.reconciled).length;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Bank Feeds</h1>
          <p className="text-gray-500 mt-1">Import and reconcile bank transactions</p>
        </div>
        <Button onClick={() => setShowImport(!showImport)} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
          <Upload className="w-4 h-4" />
          {showImport ? "Cancel" : "Import CSV"}
        </Button>
      </div>

      {error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>}
      {successMsg && <div className="bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-lg text-sm">{successMsg}</div>}

      {/* Summary */}
      <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">Total Credits</p>
          <p className="text-xl font-bold text-emerald-600 mt-1">${totalCredits.toFixed(2)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Total Debits</p>
          <p className="text-xl font-bold text-red-600 mt-1">${totalDebits.toFixed(2)}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Net</p>
          <p className={`text-xl font-bold mt-1 ${(totalCredits - totalDebits) >= 0 ? "text-emerald-600" : "text-red-600"}`}>
            ${(totalCredits - totalDebits).toFixed(2)}
          </p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-500">Unreconciled</p>
          <p className="text-xl font-bold text-amber-600 mt-1">{unreconciled}</p>
        </div>
      </div>

      {/* Import form */}
      {showImport && (
        <Card className="border-0 shadow-sm">
          <CardContent className="p-6 space-y-4">
            <h2 className="text-lg font-semibold text-gray-900">Import Bank Transactions</h2>
            <div>
              <label className="text-sm font-medium text-gray-700">Account Name</label>
              <input value={accountName} onChange={(e) => setAccountName(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]" />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">CSV File</label>
              <div className="mt-1 border-2 border-dashed border-gray-200 rounded-lg p-6 text-center cursor-pointer hover:border-gray-300 transition-colors"
                onClick={() => fileInputRef.current?.click()}>
                <Upload className="w-8 h-8 text-gray-300 mx-auto mb-2" />
                <p className="text-sm text-gray-500">Click to upload CSV</p>
                <p className="text-xs text-gray-400 mt-1">Columns: date, description, amount</p>
                <input ref={fileInputRef} type="file" accept=".csv,.tsv,.txt" onChange={handleFileUpload} className="hidden" />
              </div>
            </div>
            <div className="bg-gray-50 rounded-lg p-3 text-xs text-gray-500">
              <p className="font-medium mb-1">Expected CSV format:</p>
              <code className="text-gray-400">date,description,amount{"\n"}2025-04-01,Client payment,1500.00{"\n"}2025-04-02,Office supplies,-45.50</code>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Transactions list */}
      {transactions.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
          <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
            <FileText className="w-8 h-8 text-gray-300" />
          </div>
          <p className="text-sm text-gray-500 font-medium">No transactions imported</p>
          <p className="text-xs text-gray-400 mt-1 mb-4">Upload a CSV bank statement to get started</p>
          <Button onClick={() => setShowImport(true)} size="sm" className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
            <Upload className="w-3.5 h-3.5" />
            Import CSV
          </Button>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-100">
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Date</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Description</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden sm:table-cell">Account</th>
                <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Amount</th>
                <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden md:table-cell">Status</th>
                <th className="w-20"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {transactions.map((t) => (
                <tr key={t.id} className="hover:bg-gray-50/50 transition-colors">
                  <td className="py-3 px-4 text-sm text-gray-500">
                    {new Date(t.date + "T00:00:00").toLocaleDateString("en-AU", { day: "numeric", month: "short" })}
                  </td>
                  <td className="py-3 px-4">
                    <p className="text-sm font-medium text-gray-900 truncate max-w-[200px]">{t.description}</p>
                  </td>
                  <td className="py-3 px-4 text-sm text-gray-500 hidden sm:table-cell">{t.account_name}</td>
                  <td className={`py-3 px-4 text-right text-sm font-semibold ${t.type === "credit" ? "text-emerald-600" : "text-red-600"}`}>
                    {t.type === "credit" ? "+" : "-"}${Math.abs(t.amount).toFixed(2)}
                  </td>
                  <td className="py-3 px-4 text-center hidden md:table-cell">
                    {t.reconciled ? (
                      <Badge variant="outline" className="text-xs border bg-emerald-100 text-emerald-700 border-emerald-200">
                        <CheckCircle className="w-3 h-3 mr-1" /> Reconciled
                      </Badge>
                    ) : (
                      <Badge variant="outline" className="text-xs border bg-amber-100 text-amber-700 border-amber-200">
                        Unreconciled
                      </Badge>
                    )}
                  </td>
                  <td className="py-3 px-4">
                    {!t.reconciled && (
                      <button onClick={() => handleReconcile(t.id)}
                        className="text-xs text-emerald-600 hover:underline font-medium cursor-pointer">
                        Reconcile
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}