'use client';

import { useState, useEffect } from 'react';

interface CountdownTimerProps {
  targetDate?: string;
}

export function CountdownTimer({ targetDate }: CountdownTimerProps) {
  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });

  useEffect(() => {
    const endDate = targetDate ? new Date(targetDate) : new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
    
    function updateCountdown() {
      const now = new Date();
      const diff = endDate.getTime() - now.getTime();
      
      if (diff <= 0) {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
        return;
      }
      
      setTimeLeft({
        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
        hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
        seconds: Math.floor((diff % (1000 * 60)) / 1000),
      });
    }
    
    updateCountdown();
    const interval = setInterval(updateCountdown, 1000);
    return () => clearInterval(interval);
  }, [targetDate]);

  const pad = (n: number) => String(n).padStart(2, '0');

  return { timeLeft, pad };
}

interface CurriculumItemProps {
  number: number;
  title: string;
  bullets: Array<{ text: string }>;
  isActive: boolean;
  onToggle: () => void;
}

export function CurriculumItem({ number, title, bullets, isActive, onToggle }: CurriculumItemProps) {
  return (
    <div className={`curriculum-item ${isActive ? 'active' : ''}`}>
      <div className="curriculum-header" onClick={onToggle}>
        <div className="curriculum-number">{number}</div>
        <div className="curriculum-title">{title}</div>
        <span className="curriculum-toggle">▼</span>
      </div>
      <div className="curriculum-content">
        {bullets?.map((bullet, i) => (
          <div key={i} className="curriculum-bullet">{bullet.text}</div>
        ))}
      </div>
    </div>
  );
}

interface FAQItemProps {
  question: string;
  answer: string;
  isActive: boolean;
  onToggle: () => void;
}

export function FAQItem({ question, answer, isActive, onToggle }: FAQItemProps) {
  return (
    <div className={`faq-item ${isActive ? 'active' : ''}`}>
      <div className="faq-question" onClick={onToggle}>
        {question}
        <span className="faq-toggle">▼</span>
      </div>
      <div className="faq-answer">{answer}</div>
    </div>
  );
}

export function CurriculumList({ modules }: { modules: Array<{ title: string; bullets: Array<{ text: string }> }> }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div className="curriculum-list">
      {modules?.map((module, index) => (
        <CurriculumItem
          key={index}
          number={index + 1}
          title={module.title}
          bullets={module.bullets}
          isActive={activeIndex === index}
          onToggle={() => setActiveIndex(activeIndex === index ? -1 : index)}
        />
      ))}
    </div>
  );
}

export function FAQList({ items }: { items: Array<{ question: string; answer: string }> }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div className="faq-list">
      {items?.map((item, index) => (
        <FAQItem
          key={index}
          question={item.question}
          answer={item.answer}
          isActive={activeIndex === index}
          onToggle={() => setActiveIndex(activeIndex === index ? -1 : index)}
        />
      ))}
    </div>
  );
}