"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  ChevronLeft,
  ChevronRight,
  Database,
  FileUp,
  Play,
  RotateCcw,
  Rows3,
  Table as TableIcon,
  Terminal,
  Upload,
  XCircle,
} from "lucide-react";
import { Footer } from "./components/Footer";
import GridTable from "./components/GridTable";

const DEFAULT_QUERY = "SELECT name FROM sqlite_master WHERE type='table';";
const INITIAL_IMPORT_PROGRESS = {
  processed: 0,
  totalStatements: 0,
  applied: 0,
  skipped: 0,
};

export default function HomePage() {
  const workerRef = useRef(null);
  const pendingRequestsRef = useRef(new Map());
  const requestIdRef = useRef(1);
  const selectedTableRef = useRef(null);

  const [engineStatus, setEngineStatus] = useState("Initializing...");
  const [engineTone, setEngineTone] = useState("");
  const [isEngineReady, setIsEngineReady] = useState(false);
  const [isBusy, setIsBusy] = useState(true);
  const [isImporting, setIsImporting] = useState(false);

  const [selectedFile, setSelectedFile] = useState(null);
  const [importSummary, setImportSummary] = useState(
    "Waiting for SQL engine...",
  );
  const [importLogLines, setImportLogLines] = useState([]);
  const [importProgress, setImportProgress] = useState(INITIAL_IMPORT_PROGRESS);

  const [tables, setTables] = useState([]);
  const [selectedTable, setSelectedTable] = useState(null);
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(50);

  const [tableMeta, setTableMeta] = useState("No table selected.");
  const [tableColumns, setTableColumns] = useState([]);
  const [tableRows, setTableRows] = useState([]);
  const [canPrevPage, setCanPrevPage] = useState(false);
  const [canNextPage, setCanNextPage] = useState(false);

  const [queryInput, setQueryInput] = useState(DEFAULT_QUERY);
  const [queryMeta, setQueryMeta] = useState("");
  const [queryColumns, setQueryColumns] = useState([]);
  const [queryRows, setQueryRows] = useState([]);

  useEffect(() => {
    selectedTableRef.current = selectedTable;
  }, [selectedTable]);

  const importLog = useMemo(() => importLogLines.join("\n"), [importLogLines]);

  const appendLog = useCallback((line) => {
    setImportLogLines((prev) => [...prev, line]);
  }, []);

  const clearQueryResults = useCallback(() => {
    setQueryMeta("");
    setQueryColumns([]);
    setQueryRows([]);
  }, []);

  const clearTableSelection = useCallback(() => {
    setTableMeta("No table selected.");
    setTableColumns([]);
    setTableRows([]);
    setCanPrevPage(false);
    setCanNextPage(false);
  }, []);

  const rejectPendingRequests = useCallback((error) => {
    for (const pending of pendingRequestsRef.current.values()) {
      pending.reject(error);
    }
    pendingRequestsRef.current.clear();
  }, []);

  const callWorker = useCallback((type, payload = {}) => {
    const worker = workerRef.current;
    if (!worker) {
      return Promise.reject(new Error("SQL worker is not initialized."));
    }

    return new Promise((resolve, reject) => {
      const requestId = requestIdRef.current;
      requestIdRef.current += 1;

      pendingRequestsRef.current.set(requestId, { resolve, reject });
      worker.postMessage({ type, requestId, ...payload });
    });
  }, []);

  const handleWorkerEvent = useCallback(
    (eventName, data = {}) => {
      switch (eventName) {
        case "log":
          if (data.line) {
            appendLog(data.line);
          }
          break;
        case "import-started": {
          const totalStatements = Number(data.totalStatements || 0);
          setImportProgress({
            processed: 0,
            totalStatements,
            applied: 0,
            skipped: 0,
          });
          setImportSummary(
            `Importing... 0/${totalStatements.toLocaleString()}`,
          );
          break;
        }
        case "import-progress": {
          const processed = Number(data.processed || 0);
          const totalStatements = Number(data.totalStatements || 0);
          const applied = Number(data.applied || 0);
          const skipped = Number(data.skipped || 0);
          const percent =
            totalStatements > 0
              ? Math.floor((processed / totalStatements) * 100)
              : 0;

          setImportProgress({
            processed,
            totalStatements,
            applied,
            skipped,
          });
          setImportSummary(
            `Importing... ${processed.toLocaleString()}/${totalStatements.toLocaleString()} (${percent}%)`,
          );
          break;
        }
        case "import-cancel-requested":
          setImportSummary("Cancelling import...");
          break;
        case "import-cancelled": {
          const processed = Number(data.processed || 0);
          const totalStatements = Number(data.totalStatements || 0);
          const applied = Number(data.applied || 0);
          const skipped = Number(data.skipped || 0);

          setImportProgress({
            processed,
            totalStatements,
            applied,
            skipped,
          });
          setImportSummary(
            `Import cancelled at ${processed.toLocaleString()}/${totalStatements.toLocaleString()} statements.`,
          );
          break;
        }
        default:
          break;
      }
    },
    [appendLog],
  );

  const refreshTables = useCallback(
    async ({ keepSelection = false } = {}) => {
      const data = await callWorker("getTables");
      const nextTables = data.tables || [];
      const currentSelection = selectedTableRef.current;
      const shouldKeepCurrent =
        keepSelection &&
        currentSelection &&
        nextTables.includes(currentSelection);

      setTables(nextTables);

      if (!nextTables.length) {
        setSelectedTable(null);
        setPage(0);
        clearTableSelection();
        setTableMeta("No tables were created from this dump.");
        return;
      }

      if (shouldKeepCurrent) {
        setSelectedTable(currentSelection);
      } else {
        setSelectedTable(nextTables[0]);
        setPage(0);
      }
    },
    [callWorker, clearTableSelection],
  );

  useEffect(() => {
    const worker = new Worker(
      new URL("./workers/sqlWorker.js", import.meta.url),
      {
        type: "module",
      },
    );

    workerRef.current = worker;

    worker.onmessage = (event) => {
      const message = event.data || {};

      if (message.type === "event") {
        handleWorkerEvent(message.event, message.data || {});
        return;
      }

      if (message.type !== "response") {
        return;
      }

      const pending = pendingRequestsRef.current.get(message.requestId);
      if (!pending) {
        return;
      }

      pendingRequestsRef.current.delete(message.requestId);

      if (message.ok) {
        pending.resolve(message.data);
      } else {
        pending.reject(
          new Error(message.error?.message || "Worker command failed."),
        );
      }
    };

    worker.onerror = (event) => {
      const message = event.message || "Unknown worker error.";
      appendLog(`[fatal] ${message}`);
      setEngineStatus(`Worker error: ${message}`);
      setEngineTone("bad");
      setIsEngineReady(false);
      setIsBusy(false);
      setIsImporting(false);
      rejectPendingRequests(new Error(message));
    };

    let cancelled = false;

    async function initEngine() {
      setIsBusy(true);

      try {
        await callWorker("init");

        if (cancelled) {
          return;
        }

        setIsEngineReady(true);
        setEngineStatus("SQLite WASM ready (worker)");
        setEngineTone("ok");
        setImportSummary(
          "Engine ready. Choose a .sql or .sql.gz dump to import.",
        );
        await refreshTables();
      } catch (error) {
        if (cancelled) {
          return;
        }

        appendLog(`[fatal] ${error.stack || error.message}`);
        setEngineStatus(`Failed to initialize SQL worker: ${error.message}`);
        setEngineTone("bad");
        setIsEngineReady(false);
      } finally {
        if (!cancelled) {
          setIsBusy(false);
        }
      }
    }

    void initEngine();

    return () => {
      cancelled = true;
      worker.terminate();
      workerRef.current = null;
      rejectPendingRequests(new Error("SQL worker terminated."));
    };
  }, [
    appendLog,
    callWorker,
    handleWorkerEvent,
    refreshTables,
    rejectPendingRequests,
  ]);

  useEffect(() => {
    if (!isEngineReady || !selectedTable) {
      clearTableSelection();
      return;
    }

    let cancelled = false;

    async function loadTablePage() {
      try {
        const data = await callWorker("getTablePage", {
          tableName: selectedTable,
          page,
          pageSize,
        });

        if (cancelled) {
          return;
        }

        const rows = data.rows || [];
        const columns = data.columns || [];
        const totalRows = Number(data.totalRows || 0);
        const safePage = Number(data.page || 0);
        const safePageSize = Number(data.pageSize || pageSize);
        const offset = safePage * safePageSize;
        const start = totalRows === 0 ? 0 : offset + 1;
        const end = Math.min(offset + rows.length, totalRows);

        if (safePage !== page) {
          setPage(safePage);
        }

        setTableColumns(columns);
        setTableRows(rows);
        setCanPrevPage(Boolean(data.canPrevPage));
        setCanNextPage(Boolean(data.canNextPage));
        setTableMeta(
          `${selectedTable} • rows ${start}-${end} of ${totalRows.toLocaleString()} • page ${safePage + 1}`,
        );
      } catch (error) {
        if (cancelled) {
          return;
        }

        clearTableSelection();
        setTableMeta(`Failed to render table: ${error.message}`);
      }
    }

    void loadTablePage();

    return () => {
      cancelled = true;
    };
  }, [
    callWorker,
    clearTableSelection,
    isEngineReady,
    page,
    pageSize,
    selectedTable,
  ]);

  const handleImportDump = useCallback(async () => {
    if (!selectedFile) {
      setImportSummary("Pick a .sql or .sql.gz file first.");
      return;
    }

    if (!isEngineReady) {
      setImportSummary("Database engine is not ready yet.");
      return;
    }

    setIsBusy(true);
    setIsImporting(true);
    setImportLogLines([]);
    setImportProgress(INITIAL_IMPORT_PROGRESS);
    setImportSummary("Preparing import...");

    try {
      const result = await callWorker("importDump", {
        file: selectedFile,
      });

      if (result.cancelled) {
        setImportSummary(
          `Import cancelled (${Number(result.applied || 0).toLocaleString()} applied, ${Number(
            result.skipped || 0,
          ).toLocaleString()} skipped).`,
        );
      } else {
        setImportSummary(
          `Imported ${Number(result.applied || 0).toLocaleString()} statements (${Number(
            result.skipped || 0,
          ).toLocaleString()} skipped).`,
        );
      }

      await refreshTables();
    } catch (error) {
      appendLog(`[error] ${error.stack || error.message}`);
      setImportSummary(`Import failed: ${error.message}`);
    } finally {
      setIsImporting(false);
      setIsBusy(false);
    }
  }, [appendLog, callWorker, isEngineReady, refreshTables, selectedFile]);

  const handleCancelImport = useCallback(() => {
    if (!isImporting || !workerRef.current) {
      return;
    }

    setImportSummary("Cancelling import...");
    workerRef.current.postMessage({ type: "cancelImport" });
  }, [isImporting]);

  const handleReset = useCallback(async () => {
    if (!isEngineReady) {
      return;
    }

    setIsBusy(true);

    try {
      await callWorker("reset");
      setTables([]);
      setSelectedTable(null);
      setPage(0);
      setPageSize(50);
      clearTableSelection();
      clearQueryResults();
      setImportProgress(INITIAL_IMPORT_PROGRESS);
      appendLog("[reset] in-memory database cleared");
      setImportSummary("Database reset. Import another dump.");
    } catch (error) {
      setImportSummary(`Reset failed: ${error.message}`);
    } finally {
      setIsBusy(false);
    }
  }, [
    appendLog,
    callWorker,
    clearQueryResults,
    clearTableSelection,
    isEngineReady,
  ]);

  const handleRunQuery = useCallback(async () => {
    if (!isEngineReady) {
      setQueryMeta("Database engine is not ready yet.");
      setQueryColumns([]);
      setQueryRows([]);
      return;
    }

    const sql = queryInput.trim();
    if (!sql) {
      setQueryMeta("Enter a query first.");
      setQueryColumns([]);
      setQueryRows([]);
      return;
    }

    setQueryMeta("Running query...");

    try {
      const data = await callWorker("runQuery", { sql });
      setQueryColumns(data.columns || []);
      setQueryRows(data.rows || []);
      setQueryMeta(data.meta || "Query completed.");
    } catch (error) {
      setQueryMeta(`Query error: ${error.message}`);
      setQueryColumns([]);
      setQueryRows([]);
    }
  }, [callWorker, isEngineReady, queryInput]);

  const importDisabled = isBusy || !isEngineReady || isImporting;
  const resetDisabled = isBusy || !isEngineReady || isImporting;
  const runQueryDisabled = !isEngineReady || isImporting;

  const statusClasses =
    engineTone === "ok"
      ? "border-accent-500/35 bg-accent-500/15 text-accent-300"
      : engineTone === "bad"
        ? "border-red-400/35 bg-red-500/14 text-red-300"
        : "border-zinc-700/60 bg-zinc-800/60 text-zinc-400";

  const progressPercent =
    importProgress.totalStatements > 0
      ? Math.floor(
          (importProgress.processed / importProgress.totalStatements) * 100,
        )
      : 0;

  return (
    <div className="relative z-10 flex min-h-screen flex-col sm:h-screen">
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[200] focus:rounded-lg focus:bg-zinc-900 focus:px-4 focus:py-2 focus:text-accent-400 focus:ring-2 focus:ring-accent-500/50"
      >
        Skip to content
      </a>
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b border-zinc-800/60 bg-zinc-900/95 backdrop-blur-sm">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
          <div className="flex items-center gap-3">
            <span className="inline-grid h-9 w-9 shrink-0 place-items-center">
              <Database
                aria-hidden="true"
                strokeWidth={2}
                className="h-6 w-6 text-accent-400"
              />
            </span>
            <span>
              <strong className="block text-sm font-semibold text-zinc-100">
                MySQL Dump Browser
              </strong>
              <small className="hidden sm:block text-xs text-zinc-400">
                Import{" "}
                <code className="rounded bg-zinc-800 px-1 py-0.5 text-[10px] font-medium text-zinc-300">
                  .sql
                </code>{" "}
                or{" "}
                <code className="rounded bg-zinc-800 px-1 py-0.5 text-[10px] font-medium text-zinc-300">
                  .sql.gz
                </code>{" "}
                and explore in-browser
              </small>
            </span>
          </div>
          <span
            className={`rounded-full border px-3 py-1 text-xs font-medium whitespace-nowrap ${statusClasses}`}
          >
            {engineStatus}
          </span>
        </div>
      </header>

      <main
        id="main-content"
        className="animate-slide-up mx-auto w-full max-w-7xl flex-1 space-y-4 px-4 py-6 sm:overflow-y-auto sm:px-6"
      >
        {/* Import Section */}
        <section className="rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-6">
          <span className="mb-2 inline-block text-xs font-semibold uppercase tracking-wider text-accent-400">
            Import
          </span>
          <h2 className="text-lg font-semibold text-zinc-100">
            Load a SQL dump
          </h2>
          <p className="mt-1 text-sm leading-relaxed text-zinc-400">
            {importSummary}
          </p>

          {importProgress.totalStatements > 0 && (
            <div className="mt-3 space-y-1.5">
              <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-800">
                <div
                  className="h-full rounded-full bg-accent-500 transition-[width] duration-300"
                  style={{ width: `${progressPercent}%` }}
                />
              </div>
              <p className="text-xs text-zinc-500">
                {importProgress.processed.toLocaleString()}/
                {importProgress.totalStatements.toLocaleString()} statements
                &middot; {importProgress.applied.toLocaleString()} applied
                &middot; {importProgress.skipped.toLocaleString()} skipped
              </p>
            </div>
          )}

          <div className="mt-4 flex flex-wrap items-center gap-2">
            <label className="flex cursor-pointer items-center gap-2 rounded-xl border border-zinc-700/60 bg-zinc-800/80 px-4 py-2 text-sm text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700/60 focus-within:border-accent-500/50 focus-within:ring-1 focus-within:ring-accent-500/30">
              <FileUp aria-hidden="true" className="h-4 w-4 text-zinc-400" />
              <span>{selectedFile ? selectedFile.name : "Choose file..."}</span>
              <input
                type="file"
                className="sr-only"
                accept=".sql,.gz,.sql.gz,application/gzip,text/plain"
                disabled={isBusy || isImporting}
                onChange={(event) => {
                  const file = event.target.files?.[0] || null;
                  setSelectedFile(file);
                  setImportSummary(
                    file ? `Selected: ${file.name}` : "No dump loaded.",
                  );
                }}
              />
            </label>
            <button
              type="button"
              disabled={importDisabled}
              onClick={() => void handleImportDump()}
              className="flex items-center gap-2 rounded-xl bg-accent-600 px-4 py-2 text-sm font-semibold text-white hover:bg-accent-500 active:scale-[0.98] transition-all disabled:cursor-not-allowed disabled:opacity-50"
            >
              <Upload aria-hidden="true" className="h-3.5 w-3.5" />
              Import
            </button>
            <button
              type="button"
              disabled={resetDisabled}
              onClick={() => void handleReset()}
              className="flex items-center gap-2 rounded-xl border border-zinc-700/60 bg-zinc-800/60 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700/60 active:scale-[0.98] transition-transform disabled:cursor-not-allowed disabled:opacity-50"
            >
              <RotateCcw aria-hidden="true" className="h-3.5 w-3.5" />
              Reset
            </button>
            {isImporting && (
              <button
                type="button"
                onClick={handleCancelImport}
                className="flex items-center gap-2 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-2 text-sm font-medium text-red-300 hover:bg-red-500/20 active:scale-[0.98] transition-transform"
              >
                <XCircle aria-hidden="true" className="h-3.5 w-3.5" />
                Cancel
              </button>
            )}
          </div>

          {importLog && (
            <pre
              className="mt-4 max-h-48 min-h-[60px] overflow-auto rounded-xl border border-zinc-800 bg-zinc-950/80 p-3 font-mono text-xs leading-relaxed text-zinc-400"
              aria-live="polite"
            >
              {importLog}
            </pre>
          )}
        </section>

        {/* Tables + Data */}
        <div className="grid gap-5 lg:grid-cols-[minmax(230px,400px)_minmax(0,1fr)]">
          {/* Sidebar */}
          <aside className="rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-5">
            <div className="flex items-center justify-between">
              <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-zinc-500">
                <TableIcon aria-hidden="true" className="h-3.5 w-3.5" />
                Tables
              </h2>
              <span className="text-xs text-zinc-600">
                {tables.length.toLocaleString()}
              </span>
            </div>
            <ul className="mt-3 max-h-[620px] space-y-1 overflow-auto">
              {tables.length === 0 && (
                <li className="py-4 text-center text-sm text-zinc-600">
                  No tables loaded
                </li>
              )}
              {tables.map((tableName) => {
                const active = tableName === selectedTable;
                return (
                  <li key={tableName}>
                    <button
                      type="button"
                      className={`flex w-full items-center gap-2 truncate rounded-xl border px-3 py-2 text-left text-sm ${
                        active
                          ? "border-accent-500/50 bg-accent-500/10 font-medium text-accent-400"
                          : "border-zinc-800/50 bg-zinc-800/30 text-zinc-400 hover:border-zinc-700/60 hover:bg-zinc-900/80 hover:text-zinc-200"
                      }`}
                      onClick={() => {
                        setSelectedTable(tableName);
                        setPage(0);
                      }}
                    >
                      <TableIcon
                        aria-hidden="true"
                        className="h-3 w-3 shrink-0"
                      />
                      {tableName}
                    </button>
                  </li>
                );
              })}
            </ul>
          </aside>

          {/* Data panel */}
          <section className="rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-5">
            <div className="flex items-center justify-between gap-4">
              <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-zinc-500">
                <Rows3 aria-hidden="true" className="h-3.5 w-3.5" />
                Data
              </h2>
              <div className="flex items-center gap-2">
                <label htmlFor="pageSize" className="text-xs text-zinc-500">
                  Rows/page
                </label>
                <select
                  id="pageSize"
                  value={pageSize}
                  onChange={(event) => {
                    setPageSize(Math.max(1, Number(event.target.value) || 50));
                    setPage(0);
                  }}
                  className="rounded-lg border border-zinc-700/60 bg-zinc-800/80 px-2.5 py-1 text-xs text-zinc-300 outline-none focus:border-accent-500/50"
                >
                  <option value={25}>25</option>
                  <option value={50}>50</option>
                  <option value={100}>100</option>
                  <option value={250}>250</option>
                </select>
              </div>
            </div>

            <p className="mt-2 text-xs text-zinc-500">{tableMeta}</p>

            <div className="mt-3 max-h-[560px] overflow-auto rounded-xl border border-zinc-800/60 bg-zinc-950/50">
              <GridTable columns={tableColumns} rows={tableRows} />
            </div>

            <div className="mt-3 flex items-center gap-2">
              <button
                type="button"
                disabled={!canPrevPage}
                onClick={() => setPage((prev) => Math.max(0, prev - 1))}
                className="flex items-center gap-1.5 rounded-lg border border-zinc-700/60 bg-zinc-800/60 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-700/60 active:scale-[0.98] transition-transform disabled:cursor-not-allowed disabled:opacity-40"
              >
                <ChevronLeft aria-hidden="true" className="h-3 w-3" />
                Previous
              </button>
              <button
                type="button"
                disabled={!canNextPage}
                onClick={() => setPage((prev) => prev + 1)}
                className="flex items-center gap-1.5 rounded-lg border border-zinc-700/60 bg-zinc-800/60 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-700/60 active:scale-[0.98] transition-transform disabled:cursor-not-allowed disabled:opacity-40"
              >
                Next
                <ChevronRight aria-hidden="true" className="h-3 w-3" />
              </button>
            </div>
          </section>
        </div>

        {/* SQL Query */}
        <section className="rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-5">
          <div className="flex items-center justify-between gap-4">
            <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-zinc-500">
              <Terminal aria-hidden="true" className="h-3.5 w-3.5" />
              SQL Query
            </h2>
            <button
              type="button"
              disabled={runQueryDisabled}
              onClick={() => void handleRunQuery()}
              className="flex items-center gap-2 rounded-xl bg-accent-600 px-4 py-1.5 text-xs font-semibold text-white hover:bg-accent-500 active:scale-[0.98] transition-all disabled:cursor-not-allowed disabled:opacity-50"
            >
              <Play aria-hidden="true" className="h-3 w-3" />
              Run
            </button>
          </div>
          <textarea
            rows={5}
            spellCheck={false}
            value={queryInput}
            onChange={(event) => setQueryInput(event.target.value)}
            placeholder={DEFAULT_QUERY}
            className="mt-3 w-full resize-y rounded-xl border border-zinc-700/60 bg-zinc-800/80 p-3 font-mono text-sm text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-accent-500/50"
          />
          {queryMeta && (
            <p className="mt-2 text-xs text-zinc-500">{queryMeta}</p>
          )}
          {queryColumns.length > 0 && (
            <div className="mt-3 max-h-[400px] overflow-auto rounded-xl border border-zinc-800/60 bg-zinc-950/50">
              <GridTable columns={queryColumns} rows={queryRows} />
            </div>
          )}
        </section>
      </main>

      <Footer />
    </div>
  );
}