"use client";

import { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { API, fallbackSettings, type SiteSettings } from "@/lib/api";
import { ReceiptDisplay, type InvoiceData } from "@/components/ReceiptDisplay";

function ReceiptContent() {
  const searchParams = useSearchParams();
  const receiptNo = searchParams.get("receiptNo") || "";
  const [data, setData] = useState<InvoiceData | null>(null);
  const [settings, setSettings] = useState<SiteSettings>(fallbackSettings);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    let cancelled = false;
    fetch(`${API}/settings`)
      .then((r) => (r.ok ? r.json() : null))
      .catch(() => null)
      .then((s) => {
        if (!cancelled && s) setSettings(s);
      });
    return () => {
      cancelled = true;
    };
  }, []);

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

    async function loadReceipt() {
      await Promise.resolve();

      if (cancelled) return;
      if (!receiptNo) {
        setError("Receipt number is missing.");
        setLoading(false);
        return;
      }

      setLoading(true);
      setError("");

      const verifyRes = await fetch(`${API}/donations/verify/${encodeURIComponent(receiptNo)}`);
      if (cancelled) return;

      if (!verifyRes.ok) {
        setError("Receipt not found. Please check the receipt number.");
        setLoading(false);
        return;
      }

      const json = await verifyRes.json().catch(() => null);
      if (cancelled) return;
      if (!json) {
        setError("Receipt not found. Please check the receipt number.");
      } else {
        setData(json);
      }
      setLoading(false);
    }

    loadReceipt();
    return () => {
      cancelled = true;
    };
  }, [receiptNo]);

  return (
    <main className="min-h-screen bg-[var(--color-canvas-soft)] px-4 py-8 text-[var(--color-ink)] print:bg-white print:p-0">
      <div className="no-print mx-auto mb-6 flex max-w-4xl flex-wrap items-center justify-between gap-3">
        <Link href="/" className="btn-outline inline-flex items-center gap-2 px-4 py-2 text-sm">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
          Back to Website
        </Link>
        <button
          type="button"
          onClick={() => window.print()}
          className="btn inline-flex items-center gap-2 px-5 py-2 text-sm"
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 6 2 18 2 18 9" /><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" /><rect x="6" y="14" width="12" height="8" /></svg>
          Print / Save PDF
        </button>
      </div>

      <div className="mx-auto max-w-4xl">
        {loading ? (
          <div className="flex flex-col items-center gap-4 rounded-[12px] border border-[var(--color-hairline)] bg-white py-24 shadow-[var(--shadow-l1)]">
            <span className="h-10 w-10 animate-spin rounded-full border-4 border-[var(--color-hairline)] border-t-[var(--color-primary)]" />
            <p className="text-sm font-medium text-[var(--color-ink-mute)]">Loading receipt...</p>
          </div>
        ) : error ? (
          <div className="flex flex-col items-center gap-4 rounded-[12px] border border-[var(--color-hairline)] bg-white py-20 shadow-[var(--shadow-l1)]">
            <span className="grid h-16 w-16 place-items-center rounded-[12px] bg-[var(--color-canvas-soft)] text-[var(--color-ink)]">
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
            </span>
            <h2 className="text-xl font-medium text-[var(--color-ink)]">Receipt Not Found</h2>
            <p className="max-w-md text-center text-sm font-medium text-[var(--color-ink-mute)]">{error}</p>
          </div>
        ) : data ? (
          <div className="flex justify-center">
            <ReceiptDisplay data={{ ...data, settings }} />
          </div>
        ) : null}
      </div>
    </main>
  );
}

export default function ReceiptPage() {
  return (
    <Suspense fallback={<div className="grid min-h-screen place-items-center bg-[var(--color-canvas-soft)] text-sm font-medium text-[var(--color-ink-mute)]">Loading receipt...</div>}>
      <ReceiptContent />
    </Suspense>
  );
}