import Link from "next/link";

import { serverFetch } from "../../lib/api";

function toText(value: unknown, fallback = "") {
  return typeof value === "string" && value ? value : fallback;
}

function asWorks(value: unknown): Array<Record<string, unknown>> {
  return Array.isArray(value) ? value as Array<Record<string, unknown>> : [];
}

export default async function ShowcasePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const { showcase } = await serverFetch<{ showcase: Record<string, unknown> }>(`/showcases/${slug}`);
  const works = asWorks(showcase.works);
  const makerName = toText(showcase.maker_name, "Maker");
  const title = toText(showcase.title, "Escaparate");
  const coverImage = toText(showcase.cover_image_url, toText(works[0]?.image_url, "/demo/work-custom.svg"));
  const contactHref = `/consultas/nueva?makerId=${encodeURIComponent(String(showcase.maker_id))}&sourceType=showcase&sourceId=${encodeURIComponent(String(showcase.id))}&makerName=${encodeURIComponent(makerName)}&contextTitle=${encodeURIComponent(title)}&returnTo=${encodeURIComponent(`/showcases/${slug}`)}`;

  return (
    <main className="page-shell showcase-public-page">
      <section className="showcase-public-phone">
        <section className="showcase-public-hero" style={{ backgroundImage: `url(${coverImage})` }}>
          <div className="maker-public-top-actions">
            <Link href={`/makers/${toText(showcase.maker_slug)}`} className="maker-public-circle-action" aria-label="Volver al maker">&lt;</Link>
            <button className="maker-public-circle-action" type="button" aria-label="Compartir">sh</button>
          </div>
          <div>
            <span className="eyebrow">Escaparate publico</span>
            <h1>{title}</h1>
            <p>{toText(showcase.description, "Coleccion de trabajos destacados del maker.")}</p>
          </div>
        </section>

        <section className="showcase-public-stats">
          <article><strong>{works.length}</strong><span>Trabajos</span></article>
          <article><strong>1.284</strong><span>Visitas</span></article>
          <article><strong>38</strong><span>Consultas</span></article>
          <article><strong>4,9</strong><span>Valoracion</span></article>
        </section>

        {works[0] ? (
          <section className="maker-public-section">
            <span className="eyebrow">Trabajo destacado</span>
            <Link href={`/works/${toText(works[0].slug)}`} className="showcase-featured-work">
              <img src={toText(works[0].image_url, "/demo/work-custom.svg")} alt={toText(works[0].title)} />
              <div>
                <strong>{toText(works[0].title)}</strong>
                <span>{toText(works[0].technology, "FDM")} | {toText(works[0].material, "PLA")}</span>
              </div>
              <b>&gt;</b>
            </Link>
          </section>
        ) : null}

        <section className="maker-public-section">
          <div className="maker-public-section-head">
            <h2>Todos los trabajos</h2>
            <span>{works.length}</span>
          </div>
          <div className="showcase-public-work-grid">
            {works.map((work) => (
              <Link key={String(work.id)} href={`/works/${toText(work.slug)}`}>
                <img src={toText(work.image_url, "/demo/work-custom.svg")} alt={toText(work.title)} />
                <strong>{toText(work.title)}</strong>
                <span>{toText(work.technology, "FDM")} | {toText(work.material, "PLA")}</span>
              </Link>
            ))}
          </div>
        </section>

        <section className="maker-public-section maker-public-info-bottom">
          <span className="eyebrow">Compartir escaparate</span>
          <div className="work-detail-share-actions">
            <a className="work-detail-share-option" href={`https://wa.me/?text=${encodeURIComponent(`Mira este escaparate de ${makerName}: ${title} - https://dev.jazari.com.ar/showcases/${slug}`)}`}>WhatsApp</a>
            <button className="work-detail-share-option" type="button">Copiar enlace</button>
          </div>
        </section>
      </section>

      <div className="maker-public-bottom-cta">
        <a href={contactHref} className="button button-primary">Iniciar consulta desde este escaparate</a>
      </div>
    </main>
  );
}