"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface TimelineEvent {
  title: string;
  date: string;
  description?: string;
  icon?: string;
  category?: "career" | "product" | "personal";
}

const categoryColor: Record<string, string> = {
  career: "text-accent border-accent/40 bg-accent-muted",
  product: "text-blue-400 border-blue-400/40 bg-blue-400/10",
  personal: "text-purple-400 border-purple-400/40 bg-purple-400/10",
};

// Static fallback timeline — will be overridden by Sanity data when available
const fallbackEvents: TimelineEvent[] = [
  { title: "تأسیس NODE-Group", date: "۱۴۰۱", icon: "🏢", category: "career", description: "راه‌اندازی شرکت فناوری NODE-Group برای ساختن محصولات نوآورانه" },
  { title: "راه‌اندازی HyperAccount", date: "۱۴۰۲", icon: "⚡", category: "product", description: "عرضه زیرساخت هویت و حساب کاربری برای وب نسل بعدی" },
  { title: "ساخت Khanehban", date: "۱۴۰۲", icon: "🏠", category: "product", description: "مدیریت هوشمند املاک برای موجران و مستأجران ایرانی" },
  { title: "NODE-AUTH (Dezhban)", date: "۱۴۰۳", icon: "🔐", category: "product", description: "لایه احراز هویت و مجوزدهی برای محصولات ایرانی" },
  { title: "MBA", date: "۱۴۰۰", icon: "🎓", category: "personal", description: "فارغ‌التحصیلی از دوره MBA" },
];

interface TimelineProps {
  events?: TimelineEvent[];
}

export function Timeline({ events }: TimelineProps) {
  const items = events && events.length > 0 ? events : fallbackEvents;

  return (
    <div className="relative">
      {/* Vertical line */}
      <div className="absolute start-5 top-0 bottom-0 w-px bg-border" />

      <div className="space-y-8">
        {items.map((event, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0, x: -16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-40px" }}
            transition={{ duration: 0.4, delay: i * 0.05 }}
            className="relative flex gap-6 ps-14"
          >
            {/* Icon dot */}
            <div className="absolute start-0 flex h-10 w-10 items-center justify-center rounded-full border border-border bg-surface text-lg">
              {event.icon ?? "●"}
            </div>

            <div className="flex-1 pb-2">
              <div className="mb-1 flex flex-wrap items-center gap-2">
                <h3 className="font-semibold text-text-primary">{event.title}</h3>
                {event.category && (
                  <span className={cn("rounded-full border px-2 py-0.5 font-mono text-xs", categoryColor[event.category])}>
                    {event.date}
                  </span>
                )}
              </div>
              {event.description && (
                <p className="text-sm text-text-secondary leading-relaxed">{event.description}</p>
              )}
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
}
