import { notFound } from "next/navigation";
import { domains } from "@/lib/domains";
import { getDictionary, type Dictionary } from "@/lib/i18n";
import { getLocale } from "@/lib/locale";

export function generateStaticParams() {
  return domains.map(({ slug }) => ({ domain: slug }));
}

export default async function DomainPage({
  params,
}: {
  params: Promise<{ domain: string }>;
}) {
  const { domain } = await params;
  const locale = await getLocale();
  const dictionary = getDictionary(locale);
  const item = domains.find(({ slug }) => slug === domain);
  if (!item) notFound();
  if (domain === "identity") {
    return <IdentityOverview dictionary={dictionary} />;
  }
  return (
    <>
      <div className="page-heading">
        <div>
          <p className="eyebrow">{dictionary.domain.eyebrow}</p>
          <h1>{item[locale]}</h1>
        </div>
        <span className="badge">{dictionary.domain.scaffold}</span>
      </div>
      <section className="surface placeholder">
        <div className="placeholder-icon">◇</div>
        <h2>{dictionary.domain.title}</h2>
        <p>{dictionary.domain.description}</p>
      </section>
    </>
  );
}

function IdentityOverview({ dictionary }: { dictionary: Dictionary }) {
  const content = dictionary.identity;
  const stages = [
    {
      number: "01",
      label: content.stageOne,
      title: content.stageOneTitle,
      description: content.stageOneDescription,
      status: content.ready,
      ready: true,
    },
    {
      number: "02",
      label: content.stageTwo,
      title: content.stageTwoTitle,
      description: content.stageTwoDescription,
      status: content.provider,
      ready: false,
    },
    {
      number: "03",
      label: content.stageThree,
      title: content.stageThreeTitle,
      description: content.stageThreeDescription,
      status: content.provider,
      ready: false,
    },
  ];

  return (
    <>
      <div className="page-heading identity-heading">
        <div>
          <p className="eyebrow">{content.eyebrow}</p>
          <h1>{content.title}</h1>
          <p className="page-description">{content.description}</p>
        </div>
        <span className="badge success">{content.badge}</span>
      </div>

      <section className="surface identity-data-card">
        <div className="surface-heading">
          <div>
            <p className="eyebrow">Identity User</p>
            <h2>{content.dataTitle}</h2>
          </div>
          <span className="identity-data-icon" aria-hidden="true">
            ID
          </span>
        </div>
        <div className="identity-field-grid">
          {content.fields.map((field, index) => (
            <div key={field} className="identity-field">
              <span>{String(index + 1).padStart(2, "0")}</span>
              <strong>{field}</strong>
            </div>
          ))}
        </div>
      </section>

      <section className="identity-workflow">
        <div className="surface-heading">
          <div>
            <p className="eyebrow">Verification</p>
            <h2>{content.workflowTitle}</h2>
          </div>
        </div>
        <div className="identity-stage-grid">
          {stages.map((stage) => (
            <article className="identity-stage" key={stage.number}>
              <div className="identity-stage-topline">
                <span className="identity-stage-number">{stage.number}</span>
                <span
                  className={`identity-stage-status${stage.ready ? " ready" : ""}`}
                >
                  {stage.status}
                </span>
              </div>
              <small>{stage.label}</small>
              <h3>{stage.title}</h3>
              <p>{stage.description}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="identity-security-note">
        <span aria-hidden="true">◆</span>
        <div>
          <strong>{content.securityTitle}</strong>
          <p>{content.securityDescription}</p>
        </div>
      </section>
    </>
  );
}