import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Github, Linkedin, Send, Twitter, Instagram, MapPin } from "lucide-react";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { AnimatedSection } from "@/components/shared/AnimatedSection";
import { ContactForm } from "@/components/shared/ContactForm";
import { Button } from "@/components/ui/button";

interface Props {
  params: Promise<{ locale: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "contact" });
  return { title: t("title"), description: t("subtitle") };
}

const socialLinks = [
  { icon: Github, href: "https://github.com/alitaghavi", label: "GitHub" },
  { icon: Linkedin, href: "https://linkedin.com/in/alitaghavi", label: "LinkedIn" },
  { icon: Twitter, href: "https://twitter.com/alitaghavi", label: "Twitter/X" },
  { icon: Send, href: "https://t.me/alitaghavi", label: "Telegram" },
  { icon: Instagram, href: "https://instagram.com/alitaghavi", label: "Instagram" },
];

export default async function ContactPage({ params }: Props) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "contact" });
  const openToItems = t.raw("open_to_items") as string[];

  return (
    <div className="relative z-10 mx-auto max-w-6xl px-6 py-24 pt-32">
      <SectionHeader label="contact" />

      <div className="grid gap-12 lg:grid-cols-[1fr_380px]">
        {/* Form */}
        <AnimatedSection>
          <h1 className="mb-2 text-4xl font-bold text-text-primary md:text-5xl">{t("title")}</h1>
          <p className="mb-8 text-text-secondary">{t("subtitle")}</p>
          <ContactForm />
        </AnimatedSection>

        {/* Sidebar info */}
        <AnimatedSection delay={0.1} className="space-y-8">
          {/* Open to */}
          <div className="rounded-xl border border-border bg-surface p-6">
            <div className="mb-4 font-mono text-xs text-accent">// {t("open_to")}</div>
            <ul className="space-y-2">
              {openToItems.map((item, i) => (
                <li key={i} className="flex items-center gap-2 text-sm text-text-secondary">
                  <span className="h-1.5 w-1.5 rounded-full bg-accent shrink-0" />
                  {item}
                </li>
              ))}
            </ul>
          </div>

          {/* Location */}
          <div className="flex items-center gap-2 font-mono text-sm text-text-secondary">
            <MapPin size={14} className="text-accent shrink-0" />
            {t("based_in")}
          </div>

          {/* Social */}
          <div>
            <div className="mb-4 font-mono text-xs text-accent">// social</div>
            <div className="flex flex-wrap gap-3">
              {socialLinks.map(({ icon: Icon, href, label }) => (
                <a
                  key={href}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="flex h-10 w-10 items-center justify-center rounded-full border border-border text-text-secondary transition-all hover:border-accent/40 hover:text-accent hover:bg-accent-muted"
                >
                  <Icon size={16} />
                </a>
              ))}
            </div>
          </div>

          {/* Telegram CTA */}
          <div className="relative overflow-hidden rounded-xl border border-accent/20 bg-surface p-6">
            <div className="absolute -right-8 -top-8 h-24 w-24 rounded-full bg-accent/5 blur-2xl" />
            <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-accent-muted">
              <Send size={18} className="text-accent" />
            </div>
            <p className="mb-4 text-sm text-text-secondary leading-relaxed">
              {locale === "fa"
                ? "برای یادداشت‌های روزانه، ایده‌ها و آپدیت‌ها، کانال تلگرامم را دنبال کن"
                : "For daily notes, ideas, and updates, follow my Telegram channel"}
            </p>
            <Button asChild size="sm" variant="outline">
              <a href="https://t.me/alitaghavi_channel" target="_blank" rel="noopener noreferrer">
                <Send size={13} />
                {locale === "fa" ? "عضو کانال" : "Join Channel"}
              </a>
            </Button>
          </div>
        </AnimatedSection>
      </div>
    </div>
  );
}
