import type { Metadata } from "next";
import { getActiveLocale, getDictionary, isLocale, type Locale } from "@/lib/i18n";
import { buildPageMetadata } from "@/lib/metadata";
import { getContactChannels, isSiteClosedMode } from "@/lib/site";
import { notFound, redirect } from "next/navigation";
import ContactForm from "@/components/public/contact-form";

export function generateMetadata({ params }: { params: { locale: string } }): Metadata {
  if (!isLocale(params.locale)) {
    return {};
  }

  return buildPageMetadata(getActiveLocale(params.locale), "contact");
}

export default function ContactPage({ params }: { params: { locale: string } }) {
  if (!isLocale(params.locale)) {
    notFound();
  }

  if (isSiteClosedMode()) {
    redirect("/");
  }

  const locale = getActiveLocale(params.locale as Locale);
  const dictionary = getDictionary(locale);
  const channels = getContactChannels(dictionary.contact);

  return (
    <section className="panel section-stack">
      <div>
        <p className="eyebrow">{dictionary.contact.kicker}</p>
        <h1>{dictionary.contact.title}</h1>
        <p className="lead">{dictionary.contact.description}</p>
      </div>

      <article className="card availability-card">
        <h2>{dictionary.contact.availabilityTitle}</h2>
        <p>{dictionary.contact.availabilityDescription}</p>
      </article>

      <ContactForm
        labels={{
          name: dictionary.contact.formName,
          email: dictionary.contact.formEmail,
          message: dictionary.contact.formMessage,
          submit: dictionary.contact.formSubmit,
          sending: dictionary.contact.formSending,
          success: dictionary.contact.formSuccess,
          savedWarning: dictionary.contact.formSavedWarning,
          invalid: dictionary.contact.formInvalid,
          rateLimit: dictionary.contact.formRateLimit,
        }}
      />

      <div className="section-heading">
        <h2>{dictionary.contact.channelsTitle}</h2>
      </div>

      <div className="split-grid contact-grid">
        {channels.map((channel) => (
          <article className="card contact-channel-card" key={channel.key}>
            <div className="channel-meta">
              <h3>{channel.name}</h3>
              <p>{channel.hint}</p>
            </div>
            <p className="contact-value">{channel.value}</p>
            {channel.href ? (
              <a
                href={channel.href}
                className="card-link"
                target={channel.external ? "_blank" : undefined}
                rel={channel.external ? "noreferrer" : undefined}
              >
                {dictionary.contact.channelCta}
              </a>
            ) : (
              <span className="card-link is-disabled" aria-disabled="true">
                {dictionary.contact.channelFallback}
              </span>
            )}
          </article>
        ))}
      </div>
    </section>
  );
}
