import type { Metadata } from "next";
import type { Contact } from "@/payload-types";
import { getPayload } from "payload";
import config from "@payload-config";
import { Mail, Github, Linkedin, Twitter, MessageSquare, Rss, Phone, ArrowUpRight } from "lucide-react";
import { GridOverlay, StatusTerminal } from "@/components/site";
import { ContactForm } from "./ContactForm";

export const metadata: Metadata = { title: "Contact" };
export const dynamic = "force-dynamic";

const ICON_MAP = {
  email: Mail,
  github: Github,
  linkedin: Linkedin,
  twitter: Twitter,
  mastodon: MessageSquare,
  rss: Rss,
  phone: Phone,
} as const;

type ChannelIcon = keyof typeof ICON_MAP;

export default async function ContactPage() {
  const payload = await getPayload({ config });
  const contact = (await payload.findGlobal({ slug: "contact", depth: 1 })) as Contact;

  const { intro, channels, formCopy, availability } = contact;

  return (
    <main className="relative min-h-screen">
      <StatusTerminal location="CONTACT_CORE" status="ENCRYPTED_HANDSHAKE" />

      <section className="relative mx-auto max-w-7xl overflow-hidden px-6 pb-24 pt-16">
        <GridOverlay />

        <div className="grid grid-cols-1 items-start gap-12 lg:grid-cols-12">
          {/* Left column: intro + form + availability (60%) */}
          <div className="flex flex-col gap-10 lg:col-span-7">
            {/* Intro */}
            <div className="flex flex-col gap-4">
              {intro?.eyebrow && (
                <span className="label-sm text-secondary uppercase tracking-[0.3em]">
                  {intro.eyebrow}
                </span>
              )}
              {intro?.headline && (
                <h1 className="display-lg text-on-surface">{intro.headline}</h1>
              )}
              {intro?.body && (
                <p className="body-lg mt-4 max-w-2xl text-on-surface-variant">{intro.body}</p>
              )}
            </div>

            {/* Form */}
            <div className="glass rounded-md border border-outline-variant/15 p-8">
              {formCopy?.headline && (
                <h2 className="title-lg mb-2 text-on-surface">{formCopy.headline}</h2>
              )}
              {formCopy?.description && (
                <p className="body-md mb-6 text-on-surface-variant">{formCopy.description}</p>
              )}
              <ContactForm
                submitLabel={formCopy?.submitLabel ?? "Send signal"}
                successMessage={formCopy?.successMessage ?? "Message received. I'll be in touch."}
              />
            </div>

            {/* Availability */}
            {availability && (
              <div className="border-l-2 border-outline-variant bg-surface-container-low p-6">
                <span className="label-sm mb-2 block uppercase tracking-widest text-primary">
                  AVAILABILITY
                </span>
                <div className="flex items-center gap-3">
                  <span className="h-2 w-2 rounded-full bg-tertiary shadow-[0_0_10px_rgba(142,255,113,0.5)]" />
                  <span className="font-headline font-bold text-tertiary uppercase">
                    STATUS: {availability.statusLine}
                  </span>
                </div>
                {availability.note && (
                  <p className="body-md mt-3 text-on-surface-variant">{availability.note}</p>
                )}
              </div>
            )}
          </div>

          {/* Right column: channels list (40%) */}
          <div className="flex flex-col gap-4 lg:col-span-5">
            <span className="label-sm uppercase tracking-[0.3em] text-on-surface-variant">
              DIRECT CHANNELS
            </span>

            {channels && channels.length > 0 ? (
              <ul className="flex flex-col gap-3">
                {channels.map((channel) => {
                  const iconKey = (channel.icon ?? "email") as ChannelIcon;
                  const Icon = ICON_MAP[iconKey] ?? Mail;
                  return (
                    <li key={channel.id ?? channel.label}>
                      <a
                        href={channel.href ?? "#"}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="group flex items-center gap-4 rounded-md border border-outline-variant/15 bg-surface-container-low p-5 transition-colors hover:bg-surface-container-high"
                      >
                        <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-sm bg-surface-container-highest text-primary">
                          <Icon size={18} />
                        </span>
                        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                          <span className="label-sm uppercase tracking-widest text-on-surface">
                            {channel.label}
                          </span>
                          {channel.value && (
                            <span className="label-sm truncate text-on-surface-variant">
                              {channel.value}
                            </span>
                          )}
                        </div>
                        <ArrowUpRight
                          size={14}
                          className="flex-shrink-0 text-outline opacity-0 transition-opacity group-hover:opacity-100"
                        />
                      </a>
                    </li>
                  );
                })}
              </ul>
            ) : (
              <p className="body-md text-on-surface-variant">No channels configured yet.</p>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}
