"use client";

import { motion } from "framer-motion";
import React from "react";

import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Timeline10Props {
  className?: string;
}

const Timeline10 = ({ className }: Timeline10Props) => {
  const currentPhase = 2;

  const timelinePhases = [
    {
      id: 0,
      date: "۲۵ دی ۱۴۲",
      title: "فاز اول",
      description:
        "جمع‌آوری داده اولیه و طراحی معماری مدل برای سیستم هوش مصنوعی.",
    },
    {
      id: 1,
      date: "۱۰ فروردین ۱۴۰۳",
      title: "فاز دوم",
      description:
        "آموزش و اعتبارسنجی مدل با پیاده‌سازی مجموعه داده اصلی.",
    },
    {
      id: 2,
      date: "۲۵ خرداد ۱۴۰۳",
      title: "فاز سوم",
      description:
        "یکپارچه‌سازی قابلیت‌های پیشرفته و بهینه‌سازی عملکرد.",
    },
    {
      id: 3,
      date: "۱۱ شهریور ۱۴۰۳",
      title: "فاز چهارم",
      description:
        "آزمایش نهایی، استقرار و راه‌اندازی سیستم بهبود مستمر.",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container flex flex-col items-center">
        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-2xll">
          خط زمانی
        </h1>
        <Card className="relative w-full border-none shadow-none md:py-16">
          <CardContent className="p-0">
            <div className="relative flex flex-col items-center md:mt-12">
              <Separator className="absolute -top-8 start-0 hidden md:block" />
              {currentPhase && (
                <motion.div
                  initial={{ width: 0 }}
                  whileInView={{
                    width: `${(currentPhase / timelinePhases.length) * 104}%`,
                  }}
                  transition={{ ease: "easeOut", duration: 0.5 }}
                  className={cn(
                    "absolute -top-[32px] start-0 hidden h-0.5 bg-foreground md:block",
                  )}
                />
              )}

              <div className="grid gap-6 md:grid-cols-4">
                {timelinePhases.map((phase, index) => (
                  <div key={phase.id} className="relative space-y-2">
                    <Separator
                      orientation="vertical"
                      className="absolute top-6 start-0 block md:hidden"
                    />
                    {index == 0 && (
                      <motion.div
                        initial={{ height: 0 }}
                        whileInView={{
                          height: currentPhase * 112,
                        }}
                        transition={{ ease: "easeOut", duration: 0.5 }}
                        className={cn(
                          "absolute start-0 z-10 w-0.5 bg-foreground md:hidden",
                        )}
                      />
                    )}
                    <div className="absolute top-0 -start-[9px] z-10 mb-5 flex size-5 items-center justify-center rounded-full bg-foreground p-1 md:-top-10 md:start-0">
                      <div className="size-full rounded-full bg-background" />
                    </div>

                    <div className="ps-7 text-start md:ps-0">
                      <p className="text-sm text-muted-foreground">
                        {phase.date}
                      </p>
                      <h2 className="text-xl font-bold tracking-tighter text-foreground">
                        {phase.title}
                      </h2>
                      <p className="text-sm text-muted-foreground">
                        {phase.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { Timeline10 };