import { writeFileSync } from "fs";

writeFileSync("app/transactions/page.tsx", `"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { AppShell } from "../../components/app-shell";
import { apiFetch, getStoredToken } from "../../lib/api";

type ApiResponse<T> = {
  data: T;
  meta: { timestamp: string; version: "v1" };
  error: null | { message: string; code?: string };
};

type TransactionRow = {
  id: string;
  name?: string;
  description?: string;
  amount: string;
  category?: string | null;
  note?: string | null;
  status?: string;
  hidden?: boolean;
  date: string;
  accountId?: string | null;
};

type Account = {
  id: string;
  institutionName: string;
  accountType: string;
  mask?: string | null;
};

type ImportResult = {
  imported: number;
  skipped: number;
  errors?: string[];
};

export default function TransactionsPage() {
  const [rows, setRows] = useState<TransactionRow[]>([]);
  const [status, setStatus] = useState("Loading transactions...");
  const [summary, setSummary] = useState<{
    total: string; count: number; income?: string; expense?: string; net?: string;
  } | null>(null);
  const [datePreset, setDatePreset] = useState("this_month");
  const [showFilters, setShowFilters] = useState(false);
  const [accounts, setAccounts] = useState<Account[]>([]);
  const [autoSync, setAutoSync] = useState(true);
  const [isSyncing, setIsSyncing] = useState(false);
  const [showManual, setShowManual] = useState(false);
  const [showImport, setShowImport] = useState(false);
  const [importStatus, setImportStatus] = useState("");
  const [importLoading, setImportLoading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [manualForm, setManualForm] = useState({
    accountId: "",
    date: new Date().toISOString().slice(0, 10),
    description: "",
    amount: "",
    category: "",
    note: "",
  });
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editForm, setEditForm] = useState({ category: "", note: "", hidden: false });
  const [filters, setFilters] = useState({
    startDate: "", endDate: "", minAmount: "", maxAmount: "",
    category: "", source: "", search: "", includeHidden: false,
  });

  const applyPreset = (preset: string) => {
    setDatePreset(preset);
    if (preset === "custom") return;
    const now = new Date();
    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    let start = new Date(end);
    if (preset === "this_month") {
      start = new Date(end.getFullYear(), end.getMonth(), 1);
    } else if (preset === "last_month") {
      start = new Date(end.getFullYear(), end.getMonth() - 1, 1);
      end.setDate(0);
    } else if (preset === "last_6_months") {
      start = new Date(end.getFullYear(), end.getMonth() - 5, 1);
    } else if (preset === "last_year") {
      start = new Date(end.getFullYear() - 1, 0, 1);
      end.setMonth(11, 31);
    }
    const fmt = (d: Date) => d.toISOString().slice(0, 10);
    setFilters((prev) => ({ ...prev, startDate: fmt(start), endDate: fmt(end) }));
  };

  const buildQuery = () => {
    const params = new URLSearchParams();
    if (filters.startDate) params.set("start_date", filters.startDate);
    if (filters.endDate) params.set("end_date", filters.endDate);
    if (filters.minAmount) params.set("min_amount", filters.minAmount);
    if (filters.maxAmount) params.set("max_amount", filters.maxAmount);
    if (filters.category) params.set("category", filters.category);
    if (filters.source) params.set("source", filters.source);
    if (filters.search) params.set("search", filters.search);
    if (filters.includeHidden) params.set("include_hidden", "true");
    return params.toString() ? \`?\${params.toString()}\` : "";
  };

  const load = async () => {
    const query = buildQuery();
    const res = await apiFetch<TransactionRow[]>(\`/api/transactions\${query}\`);
    if (res.error) {
      setStatus(res.error.message ?? "Unable to load transactions.");
      return;
    }
    setRows(res.data ?? []);
    setStatus((res.data ?? []).length ? "" : "No transactions yet.");
  };

  const loadAccounts = async () => {
    const res = await apiFetch<Account[]>("/api/accounts");
    if (!res.error) setAccounts(res.data ?? []);
  };

  const loadSummary = async () => {
    const query = buildQuery();
    const res = await apiFetch<{ total: string; count: number }>(\`/api/transactions/summary\${query}\`);
    if (!res.error) setSummary(res.data);
  };

  useEffect(() => {
    applyPreset("this_month");
    load();
    loadSummary();
    loadAccounts();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!autoSync) return;
    const id = setInterval(() => { onSync(); }, 5 * 60 * 1000);
    return () => clearInterval(id);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autoSync, filters.startDate, filters.endDate]);

  const onSync = async () => {
    if (isSyncing) return;
    setIsSyncing(true);
    setStatus("Syncing transactions...");
    const res = await apiFetch<unknown>("/api/transactions/sync", {
      method: "POST",
      body: JSON.stringify({ startDate: filters.startDate || undefined, endDate: filters.endDate || undefined }),
    });
    if (res.error) {
      setStatus(res.error.message ?? "Sync failed.");
      setIsSyncing(false);
      return;
    }
    setStatus("Sync complete.");
    await load();
    await loadSummary();
    setIsSyncing(false);
  };

  const onImportCsv = async (file: File) => {
    setImportLoading(true);
    setImportStatus("Uploading...");
    const formData = new FormData();
    formData.append("file", file);
    const token = getStoredToken();
    try {
      const res = await fetch("/api/transactions/import", {
        method: "POST",
        headers: token ? { Authorization: \`Bearer \${token}\` } : {},
        body: formData,
      });
      const payload = (await res.json()) as ApiResponse<ImportResult>;
      if (!res.ok || payload.error) {
        setImportStatus(payload.error?.message ?? "Import failed.");
        setImportLoading(false);
        return;
      }
      const r = payload.data;
      setImportStatus(\`Imported \${r.imported} transaction\${r.imported === 1 ? "" : "s"}, skipped \${r.skipped} duplicate\${r.skipped === 1 ? "" : "s"}.\`);
      await load();
      await loadSummary();
    } catch {
      setImportStatus("Import failed. Please try again.");
    }
    setImportLoading(false);
  };

  const formatAmount = (value: string) => {
    const numeric = Number.parseFloat(value.replace(/[^0-9.-]/g, ""));
    if (Number.isNaN(numeric)) return { display: value, tone: "text-foreground" };
    return {
      display: numeric < 0 ? \`-\$\${Math.abs(numeric).toFixed(2)}\` : \`\$\${numeric.toFixed(2)}\`,
      tone: numeric < 0 ? "text-foreground" : "text-primary font-bold",
    };
  };

  const onManualCreate = async (event: React.FormEvent) => {
    event.preventDefault();
    const amount = Number.parseFloat(manualForm.amount);
    if (Number.isNaN(amount)) { setStatus("Invalid amount."); return; }
    setStatus("Saving manual transaction...");
    const res = await apiFetch<unknown>("/api/transactions/manual", {
      method: "POST",
      body: JSON.stringify({
        accountId: manualForm.accountId || undefined,
        date: manualForm.date,
        description: manualForm.description,
        amount,
        category: manualForm.category || undefined,
        note: manualForm.note || undefined,
      }),
    });
    if (res.error) { setStatus(res.error.message ?? "Unable to save transaction."); return; }
    setManualForm((prev) => ({ ...prev, description: "", amount: "", category: "", note: "" }));
    setShowManual(false);
    setStatus("Manual transaction saved.");
    await load();
    await loadSummary();
  };

  const startEdit = (row: TransactionRow) => {
    setEditingId(row.id);
    setEditForm({ category: row.category ?? "", note: row.note ?? "", hidden: Boolean(row.hidden) });
  };

  const saveEdit = async () => {
    if (!editingId) return;
    setStatus("Saving edits...");
    const res = await apiFetch<unknown>(\`/api/transactions/\${editingId}/derived\`, {
      method: "PATCH",
      body: JSON.stringify({
        userCategory: editForm.category || undefined,
        userNotes: editForm.note || undefined,
        isHidden: editForm.hidden,
      }),
    });
    if (res.error) { setStatus(res.error.message ?? "Unable to save edits."); return; }
    setEditingId(null);
    setStatus("Transaction updated.");
    await load();
    await loadSummary();
  };

  const inputCls = "mt-2 w-full rounded-md border border-border bg-background/50 px-3 py-2 text-sm text-foreground focus:border-primary focus:ring-primary focus:outline-none";
  const labelCls = "text-xs font-semibold text-muted-foreground uppercase tracking-wider";

  return (
    <AppShell title="Transactions" subtitle="View, sync, and categorize your transactions.">
      {/* Action bar */}
      <div className="flex flex-wrap items-center gap-2 text-sm mb-6">
        <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-secondary/50 border border-border text-muted-foreground">
          <span className="h-2 w-2 rounded-full bg-primary" />
          {datePreset === "custom" ? "Custom range" : datePreset.replace(/_/g, " ")}
        </span>

        <button onClick={onSync} className="ml-auto px-3 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-bold hover:bg-primary/90 transition-colors">
          {isSyncing ? "Syncing..." : "Sync"}
        </button>
        <button onClick={() => setAutoSync((prev) => !prev)} className={\`px-3 py-2 rounded-lg border text-sm font-medium transition-colors \${autoSync ? "bg-primary/10 border-primary/30 text-primary" : "bg-background border-border text-foreground hover:bg-secondary"}\`}>
          Auto {autoSync ? "On" : "Off"}
        </button>
        <button onClick={() => setShowManual((prev) => !prev)} className="px-3 py-2 rounded-lg bg-background border border-border text-foreground text-sm font-medium hover:bg-secondary transition-colors">
          {showManual ? "Hide manual" : "Add manual"}
        </button>
        <button onClick={() => { setShowImport((prev) => !prev); setImportStatus(""); }} className="px-3 py-2 rounded-lg bg-background border border-border text-foreground text-sm font-medium hover:bg-secondary transition-colors">
          {showImport ? "Hide import" : "Import CSV"}
        </button>
        <Link href={\`/exports\${buildQuery()}\`} className="px-3 py-2 rounded-lg bg-background border border-border text-foreground text-sm font-medium hover:bg-secondary transition-colors">
          Export
        </Link>
        <button onClick={() => setShowFilters((prev) => !prev)} className="px-3 py-2 rounded-lg bg-background border border-border text-foreground text-sm font-medium hover:bg-secondary transition-colors">
          {showFilters ? "Hide filters" : "Filters"}
        </button>
      </div>

      {/* CSV Import panel */}
      {showImport && (
        <div className="mb-6 glass-panel rounded-xl p-5 shadow-sm">
          <p className="text-sm font-bold text-foreground mb-1">Import CSV</p>
          <p className="text-xs text-muted-foreground mb-4">
            Supports Chase, Bank of America, Wells Fargo, and generic CSV formats. Duplicate transactions are skipped automatically.
          </p>
          <div
            className="border-2 border-dashed border-border rounded-xl p-8 text-center cursor-pointer hover:border-primary/50 transition-colors"
            onClick={() => fileInputRef.current?.click()}
            onDragOver={(e) => e.preventDefault()}
            onDrop={(e) => {
              e.preventDefault();
              const file = e.dataTransfer.files[0];
              if (file && file.name.endsWith(".csv")) onImportCsv(file);
            }}
          >
            <input
              ref={fileInputRef}
              type="file"
              accept=".csv"
              className="hidden"
              onChange={(e) => { const f = e.target.files?.[0]; if (f) onImportCsv(f); }}
            />
            <svg className="mx-auto h-8 w-8 text-muted-foreground mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
            </svg>
            {importLoading ? (
              <p className="text-sm text-muted-foreground">Uploading...</p>
            ) : (
              <p className="text-sm text-muted-foreground">Drop a CSV file here or <span className="text-primary font-medium">click to browse</span></p>
            )}
          </div>
          {importStatus && (
            <p className="mt-3 text-sm text-muted-foreground">{importStatus}</p>
          )}
        </div>
      )}

      {/* Manual transaction form */}
      {showManual && (
        <div className="mb-6 glass-panel rounded-xl p-5 shadow-sm">
          <p className="text-sm font-bold text-foreground mb-4">Add Manual Transaction</p>
          <form onSubmit={onManualCreate} className="grid gap-3 md:grid-cols-3">
            <div>
              <label className={labelCls}>Date</label>
              <input type="date" value={manualForm.date} onChange={(e) => setManualForm((p) => ({ ...p, date: e.target.value }))} className={inputCls} required />
            </div>
            <div>
              <label className={labelCls}>Description</label>
              <input type="text" value={manualForm.description} onChange={(e) => setManualForm((p) => ({ ...p, description: e.target.value }))} className={inputCls} required />
            </div>
            <div>
              <label className={labelCls}>Amount (negative = expense)</label>
              <input type="number" step="0.01" value={manualForm.amount} onChange={(e) => setManualForm((p) => ({ ...p, amount: e.target.value }))} className={inputCls} required placeholder="-42.50" />
            </div>
            <div>
              <label className={labelCls}>Category</label>
              <input type="text" value={manualForm.category} onChange={(e) => setManualForm((p) => ({ ...p, category: e.target.value }))} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Account</label>
              <select value={manualForm.accountId} onChange={(e) => setManualForm((p) => ({ ...p, accountId: e.target.value }))} className={inputCls}>
                <option value="">— No account —</option>
                {accounts.map((a) => (
                  <option key={a.id} value={a.id}>{a.institutionName} {a.mask ? \`••\${a.mask}\` : ""}</option>
                ))}
              </select>
            </div>
            <div>
              <label className={labelCls}>Note</label>
              <input type="text" value={manualForm.note} onChange={(e) => setManualForm((p) => ({ ...p, note: e.target.value }))} className={inputCls} />
            </div>
            <div className="md:col-span-3 flex justify-end gap-2">
              <button type="button" onClick={() => setShowManual(false)} className="px-4 py-2 rounded-lg border border-border text-sm text-foreground hover:bg-secondary">Cancel</button>
              <button type="submit" className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-bold hover:bg-primary/90">Save</button>
            </div>
          </form>
        </div>
      )}

      {/* Filters */}
      {showFilters && (
        <div className="mb-6 glass-panel rounded-xl p-5 shadow-sm">
          <div className="grid gap-4 md:grid-cols-3">
            <div>
              <label className={labelCls}>Date range</label>
              <select value={datePreset} onChange={(e) => applyPreset(e.target.value)} className={inputCls}>
                <option value="this_month">This month</option>
                <option value="last_month">Last month</option>
                <option value="last_6_months">Last 6 months</option>
                <option value="last_year">Last year</option>
                <option value="custom">Custom</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Start date</label>
              <input type="date" value={filters.startDate} onChange={(e) => setFilters((p) => ({ ...p, startDate: e.target.value }))} className={inputCls} disabled={datePreset !== "custom"} />
            </div>
            <div>
              <label className={labelCls}>End date</label>
              <input type="date" value={filters.endDate} onChange={(e) => setFilters((p) => ({ ...p, endDate: e.target.value }))} className={inputCls} disabled={datePreset !== "custom"} />
            </div>
            <div>
              <label className={labelCls}>Search</label>
              <input type="text" value={filters.search} onChange={(e) => setFilters((p) => ({ ...p, search: e.target.value }))} className={inputCls} placeholder="Description..." />
            </div>
            <div>
              <label className={labelCls}>Category</label>
              <input type="text" value={filters.category} onChange={(e) => setFilters((p) => ({ ...p, category: e.target.value }))} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Min amount</label>
              <input type="number" step="0.01" value={filters.minAmount} onChange={(e) => setFilters((p) => ({ ...p, minAmount: e.target.value }))} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Max amount</label>
              <input type="number" step="0.01" value={filters.maxAmount} onChange={(e) => setFilters((p) => ({ ...p, maxAmount: e.target.value }))} className={inputCls} />
            </div>
            <div className="flex items-end gap-2">
              <label className="flex items-center gap-2 text-sm text-foreground cursor-pointer">
                <input type="checkbox" checked={filters.includeHidden} onChange={(e) => setFilters((p) => ({ ...p, includeHidden: e.target.checked }))} className="rounded border-border text-primary focus:ring-primary" />
                Include hidden
              </label>
            </div>
            <div className="flex items-end">
              <button onClick={() => { load(); loadSummary(); }} className="w-full px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-bold hover:bg-primary/90">Apply</button>
            </div>
          </div>
        </div>
      )}

      {/* Summary cards */}
      {summary && (
        <div className="mb-6 grid gap-3 md:grid-cols-3">
          {[
            { label: "Total", value: \`\$\${Math.abs(Number.parseFloat(summary.total ?? "0")).toFixed(2)}\`, sub: \`\${summary.count} transactions\` },
            { label: "Income", value: \`+\$\${Math.abs(Number.parseFloat(summary.income ?? "0")).toFixed(2)}\`, sub: "Credits" },
            { label: "Expenses", value: \`-\$\${Math.abs(Number.parseFloat(summary.expense ?? "0")).toFixed(2)}\`, sub: "Debits" },
          ].map((c) => (
            <div key={c.label} className="glass-panel rounded-xl p-4 shadow-sm">
              <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground font-semibold">{c.label}</p>
              <p className="mt-2 text-xl font-bold text-foreground">{c.value}</p>
              <p className="text-xs text-muted-foreground">{c.sub}</p>
            </div>
          ))}
        </div>
      )}

      {/* Transaction table */}
      <div className="glass-panel rounded-2xl shadow-sm overflow-hidden">
        {status && (
          <div className="px-6 py-3 bg-secondary/30 border-b border-border text-sm text-muted-foreground">{status}</div>
        )}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs text-muted-foreground">
            <thead className="text-[0.65rem] uppercase tracking-[0.18em] font-semibold bg-secondary/20">
              <tr>
                <th className="px-4 py-3">Date</th>
                <th className="px-4 py-3">Description</th>
                <th className="px-4 py-3">Category</th>
                <th className="px-4 py-3 text-right">Amount</th>
                <th className="px-4 py-3 text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) =>
                editingId === row.id ? (
                  <tr key={row.id} className="border-b border-border bg-secondary/10">
                    <td className="px-4 py-3" colSpan={2}>
                      <div className="flex gap-2">
                        <input
                          type="text"
                          value={editForm.category}
                          onChange={(e) => setEditForm((p) => ({ ...p, category: e.target.value }))}
                          placeholder="Category"
                          className="w-28 rounded border border-border bg-background px-2 py-1 text-xs text-foreground focus:border-primary focus:outline-none"
                        />
                        <input
                          type="text"
                          value={editForm.note}
                          onChange={(e) => setEditForm((p) => ({ ...p, note: e.target.value }))}
                          placeholder="Note"
                          className="flex-1 rounded border border-border bg-background px-2 py-1 text-xs text-foreground focus:border-primary focus:outline-none"
                        />
                        <label className="flex items-center gap-1 text-xs text-foreground">
                          <input type="checkbox" checked={editForm.hidden} onChange={(e) => setEditForm((p) => ({ ...p, hidden: e.target.checked }))} />
                          Hide
                        </label>
                      </div>
                    </td>
                    <td className="px-4 py-3" colSpan={3}>
                      <div className="flex gap-2 justify-end">
                        <button onClick={saveEdit} className="rounded bg-primary px-3 py-1 text-[11px] font-bold text-primary-foreground hover:bg-primary/90">Save</button>
                        <button onClick={() => setEditingId(null)} className="rounded border border-border px-3 py-1 text-[11px] text-foreground hover:bg-secondary">Cancel</button>
                      </div>
                    </td>
                  </tr>
                ) : (
                  <tr key={row.id} className={\`border-b border-border hover:bg-secondary/20 transition-colors \${row.hidden ? "opacity-50" : ""}\`}>
                    <td className="px-4 py-3 font-medium whitespace-nowrap">
                      {new Date(row.date).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })}
                    </td>
                    <td className="px-4 py-3 text-foreground font-medium max-w-[200px] truncate">
                      {row.description ?? row.name ?? "—"}
                    </td>
                    <td className="px-4 py-3">
                      {row.category ? (
                        <span className="inline-flex rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-foreground">{row.category}</span>
                      ) : (
                        <span className="text-muted-foreground">—</span>
                      )}
                    </td>
                    <td className={\`px-4 py-3 text-right font-bold \${formatAmount(row.amount).tone}\`}>
                      {formatAmount(row.amount).display}
                    </td>
                    <td className="px-4 py-3 text-right">
                      <button onClick={() => startEdit(row)} className="text-xs text-primary hover:underline">Edit</button>
                    </td>
                  </tr>
                )
              )}
              {!rows.length && !status && (
                <tr>
                  <td colSpan={5} className="px-4 py-12 text-center text-sm text-muted-foreground">
                    No transactions found. Try adjusting your filters or sync your accounts.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </AppShell>
  );
}
`);

console.log("✅ transactions/page.tsx written with CSV import UI and apiFetch");