"use client";

import { useEffect, useState } from "react";
import { AppShell } from "../../components/app-shell";
import { apiFetch } from "@/lib/api";

type ExportData = { status: string; csv?: string; rowCount?: number };
type SignedExportData = { status: string; downloadUrl?: string; expiresAt?: string; expiresInSeconds?: number; singleUse?: boolean };
type SheetsData = { spreadsheetUrl?: string; url?: string; spreadsheetId?: string; rowCount?: number };
type GoogleStatus = { connected: boolean; googleEmail?: string; connectedAt?: string };

export default function ExportsPage() {
  const [csvStatus, setCsvStatus] = useState("");
  const [jsonStatus, setJsonStatus] = useState("");
  const [xlsxStatus, setXlsxStatus] = useState("");
  const [pdfStatus, setPdfStatus] = useState("");
  const [sheetsStatus, setSheetsStatus] = useState("");
  const [sheetsUrl, setSheetsUrl] = useState<string | null>(null);
  const [sheetsLoading, setSheetsLoading] = useState(false);
  const [datePreset, setDatePreset] = useState("custom");
  const [googleStatus, setGoogleStatus] = useState<GoogleStatus | null>(null);
  const [disconnecting, setDisconnecting] = useState(false);
  const [filters, setFilters] = useState({
    startDate: "",
    endDate: "",
    minAmount: "",
    maxAmount: "",
    category: "",
    source: "",
    includeHidden: false,
  });

  useEffect(() => {
    apiFetch<GoogleStatus>("/api/google/status").then((res) => {
      if (!res.error) setGoogleStatus(res.data ?? { connected: 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 buildParams = () => {
    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.includeHidden) params.set("include_hidden", "true");
    return params;
  };

  const downloadSignedFile = (url: string) => {
    const a = document.createElement("a");
    a.href = url;
    a.rel = "noopener";
    a.click();
  };

  const requestSignedDownload = async (format: "csv" | "json" | "xlsx" | "pdf") => {
    const params = buildParams();
    const query = params.toString() ? `?${params.toString()}` : "";
    return apiFetch<SignedExportData>(`/api/exports/${format}${query}`);
  };

  const onExportCsv = async () => {
    setCsvStatus("Generating export...");
    const res = await requestSignedDownload("csv");
    if (res.error) { setCsvStatus(res.error.message ?? "Export failed."); return; }
    if (res.data?.downloadUrl) {
      downloadSignedFile(res.data.downloadUrl);
      setCsvStatus(`Signed one-time link created. Download expires in ${res.data.expiresInSeconds ?? 120} seconds.`);
    } else {
      setCsvStatus("Export link created.");
    }
  };

  const onExportJson = async () => {
    setJsonStatus("Generating JSON export...");
    const res = await requestSignedDownload("json");
    if (res.error) { setJsonStatus(res.error.message ?? "JSON export failed."); return; }
    if (res.data?.downloadUrl) {
      downloadSignedFile(res.data.downloadUrl);
      setJsonStatus(`Signed one-time link created. Download expires in ${res.data.expiresInSeconds ?? 120} seconds.`);
    } else {
      setJsonStatus("JSON export link created.");
    }
  };

  const onExportXlsx = async () => {
    setXlsxStatus("Generating XLSX export...");
    const res = await requestSignedDownload("xlsx");
    if (res.error) { setXlsxStatus(res.error.message ?? "XLSX export failed."); return; }
    if (res.data?.downloadUrl) {
      downloadSignedFile(res.data.downloadUrl);
      setXlsxStatus(`Signed one-time link created. Download expires in ${res.data.expiresInSeconds ?? 120} seconds.`);
    } else {
      setXlsxStatus("XLSX export link created.");
    }
  };

  const onExportPdf = async () => {
    setPdfStatus("Generating PDF export...");
    const res = await requestSignedDownload("pdf");
    if (res.error) { setPdfStatus(res.error.message ?? "PDF export failed."); return; }
    if (res.data?.downloadUrl) {
      downloadSignedFile(res.data.downloadUrl);
      setPdfStatus(`Signed one-time link created. Download expires in ${res.data.expiresInSeconds ?? 120} seconds.`);
    } else {
      setPdfStatus("PDF export link created.");
    }
  };

  const onConnectGoogle = async () => {
    const res = await apiFetch<{ authUrl: string }>("/api/google/connect");
    if (res.error) {
      setSheetsStatus(res.error.message ?? "Failed to get Google auth URL.");
      return;
    }
    if (res.data?.authUrl) {
      window.location.href = res.data.authUrl;
    }
  };

  const onDisconnectGoogle = async () => {
    setDisconnecting(true);
    const res = await apiFetch("/api/google/disconnect", { method: "DELETE" });
    setDisconnecting(false);
    if (!res.error) {
      setGoogleStatus({ connected: false });
      setSheetsStatus("Google account disconnected.");
      setSheetsUrl(null);
    }
  };

  const onExportSheets = async () => {
    setSheetsLoading(true);
    setSheetsStatus("Creating Google Sheet...");
    setSheetsUrl(null);
    const body: Record<string, unknown> = {};
    if (filters.startDate) body.startDate = filters.startDate;
    if (filters.endDate) body.endDate = filters.endDate;
    if (filters.minAmount) body.minAmount = filters.minAmount;
    if (filters.maxAmount) body.maxAmount = filters.maxAmount;
    if (filters.category) body.category = filters.category;
    if (filters.includeHidden) body.includeHidden = true;
    const res = await apiFetch<SheetsData>("/api/exports/sheets", {
      method: "POST",
      body: JSON.stringify(body),
    });
    setSheetsLoading(false);
    if (res.error) {
      setSheetsStatus(res.error.message ?? "Google Sheets export failed.");
      return;
    }
    const url = res.data?.url ?? res.data?.spreadsheetUrl ?? null;
    if (url) {
      setSheetsUrl(url);
      setSheetsStatus(`Sheet created with ${res.data?.rowCount ?? 0} rows.`);
    } else {
      setSheetsStatus("Sheet created.");
    }
  };

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

  return (
    <AppShell title="Exports" subtitle="Generate CSV, JSON, XLSX, PDF, or Google Sheets exports.">
      <div className="glass-panel p-8 rounded-2xl shadow-sm space-y-6">
        {/* Filters */}
        <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="custom">Custom</option>
              <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>
            </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}>Category contains</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 pb-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 transactions
            </label>
          </div>
        </div>

        <div className="mt-6" />

        {/* Export cards */}
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
          {/* CSV */}
          <div className="rounded-xl border border-border bg-secondary/10 p-6">
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                <svg className="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-bold text-foreground">Download CSV</p>
                <p className="mt-1 text-xs text-muted-foreground">Raw and derived transaction fields in comma-separated format.</p>
              </div>
            </div>
            <button
              onClick={onExportCsv}
              className="mt-4 w-full rounded-lg bg-primary py-2.5 px-4 text-sm font-bold text-primary-foreground hover:bg-primary/90 transition-all"
            >
              Export CSV
            </button>
            {csvStatus && <p className="mt-2 text-xs text-muted-foreground">{csvStatus}</p>}
          </div>

          {/* JSON */}
          <div className="rounded-xl border border-border bg-secondary/10 p-6">
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-amber-500/10 flex items-center justify-center flex-shrink-0">
                <svg className="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l-3 3 3 3m8-6l3 3-3 3M13 5l-2 14" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-bold text-foreground">Download JSON</p>
                <p className="mt-1 text-xs text-muted-foreground">Structured transaction export for custom tools.</p>
              </div>
            </div>
            <button
              onClick={onExportJson}
              className="mt-4 w-full rounded-lg border border-amber-500/30 bg-amber-500/10 py-2.5 px-4 text-sm font-bold text-amber-500 hover:bg-amber-500/20 transition-all"
            >
              Export JSON
            </button>
            {jsonStatus && <p className="mt-2 text-xs text-muted-foreground">{jsonStatus}</p>}
          </div>

          {/* XLSX */}
          <div className="rounded-xl border border-border bg-secondary/10 p-6">
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0">
                <svg className="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-6m3 6V7m3 10v-4m4 8H5a2 2 0 01-2-2V5a2 2 0 012-2h8l6 6v10a2 2 0 01-2 2z" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-bold text-foreground">Download XLSX</p>
                <p className="mt-1 text-xs text-muted-foreground">Excel workbook with filtered transaction data.</p>
              </div>
            </div>
            <button
              onClick={onExportXlsx}
              className="mt-4 w-full rounded-lg border border-blue-500/30 bg-blue-500/10 py-2.5 px-4 text-sm font-bold text-blue-500 hover:bg-blue-500/20 transition-all"
            >
              Export XLSX
            </button>
            {xlsxStatus && <p className="mt-2 text-xs text-muted-foreground">{xlsxStatus}</p>}
          </div>

          {/* PDF */}
          <div className="rounded-xl border border-border bg-secondary/10 p-6">
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-red-500/10 flex items-center justify-center flex-shrink-0">
                <svg className="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9l-6-6H7a2 2 0 00-2 2v14a2 2 0 002 2zm2-8h6m-6 4h6m-6-8h2" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-bold text-foreground">Download PDF</p>
                <p className="mt-1 text-xs text-muted-foreground">Printable ledger snapshot for audit packets.</p>
              </div>
            </div>
            <button
              onClick={onExportPdf}
              className="mt-4 w-full rounded-lg border border-red-500/30 bg-red-500/10 py-2.5 px-4 text-sm font-bold text-red-500 hover:bg-red-500/20 transition-all"
            >
              Export PDF
            </button>
            {pdfStatus && <p className="mt-2 text-xs text-muted-foreground">{pdfStatus}</p>}
          </div>

          {/* Google Sheets */}
          <div className="rounded-xl border border-border bg-secondary/10 p-6">
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-green-500/10 flex items-center justify-center flex-shrink-0">
                <svg className="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-bold text-foreground">Export to Google Sheets</p>
                {googleStatus?.connected ? (
                  <div className="flex items-center gap-1 mt-1">
                    <span className="h-1.5 w-1.5 rounded-full bg-green-500 flex-shrink-0" />
                    <p className="text-xs text-green-600 dark:text-green-400 truncate">{googleStatus.googleEmail}</p>
                  </div>
                ) : (
                  <p className="mt-1 text-xs text-muted-foreground">Connect your Google account to export directly to Sheets.</p>
                )}
              </div>
            </div>

            {googleStatus?.connected ? (
              <>
                <button
                  onClick={onExportSheets}
                  disabled={sheetsLoading}
                  className="mt-4 w-full rounded-lg border border-green-500/30 bg-green-500/10 py-2.5 px-4 text-sm font-bold text-green-500 hover:bg-green-500/20 transition-all disabled:opacity-50"
                >
                  {sheetsLoading ? "Creating sheet..." : "Export to Google Sheets"}
                </button>
                <button
                  onClick={onDisconnectGoogle}
                  disabled={disconnecting}
                  className="mt-2 w-full rounded-lg py-1.5 px-4 text-xs text-muted-foreground hover:text-foreground transition-all"
                >
                  {disconnecting ? "Disconnecting..." : "Disconnect Google account"}
                </button>
              </>
            ) : (
              <button
                onClick={onConnectGoogle}
                className="mt-4 w-full rounded-lg border border-green-500/30 bg-green-500/10 py-2.5 px-4 text-sm font-bold text-green-500 hover:bg-green-500/20 transition-all"
              >
                Connect Google Account
              </button>
            )}

            {sheetsStatus && <p className="mt-2 text-xs text-muted-foreground">{sheetsStatus}</p>}
            {sheetsUrl && (
              <a href={sheetsUrl} target="_blank" rel="noopener noreferrer" className="mt-2 inline-flex items-center gap-1 text-xs text-green-500 hover:underline">
                Open Sheet →
              </a>
            )}
          </div>
        </div>
      </div>
    </AppShell>
  );
}