import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Github, Linkedin, Send, Twitter } from "lucide-react";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { AnimatedSection } from "@/components/shared/AnimatedSection";
import { Timeline } from "@/components/about/Timeline";
import { Values } from "@/components/about/Values";
import { FocusAreas } from "@/components/about/FocusAreas";
import { getSiteSettings } from "@/lib/db/settings";
import { getAllTimelineEvents } from "@/lib/db/timeline";

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

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

export const dynamic = "force-dynamic";

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" },
];

export default async function AboutPage({ params }: Props) {
  const { locale } = await params;
  const [t, settings, timelineEvents] = await Promise.all([
    getTranslations({ locale, namespace: "about" }),
    getSiteSettings(),
    getAllTimelineEvents(),
  ]);

  const values = t.raw("values") as { title: string; desc: string }[];
  const focusAreas = t.raw("focus_areas") as string[];

  const dbLinks = {
    github: settings?.socialGithub,
    linkedin: settings?.socialLinkedin,
    twitter: settings?.socialTwitter,
    telegram: settings?.socialTelegram,
  };

  const links = socialLinks.map((l) => ({
    ...l,
    href:
      (l.label === "GitHub" && dbLinks.github) ||
      (l.label === "LinkedIn" && dbLinks.linkedin) ||
      (l.label === "Twitter/X" && dbLinks.twitter) ||
      (l.label === "Telegram" && dbLinks.telegram) ||
      l.href,
  }));

  const timelineItems = timelineEvents.map((e) => ({
    title: e.title,
    date: new Intl.DateTimeFormat("fa-IR", { year: "numeric" }).format(new Date(e.date)),
    description: e.description ?? undefined,
    icon: e.icon ?? undefined,
    category: (e.category as "career" | "product" | "personal") ?? "career",
  }));

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

      {/* Hero */}
      <AnimatedSection className="mb-20">
        <div className="grid gap-12 lg:grid-cols-[1fr_auto]">
          <div>
            <h1 className="mb-6 text-4xl font-bold text-text-primary md:text-5xl">{t("title")}</h1>
            <div className="space-y-4 max-w-2xl">
              {t("bio").split("\n\n").map((paragraph, i) => (
                <p key={i} className="text-base text-text-secondary leading-relaxed">{paragraph}</p>
              ))}
            </div>
            <div className="mt-8 flex items-center gap-3">
              {links.map(({ icon: Icon, href, label }) => (
                <a
                  key={label}
                  href={href as string}
                  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>

          {/* Current status card */}
          {settings?.currentStatus && (
            <div className="lg:w-72">
              <div className="rounded-xl border border-accent/20 bg-surface p-6">
                <div className="mb-3 font-mono text-xs text-accent">// {t("working_on")}</div>
                <p className="text-text-primary leading-relaxed">{settings.currentStatus}</p>
                <div className="mt-4 flex items-center gap-2">
                  <span className="h-2 w-2 animate-pulse rounded-full bg-success" />
                  <span className="font-mono text-xs text-success">active</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </AnimatedSection>

      {/* Values */}
      <AnimatedSection className="mb-20">
        <SectionHeader label={t("values_heading")} />
        <Values values={values} />
      </AnimatedSection>

      {/* Focus Areas */}
      <AnimatedSection className="mb-20">
        <SectionHeader label={t("focus_heading")} />
        <FocusAreas areas={focusAreas} />
      </AnimatedSection>

      {/* Timeline */}
      <AnimatedSection>
        <SectionHeader label={t("journey")} />
        <Timeline events={timelineItems} />
      </AnimatedSection>
    </div>
  );
}
