import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { SCHEDULE, EVENT_INFO } from "@/data/event-data";
import { Clock, Music, Coffee, Star } from "lucide-react";
import { getTimeLeft } from "@/components/HeroSection";
import { useTranslation } from "react-i18next";

const typeIcon: Record<string, typeof Clock> = {
  workshop: Clock,
  social: Music,
  break: Coffee,
  show: Star,
};

const typeColor: Record<string, string> = {
  workshop: "border-primary bg-primary/10 text-primary",
  social: "border-secondary bg-secondary/10 text-secondary",
  break: "border-muted-foreground bg-muted text-muted-foreground",
  show: "border-accent bg-accent/10 text-accent",
};

const ScheduleSection = () => {
  const { t } = useTranslation();
  const [timeLeft, setTimeLeft] = useState(getTimeLeft(EVENT_INFO.date));
  const isEventOngoing = timeLeft.days === 0 && timeLeft.hours === 0 && timeLeft.minutes === 0 && timeLeft.seconds === 0;

  const dayKeys = ["friday", "saturday", "sunday"] as const;

  const formatEventTitle = (event: { type: string; title: string }, dayIndex: number) => {
    switch (event.type) {
      case "workshop": {
        const match = event.title.match(/Workshop\\s*(\\d+)/i);
        return match?.[1] ? `${t("schedule.workshop")} ${match[1]}` : t("schedule.workshop");
      }
      case "break":
        return t("schedule.break");
      case "show":
        return t("schedule.show");
      case "social":
        return dayIndex === 2 ? t("schedule.farewell") : t("schedule.social");
      default:
        return event.title;
    }
  };

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(getTimeLeft(EVENT_INFO.date));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  if (!isEventOngoing) {
    return (
      <section 
        id="schedule" 
        className="section-padding bg-card relative z-20 -mt-[40px] pt-[100px]"
        style={{ borderRadius: "100% 0 0 0 / 120px 0 0 0" }}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          className="max-w-lg mx-auto text-center bg-card rounded-2xl p-10 shadow-elevated"
        >
          <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2">
            {t("schedule.statusBriefTitle")}
          </h3>
          <p className="text-muted-foreground">
            {t("schedule.statusBriefDescription")}
          </p>
        </motion.div>
      </section>
    );
  }

  return (
    <section 
      id="schedule" 
      className="section-padding bg-card relative z-20 -mt-[40px] pt-[100px]"
      style={{ borderRadius: "100% 0 0 0 / 120px 0 0 0" }}
    >
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: false, amount: 0.15 }}
          className="text-center mb-12"
        >
          <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
            {t("schedule.title")}
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            {t("schedule.subtitle")}
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-8">
          {SCHEDULE.map((day, di) => (
            <motion.div
              key={day.day}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, amount: 0.15 }}
              transition={{ delay: di * 0.15 }}
            >
              <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-3 leading-[1.6] font-bold text-foreground mb-4 border-b-2 border-primary">
                {t(`schedule.${dayKeys[di]}`)}
              </h3>
              <div className="space-y-3">
                {day.events.map((event, ei) => {
                  const Icon = typeIcon[event.type] || Clock;
                  return (
                    <div
                      key={ei}
                      className={`flex items-start gap-3 p-3 rounded-lg border-l-4 ${
                        typeColor[event.type] || ""
                      }`}
                    >
                      <Icon className="w-4 h-4 mt-0.5 shrink-0" />
                      <div>
                        <p className="text-xs font-medium opacity-70">{event.time}</p>
                        <p className="text-sm font-semibold">
                          {formatEventTitle(event as { type: string; title: string }, di)}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ScheduleSection;
