import Link from "next/link";
import { z } from "zod";
import { registerSection } from "./registry";
import { registerSchema } from "./schemas";
import { getRequestLocale, t } from "@/lib/i18n/strings";

const LAYOUT = "legal_page";

const LegalSectionSchema = z.object({
  slug: z.string().default(""),
  title: z.string().default(""),
  paragraphs: z.array(z.string()).default([]),
  bullets: z.array(z.string()).default([]),
});

export const LegalPageSchema = z.object({
  eyebrow: z.string().default(""),
  title: z.string().default(""),
  intro: z.string().default(""),
  updated_label: z.string().default(""),
  updated_date: z.string().default(""),
  sections: z.array(LegalSectionSchema).default([]),
  contact_label: z.string().default(""),
  contact_email: z.string().default(""),
  contact_phone: z.string().default(""),
  contact_whatsapp: z.string().default(""),
});

export type LegalPageData = z.infer<typeof LegalPageSchema>;

function fallbackSlug(title: string, index: number): string {
  return title ? `section-${index + 1}` : `section-${index + 1}`;
}

export async function LegalPage({ data }: { data: LegalPageData }) {
  const locale = await getRequestLocale();
  const showContact =
    data.contact_label.length > 0 &&
    (data.contact_email.length > 0 ||
      data.contact_phone.length > 0 ||
      data.contact_whatsapp.length > 0);

  const sections = data.sections.map((section, index) => ({
    ...section,
    slug: section.slug || fallbackSlug(section.title, index),
  }));

  return (
    <article className="legal-page" data-screen-label="Legal">
      <header className="legal-hero">
        <div className="legal-hero__inner">
          {data.eyebrow ? (
            <span className="legal-eyebrow">
              <span className="legal-eyebrow__pip" />
              {data.eyebrow}
            </span>
          ) : null}
          {data.title ? <h1 className="legal-title">{data.title}</h1> : null}
          {data.intro ? <p className="legal-intro">{data.intro}</p> : null}
          {data.updated_date ? (
            <p className="legal-updated">
              {data.updated_label ? (
                <span className="legal-updated__label">{data.updated_label}</span>
              ) : null}
              <span className="legal-updated__date">{data.updated_date}</span>
            </p>
          ) : null}
        </div>
        <div className="legal-hero__rule" aria-hidden />
      </header>

      <div className="legal-shell">
        <aside className="legal-toc" aria-label={t(locale, "legal.toc")}>
          <p className="legal-toc__label">{t(locale, "legal.contents")}</p>
          <ol className="legal-toc__list">
            {sections.map((section, index) => (
              <li key={section.slug}>
                <Link href={`#${section.slug}`}>
                  <span className="legal-toc__num">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                  <span className="legal-toc__title">{section.title}</span>
                </Link>
              </li>
            ))}
          </ol>
        </aside>

        <div className="legal-body">
          {sections.map((section, index) => (
            <section
              key={section.slug}
              id={section.slug}
              className="legal-section"
            >
              <div className="legal-section__meta">
                <span className="legal-section__num">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <span className="legal-section__rule" aria-hidden />
              </div>
              <div className="legal-section__content">
                {section.title ? <h2>{section.title}</h2> : null}
                {section.paragraphs.map((paragraph, i) => (
                  <p key={i}>{paragraph}</p>
                ))}
                {section.bullets.length > 0 ? (
                  <ul>
                    {section.bullets.map((bullet, i) => (
                      <li key={i}>{bullet}</li>
                    ))}
                  </ul>
                ) : null}
              </div>
            </section>
          ))}

          {showContact ? (
            <section className="legal-contact">
              <h3>{data.contact_label}</h3>
              <ul>
                {data.contact_email ? (
                  <li>
                    <span>{t(locale, "legal.email")}</span>
                    <a href={`mailto:${data.contact_email}`}>{data.contact_email}</a>
                  </li>
                ) : null}
                {data.contact_phone ? (
                  <li>
                    <span>{t(locale, "legal.phone")}</span>
                    <a href={`tel:${data.contact_phone.replace(/\s+/g, "")}`}>
                      {data.contact_phone}
                    </a>
                  </li>
                ) : null}
                {data.contact_whatsapp ? (
                  <li>
                    <span>{t(locale, "legal.whatsapp")}</span>
                    <a
                      href={data.contact_whatsapp}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {t(locale, "legal.contact_direct")}
                    </a>
                  </li>
                ) : null}
              </ul>
            </section>
          ) : null}
        </div>
      </div>
    </article>
  );
}

registerSection<LegalPageData>(LAYOUT, LegalPage);
registerSchema(LAYOUT, LegalPageSchema);