import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Download, Calendar, MapPin } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { AnimatedSection } from "@/components/shared/AnimatedSection";

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

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

const experience = [
  {
    role: "مدیرعامل (CEO)",
    roleEn: "CEO & Founder",
    company: "NODE-Group",
    period: "۱۴۰۱",
    periodEn: "2022",
    presentKey: true,
    location: "تهران، ایران",
    locationEn: "Tehran, Iran",
    bullets: [
      "راه‌اندازی و رهبری شرکت فناوری با محصولات HyperAccount، Khanehban و NODE-AUTH",
      "طراحی استراتژی محصول، برند و بازاریابی دیجیتال",
      "مدیریت تیم توسعه و عملیات",
    ],
    bulletsEn: [
      "Founded and lead technology company with products HyperAccount, Khanehban, and NODE-AUTH",
      "Designed product, brand, and digital marketing strategy",
      "Managed development and operations teams",
    ],
  },
];

const education = [
  {
    degree: "کارشناسی ارشد مدیریت کسب‌وکار (MBA)",
    degreeEn: "Master of Business Administration (MBA)",
    school: "دانشگاه",
    schoolEn: "University",
    year: "۱۴۰۰",
    yearEn: "2021",
  },
];

const skillGroups = [
  {
    category: "فناوری",
    categoryEn: "Technology",
    skills: ["Next.js", "TypeScript", "React", "Node.js", "Docker", "PostgreSQL", "Sanity CMS"],
  },
  {
    category: "بازاریابی و برند",
    categoryEn: "Marketing & Brand",
    skills: ["دیجیتال مارکتینگ", "برندینگ", "SEO", "محتوا مارکتینگ", "استراتژی رسانه‌های اجتماعی"],
  },
  {
    category: "استراتژی محصول",
    categoryEn: "Product Strategy",
    skills: ["Product Management", "UX Research", "A/B Testing", "Roadmapping", "Customer Discovery"],
  },
  {
    category: "ابزارها",
    categoryEn: "Tools",
    skills: ["Figma", "Linear", "Notion", "VS Code", "GitHub Actions"],
  },
];

export default async function ResumePage({ params }: Props) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "resume" });
  const isRtl = locale === "fa";

  return (
    <div className="relative z-10 mx-auto max-w-4xl px-6 py-24 pt-32">
      {/* Header */}
      <AnimatedSection>
        <div className="mb-12 flex items-start justify-between gap-4">
          <div>
            <SectionHeader label="resume" />
            <h1 className="text-4xl font-bold text-text-primary">
              {isRtl ? "علی تقوی" : "Ali Taghavi"}
            </h1>
            <p className="mt-2 text-text-secondary">
              {isRtl ? "مدیرعامل NODE-Group · سازنده · استراتژیست" : "CEO @ NODE-Group · Builder · Strategist"}
            </p>
            <div className="mt-3 flex flex-wrap items-center gap-3 text-sm text-text-secondary">
              <span className="flex items-center gap-1"><MapPin size={13} /> {isRtl ? "تهران، ایران" : "Tehran, Iran"}</span>
              <span className="font-mono">biztaghavi.com</span>
            </div>
          </div>
          <Button asChild variant="secondary" size="sm" className="shrink-0">
            <a href="/resume.pdf" download>
              <Download size={14} />
              {t("download_pdf")}
            </a>
          </Button>
        </div>
      </AnimatedSection>

      {/* Experience */}
      <AnimatedSection className="mb-12">
        <SectionHeader label={t("experience")} />
        <div className="space-y-8">
          {experience.map((job, i) => (
            <div key={i} className="rounded-xl border border-border bg-surface p-6">
              <div className="mb-4 flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <h3 className="font-semibold text-text-primary">
                    {isRtl ? job.role : job.roleEn}
                  </h3>
                  <p className="font-mono text-sm text-accent">{job.company}</p>
                </div>
                <div className="flex flex-col items-start gap-1 sm:items-end shrink-0">
                  <div className="flex items-center gap-1 font-mono text-xs text-text-secondary">
                    <Calendar size={11} />
                    {isRtl ? job.period : job.periodEn} — {t("present")}
                  </div>
                  <span className="font-mono text-xs text-text-secondary">
                    <MapPin size={11} className="inline me-1" />
                    {isRtl ? job.location : job.locationEn}
                  </span>
                </div>
              </div>
              <ul className="space-y-2">
                {(isRtl ? job.bullets : job.bulletsEn).map((b, j) => (
                  <li key={j} className="flex items-start gap-2 text-sm text-text-secondary">
                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </AnimatedSection>

      {/* Education */}
      <AnimatedSection className="mb-12">
        <SectionHeader label={t("education")} />
        <div className="space-y-4">
          {education.map((edu, i) => (
            <div key={i} className="rounded-xl border border-border bg-surface p-6">
              <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <h3 className="font-semibold text-text-primary">
                    {isRtl ? edu.degree : edu.degreeEn}
                  </h3>
                  <p className="text-sm text-text-secondary">{isRtl ? edu.school : edu.schoolEn}</p>
                </div>
                <span className="font-mono text-xs text-text-secondary shrink-0">
                  {isRtl ? edu.year : edu.yearEn}
                </span>
              </div>
            </div>
          ))}
        </div>
      </AnimatedSection>

      {/* Skills */}
      <AnimatedSection>
        <SectionHeader label={t("skills")} />
        <div className="grid gap-6 sm:grid-cols-2">
          {skillGroups.map((group, i) => (
            <div key={i} className="rounded-xl border border-border bg-surface p-5">
              <h3 className="mb-3 font-mono text-xs text-accent">
                // {isRtl ? group.category : group.categoryEn}
              </h3>
              <div className="flex flex-wrap gap-2">
                {group.skills.map((skill) => (
                  <Badge key={skill} variant="secondary">{skill}</Badge>
                ))}
              </div>
            </div>
          ))}
        </div>
      </AnimatedSection>
    </div>
  );
}
