import type { Metadata } from "next";
import Link from "next/link";
import PortalAnalytics from "./PortalAnalytics";
import { PortalFooter, PortalHeader } from "./PortalChrome";
import PortalFinderTeaser from "./PortalFinderTeaser";
import "./portal.css";
import "./portal-home.css";

export const dynamic = "force-dynamic";

type ContentItem = {
  code?: string;
  title: string;
  description: string;
  label?: string;
  url?: string;
  status?: string;
};
type Block = {
  codigo: string;
  tipo: string;
  titulo: string;
  bajada?: string;
  contenido: {
    eyebrow?: string;
    primary_label?: string;
    primary_url?: string;
    secondary_label?: string;
    secondary_url?: string;
    items?: ContentItem[];
  };
};
type PortalData = {
  meta_titulo: string;
  meta_descripcion: string;
  bloques: Block[];
  catalogo?: { servicios?: Array<{ slug: string; nombre: string; descripcion_corta?: string; categoria?: string; capacidades?: string[] }> };
};

const fallback: PortalData = {
  meta_titulo: "Documenta | Servicios notariales y registrales",
  meta_descripcion: "La plataforma chilena que conecta personas y empresas con notarías, conservadores y archiveros.",
  bloques: [
    { codigo: "HERO", tipo: "HERO", titulo: "Trámites y documentos con entidades de Chile.", bajada: "Consulta servicios, requisitos y entidades disponibles antes de iniciar una solicitud.", contenido: { eyebrow: "SERVICIOS DOCUMENTALES", primary_label: "Iniciar un trámite", primary_url: "https://tramites.documenta.cl", secondary_label: "Conocer las plataformas", secondary_url: "#plataformas" } },
  ],
};

async function getPortal(): Promise<PortalData> {
  const base = process.env.INTERNAL_API_BASE_URL || "http://api:8000/api/v1";
  try {
    const response = await fetch(`${base}/portal/home`, { cache: "no-store" });
    if (!response.ok) return fallback;
    return response.json();
  } catch {
    return fallback;
  }
}

export async function generateMetadata(): Promise<Metadata> {
  const data = await getPortal();
  return {
    title: data.meta_titulo,
    description: data.meta_descripcion,
    alternates: { canonical: "https://documenta.cl" },
    openGraph: {
      title: data.meta_titulo,
      description: data.meta_descripcion,
      url: "https://documenta.cl",
      siteName: "Documenta",
      locale: "es_CL",
      type: "website",
    },
  };
}

function block(data: PortalData, type: string) {
  return data.bloques.find((item) => item.tipo === type);
}

function Arrow() {
  return <span aria-hidden="true">→</span>;
}

function HomeIcon({ name, size = 25 }: { name: string; size?: number }) {
  return <img src={`/media/documenta-home/icons/${name}.svg`} width={size} height={size} alt="" loading="lazy" decoding="async" />;
}

function accessIcon(title: string) {
  const name = title.toLocaleLowerCase("es");
  if (name.includes("conservador")) return "conservadores";
  if (name.includes("archivero")) return "entidades";
  return "tramites";
}

const serviceIcons: Record<string, string> = {
  "autorizacion-domicilio-comercial": "domicilio-comercial",
  "carta-renuncia": "carta-renuncia",
  "carta-poder-cobrar-finiquito": "cobrar-finiquito",
  "carta-poder-matricula-universidad": "matricula-universidad",
  "carta-poder-retiro-de-patente": "retiro-patente",
  "carta-poder-sii": "sii",
};

const platformIcons: Record<string, string> = {
  TRAMITES: "tramites", PERSONAS: "personas", PRO: "documenta-pro-blanco",
  NOTARIA: "notarias", CBR: "conservadores", ARCHIVERO: "entidades",
};

export default async function PortalHome() {
  const data = await getPortal();
  const hero = block(data, "HERO") || fallback.bloques[0];
  const access = block(data, "ACCESOS");
  const finder = block(data, "FINDER");
  const value = block(data, "PROPUESTA");
  const platforms = block(data, "PLATAFORMAS");
  const b2b = block(data, "B2B");
  const cta = block(data, "CTA");
  const services = data.catalogo?.servicios || [];
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: "Documenta",
    url: "https://documenta.cl",
    email: "contacto@documenta.cl",
    telephone: "+562264691551",
    address: { "@type": "PostalAddress", streetAddress: "Huerfanos 1160 OF 909", addressLocality: "Santiago", addressCountry: "CL" },
  };
  return (
    <div className="portal-site portal-home">
      <a className="portal-skip" href="#contenido">Saltar al contenido</a>
      <PortalHeader />
      <main id="contenido">
        <section className="portal-hero">
          <div className="portal-container portal-hero-grid">
            <div className="portal-hero-copy">
              <span className="portal-eyebrow">{hero.contenido.eyebrow}</span>
              <h1>{hero.titulo}</h1>
              <p>{hero.bajada}</p>
              <div className="portal-actions">
                <a className="portal-button portal-button-primary" href={hero.contenido.primary_url || "https://tramites.documenta.cl"} data-analytics="hero-primary"><span>{hero.contenido.primary_label}</span><Arrow /></a>
                <a className="portal-button portal-button-secondary" href={hero.contenido.secondary_url || "#plataformas"} data-analytics="hero-secondary"><span>{hero.contenido.secondary_label}</span></a>
              </div>
              <div className="portal-hero-trust">
                <span><HomeIcon name="personas-blanco" size={26} />Personas</span><span><HomeIcon name="audiencia-maletin" size={26} />Empresas</span><span><HomeIcon name="audiencia-banco" size={26} />Entidades</span>
              </div>
            </div>
            <div className="portal-hero-art">
              <picture>
                <source srcSet="/media/documenta-home/documenta-portada-digital.webp" type="image/webp" />
                <img src="/media/documenta-home/documenta-portada-digital.png" width={1536} height={1024} alt="Celular en una mano y computador con la plataforma Documenta." fetchPriority="high" decoding="async" />
              </picture>
              <div className="portal-hero-labels">
                <div className="portal-network-node node-personas"><HomeIcon name="audiencia-documento" size={40} /><div><small>Para</small><strong>Personas</strong></div></div>
                <div className="portal-network-node node-entidades"><HomeIcon name="audiencia-capas" size={40} /><div><small>Para</small><strong>Entidades</strong></div></div>
                <div className="portal-network-node node-empresas"><HomeIcon name="audiencia-banco" size={40} /><div><small>Para</small><strong>Empresas</strong></div></div>
              </div>
            </div>
          </div>
        </section>

        {finder && <PortalFinderTeaser title={finder.titulo} lead={finder.bajada} />}

        {access && <section className="portal-section portal-access" id="servicios">
          <div className="portal-container">
            <div className="portal-section-heading"><span>ACCESOS RÁPIDOS</span><h2>{access.titulo}</h2><p>{access.bajada}</p></div>
            <div className="portal-access-grid">
              {(access.contenido.items || []).map((item, index) => <a href={item.url || "https://tramites.documenta.cl"} className="portal-access-card" key={item.title} data-analytics={`quick-${index}`} data-analytics-event="CTA_CLICK">
                <div className="portal-access-top"><span className="portal-access-icon" aria-hidden="true"><HomeIcon name={accessIcon(item.title)} /></span><span className="portal-card-number">0{index + 1}</span></div><h3>{item.title}</h3><p>{item.description}</p><strong>{item.label} <Arrow /></strong>
              </a>)}
            </div>
          </div>
        </section>}

        {services.length > 0 && <section className="portal-section portal-catalog">
          <div className="portal-container">
            <div className="portal-section-heading portal-heading-row"><div><span>CATÁLOGO ACTUAL</span><h2>Servicios disponibles hoy.</h2></div><a href="https://tramites.documenta.cl" className="portal-text-link">Ver todos <Arrow /></a></div>
            <div className="portal-service-grid">
              {services.slice(0, 6).map((service) => <a href={`https://tramites.documenta.cl/tramite/${service.slug}`} className="portal-service-card" key={service.slug} data-analytics={service.slug} data-analytics-event="SERVICE_CLICK">
                <span className="portal-service-icon" aria-hidden="true"><HomeIcon name={serviceIcons[service.slug] || "documentos"} size={24} /></span><small>{service.categoria || "Servicio"}</small><h3>{service.nombre}</h3><p>{service.descripcion_corta || "Solicita este servicio en línea."}</p><span>{(service.capacidades || []).join(" · ")}</span>
              </a>)}
            </div>
          </div>
        </section>}

        {value && <section className="portal-section portal-value">
          <div className="portal-container portal-value-grid">
            <div className="portal-section-heading"><span>SERVICIOS CONECTADOS</span><h2>{value.titulo}</h2><p>{value.bajada}</p></div>
            <div className="portal-value-list">{(value.contenido.items || []).map((item, index) => <article key={item.title}><span>{index + 1}</span><div><h3>{item.title}</h3><p>{item.description}</p></div></article>)}</div>
          </div>
        </section>}

        {platforms && <section className="portal-section portal-platforms" id="plataformas">
          <div className="portal-container">
            <div className="portal-section-heading"><span>ECOSISTEMA DOCUMENTA</span><h2>{platforms.titulo}</h2><p>{platforms.bajada}</p></div>
            <div className="portal-platform-grid">{(platforms.contenido.items || []).map((item) => <a className={`portal-platform-card${item.code?.toUpperCase() === "PRO" ? " portal-platform-card--pro" : ""}`} href={item.url || "/contacto"} key={item.code || item.title} data-analytics={item.code} data-analytics-event="PLATFORM_CLICK">
              <span className="portal-platform-icon" aria-hidden="true"><HomeIcon name={platformIcons[item.code?.toUpperCase() || ""] || "documentos"} size={28} /></span><div><span className={item.status === "DISPONIBLE" ? "is-live" : ""}>{item.status === "DISPONIBLE" ? "Disponible" : "Próximamente"}</span><h3>{item.title}</h3><p>{item.description}</p></div><Arrow />
            </a>)}</div>
          </div>
        </section>}

        {b2b && <section className="portal-section portal-b2b" id="empresas"><div className="portal-container portal-b2b-card"><div><span>DOCUMENTA PRO</span><h2>{b2b.titulo}</h2><p>{b2b.bajada}</p></div><div className="portal-actions"><a className="portal-button portal-button-light" href={b2b.contenido.primary_url || "https://pro.documenta.cl"} data-analytics="b2b-primary">{b2b.contenido.primary_label} <Arrow /></a><Link className="portal-button portal-button-outline-light" href={b2b.contenido.secondary_url || "/contacto"}>{b2b.contenido.secondary_label}</Link></div></div></section>}

        <section className="portal-section portal-verification-teaser"><div className="portal-container"><div className="portal-verification-art" aria-hidden="true"><HomeIcon name="verificar" size={59} /></div><div><span>VERIFICACIÓN DOCUMENTAL</span><h2>Comprueba un documento por su código.</h2><p>Consulta las fuentes conectadas a Documenta y obtén un resultado con emisor, fecha y evidencia de integridad.</p></div><Link className="portal-button portal-button-primary" href="/verificar" data-analytics="verification-home">Verificar documento <Arrow /></Link></div></section>

        {cta && <section className="portal-section portal-final-cta"><div className="portal-container"><span>DOCUMENTA</span><h2>{cta.titulo}</h2><p>{cta.bajada}</p><div className="portal-actions"><a className="portal-button portal-button-primary" href={cta.contenido.primary_url || "https://tramites.documenta.cl"} data-analytics="final-primary">{cta.contenido.primary_label} <Arrow /></a><Link className="portal-button portal-button-secondary" href={cta.contenido.secondary_url || "/contacto"}>{cta.contenido.secondary_label}</Link></div></div></section>}
      </main>
      <PortalFooter />
      <PortalAnalytics />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
    </div>
  );
}