"use client";

import { useEffect, useState } from "react";
import { Loader2, AlertTriangle, FileSpreadsheet, Pencil } from "lucide-react";
import { Button } from "@/components/ui";
import { cn } from "@/lib/utils";
import * as XLSX from "xlsx";

import "@fortune-sheet/react/dist/index.css";

interface XlsxViewerProps {
  url: string;
  fileName: string;
  onEdit?: () => void;
}

interface CellData {
  r: number;
  c: number;
  v: { v: unknown; m: string };
}

interface SheetData {
  name: string;
  celldata: CellData[];
  row: number;
  column: number;
  order: number;
  status: number;
}

function workbookToFortuneSheets(wb: XLSX.WorkBook): SheetData[] {
  return wb.SheetNames.map((name, index) => {
    const ws = wb.Sheets[name];
    const rows = XLSX.utils.sheet_to_json<unknown[]>(ws, { header: 1 }) as unknown[][];
    const celldata: CellData[] = [];
    let maxCol = 0;

    for (let r = 0; r < rows.length; r++) {
      if (!rows[r]) continue;
      for (let c = 0; c < rows[r].length; c++) {
        const val = rows[r][c];
        if (val !== undefined && val !== null && val !== "") {
          celldata.push({ r, c, v: { v: val, m: String(val) } });
          if (c > maxCol) maxCol = c;
        }
      }
    }

    return {
      name,
      celldata,
      row: Math.max(rows.length, 50),
      column: Math.max(maxCol + 1, 26),
      order: index,
      status: index === 0 ? 1 : 0,
    };
  });
}

export function XlsxViewer({ url, fileName, onEdit }: XlsxViewerProps) {
  const [sheets, setSheets] = useState<SheetData[] | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [WorkbookComponent, setWorkbookComponent] = useState<any>(null);
  const [retryCount, setRetryCount] = useState(0);

  useEffect(() => {
    let cancelled = false;

    async function loadSpreadsheet() {
      setLoading(true);
      setError(null);

      try {
        const [response, fortuneSheet] = await Promise.all([
          fetch(url, { credentials: "include" }),
          import("@fortune-sheet/react"),
        ]);

        if (!response.ok) throw new Error(`Failed to fetch file: ${response.statusText}`);
        if (cancelled) return;

        setWorkbookComponent(() => fortuneSheet.Workbook);

        const data = await response.arrayBuffer();
        if (cancelled) return;

        const wb = XLSX.read(data);
        const converted = workbookToFortuneSheets(wb);
        setSheets(converted);
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : "Failed to load spreadsheet");
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    loadSpreadsheet();
    return () => { cancelled = true; };
  }, [url, retryCount]);

  if (error) {
    return (
      <div className="flex flex-1 flex-col items-center justify-center gap-3 p-8">
        <AlertTriangle className="h-10 w-10 text-yellow-500" />
        <p className="text-sm text-text-secondary">{error}</p>
        <Button variant="secondary" size="sm" onClick={() => setRetryCount((c) => c + 1)}>
          Retry
        </Button>
      </div>
    );
  }

  if (loading || !sheets || !WorkbookComponent) {
    return (
      <div className="flex flex-1 items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin text-text-secondary" />
        <span className="ml-2 text-sm text-text-secondary">Loading spreadsheet...</span>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full overflow-hidden">
      <div className="flex items-center gap-2 border-b border-line px-4 py-2 shrink-0">
        <FileSpreadsheet className="h-4 w-4 text-text-secondary" />
        <span className="text-sm font-medium text-text-primary truncate">{fileName}</span>
        <div className="ml-auto flex items-center gap-1">
          {onEdit && (
            <Button variant="ghost" size="xs" onClick={onEdit}>
              <Pencil className="w-3.5 h-3.5 mr-1" />
              Edit
            </Button>
          )}
        </div>
      </div>
      <div className="flex-1 min-h-0 overflow-hidden">
        <div className="h-full w-full">
          <WorkbookComponent data={sheets} />
        </div>
      </div>
    </div>
  );
}
