"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";

export default function CatalogOrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const router = useRouter();
  const [orderId, setOrderId] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    void params.then((resolved) => setOrderId(resolved.id));
  }, [params]);

  useEffect(() => {
    if (!orderId) return;
    let mounted = true;
    const prepareQuoteEditor = async () => {
      setLoading(true);
      setError("");
      try {
        const response = await fetch(`/api/catalog/orders/${orderId}/quote`, { method: "POST" });
        const result = (await response.json().catch(() => null)) as { ok?: boolean; error?: string; quote_id?: string } | null;
        if (!response.ok || !result?.ok || !result.quote_id) {
          throw new Error(result?.error || "Não foi possível abrir o editor do pedido.");
        }
        if (!mounted) return;
        router.replace(`/dashboard/quotes/${result.quote_id}?catalog_order_id=${orderId}&from_catalog=1`);
      } catch (prepareError) {
        if (!mounted) return;
        setError(prepareError instanceof Error ? prepareError.message : "Não foi possível abrir o editor do pedido.");
        setLoading(false);
      }
    };
    void prepareQuoteEditor();
    return () => {
      mounted = false;
    };
  }, [orderId, router]);

  if (loading && !error) {
    return (
      <main className="flex min-h-[40vh] items-center justify-center">
        <div className="inline-flex items-center gap-3 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white px-5 py-4 text-sm font-semibold text-[var(--ks-color-text-primary)] shadow-[0_12px_32px_rgba(15,23,42,0.04)]">
          <Loader2 className="h-4.5 w-4.5 animate-spin text-[var(--ks-color-primary)]" />
          Abrindo editor...
        </div>
      </main>
    );
  }

  if (!error) return null;

  return (
    <main className="space-y-4">
      <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700">
        {error || "Não foi possível abrir o editor."}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button onClick={() => router.refresh()}>Tentar novamente</Button>
        <Button variant="outline" onClick={() => router.push("/dashboard/catalog/orders")}>
          Voltar para pedidos do catálogo
        </Button>
      </div>
    </main>
  );
}