"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { userMessage } from "../../../lib/messages";

type Offer = { nombre:string; slug:string; descripcion_corta?:string; categoria:string; precio:number };
type Entity = { nombre_fantasia:string; capacidades?:string[] };
type Catalog = { entidad?:Entity; notaria?:Entity; items:Offer[] };

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
const transactionBase = (process.env.NEXT_PUBLIC_TRAMITES_BASE_URL || "https://tramites.documenta.cl").replace(/\/$/, "");
const capabilityLabels:Record<string,string> = {
  NOTARIA:"Notaría", CONSERVADOR:"Conservador", ARCHIVERO:"Archivero judicial",
};

export default function EmbeddedEntityServices() {
  const { uuid } = useParams<{ uuid:string }>();
  const [catalog,setCatalog] = useState<Catalog|null>(null);
  const [error,setError] = useState("");
  useEffect(() => {
    fetch(`${apiBase}/embed/entidades/${encodeURIComponent(uuid)}/documentos`,{cache:"no-store"})
      .then(async response => {
        const body=await response.json();
        if(!response.ok) throw new Error(body.detail||"No fue posible cargar los servicios.");
        setCatalog(body);
      })
      .catch(reason=>setError(userMessage(reason,"No fue posible cargar los servicios.")));
  },[uuid]);
  const entity=catalog?.entidad || catalog?.notaria;
  return <main className="embed-page"><section className="embed-shell">
    <header className="embed-heading"><span>SERVICIOS EN LÍNEA</span><h1>Servicios disponibles</h1>
      {entity&&<p>Selecciona el trámite o documento que deseas solicitar a {entity.nombre_fantasia}.</p>}
    </header>
    {entity?.capacidades?.length ? <div className="embed-capabilities">
      {entity.capacidades.map(capability=><span key={capability}>{capabilityLabels[capability]||capability}</span>)}
    </div> : null}
    {error&&<div className="embed-state embed-error">{error}</div>}
    {!catalog&&!error&&<div className="embed-state">Cargando servicios…</div>}
    {catalog&&!catalog.items.length&&<div className="embed-state">Esta entidad aún no tiene servicios disponibles.</div>}
    <div className="embed-grid">{catalog?.items.map(offer=><a className="embed-card"
      href={`${transactionBase}/tramite/${encodeURIComponent(offer.slug)}?entidad=${encodeURIComponent(uuid)}`}
      target="_blank" rel="noopener noreferrer" key={offer.slug}>
      <span className="embed-category">{offer.categoria}</span><h2>{offer.nombre}</h2>
      <p>{offer.descripcion_corta||"Completa los antecedentes necesarios para solicitar este servicio."}</p>
      <footer><strong>${Number(offer.precio).toLocaleString("es-CL")}</strong><b>Comenzar →</b></footer>
    </a>)}</div>
    <div className="embed-brand">Procesado por <strong>Documenta<span>.</span></strong></div>
  </section></main>;
}