'use client';

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState, useEffect } from "react";
import {
  Users, Mic, Globe, Briefcase, GraduationCap, Target, TrendingUp,
  Award, BookOpen, Video, Building2, Search, DollarSign, Network,
} from "lucide-react";
import CVHeader from "@/components/layout/CVHeader";
import CVFooter from "@/components/layout/CVFooter";
import { ieltsIntroductionData } from "@/data/introduction-class/ielts/pageData";
import { HeroRegistrationSection } from "./sections/HeroRegistrationSection";
import { DiscoverSection } from "./sections/DiscoverSection";
import { AudienceSection } from "./sections/AudienceSection";
import { TrainerSection } from "./sections/TrainerSection";
import { CertificationPathSection } from "./sections/CertificationPathSection";
import { SocialProofSection } from "./sections/SocialProofSection";
import { VideoTestimonialsSection } from "./sections/VideoTestimonialsSection";
import { CareerBenefitsSection } from "./sections/CareerBenefitsSection";
import { UrgencySection } from "./sections/UrgencySection";
import { CertificateSection } from "./sections/CertificateSection";
import { FaqSection } from "./sections/FaqSection";
import { FinalCtaSection } from "./sections/FinalCtaSection";
import IeltsTrainerInfoSection from "./sections/IeltsTrainerInfoSection";

const PRIMARY_BTN = "inline-flex items-center justify-center gap-3 px-10 py-5 rounded-2xl font-black text-lg bg-[#8B1C1C] text-white hover:bg-[#6B1010] transition-all duration-300 shadow-lg hover:scale-[1.02]";

export default function CVIMIntroClass({ initialSessions = null }) {
  const hydratedSessions = Array.isArray(initialSessions) ? initialSessions : null;

  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    email: "",
    countryCode: "+91",
    phone: "",
    profession: "",
    session: hydratedSessions?.[0]?.value || "",
    interest: "",
  });
  const [sessions, setSessions] = useState(hydratedSessions);
  const [submitting, setSubmitting] = useState(false);
  const [formError, setFormError] = useState("");

  useEffect(() => {
    let cancelled = false;

    fetch(ieltsIntroductionData.apiPath)
      .then((response) => {
        if (!response.ok) throw new Error("Unable to load sessions.");
        return response.json();
      })
      .then((data) => {
        if (cancelled) return;
        const list = Array.isArray(data?.sessions) ? data.sessions : [];
        setSessions(list);
        setForm((current) => ({ ...current, session: list[0]?.value || "" }));
      })
      .catch(() => {
        if (cancelled) return;
        setSessions([]);
        setForm((current) => ({ ...current, session: "" }));
      });

    return () => { cancelled = true; };
  }, []);

  const selectedSessionLabel = sessions?.find(o => o.value === form.session)?.label || "";
  const hasSessions = Array.isArray(sessions) && sessions.length > 0;
  const [expanded, setExpanded] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.session) {
      setFormError("No upcoming sessions are available right now. Please check back soon.");
      return;
    }
    setSubmitting(true); setFormError("");
    const response = await fetch(ieltsIntroductionData.apiPath, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...form, webinarId: form.session }) });
    const data = await response.json(); setSubmitting(false);
    if (!response.ok) return setFormError(data.message || "Unable to register.");
    window.location.assign(`${ieltsIntroductionData.confirmationPath}/${data.webinarId}/${data.token}/confermation`);
  };

  const benefits = [
    { icon: Target, text: "Understand IELTS from a teacher's perspective" },
    { icon: BookOpen, text: "Explore public Band Descriptors and feedback basics" },
    { icon: Video, text: "See how IELTS skills become teachable lessons" },
    { icon: TrendingUp, text: "Ask questions about the CVIM\u00ae professional pathway" },
  ];

  const audience = [
    { icon: GraduationCap, label: "Aspiring IELTS Teachers & Trainers" },
    { icon: Briefcase, label: "English Language Teachers" },
    { icon: Award, label: "TESOL, TEFL, CELTA & DELTA Graduates" },
    { icon: Users, label: "Soft-Skills & Corporate Trainers" },
    { icon: Globe, label: "Teachers Exploring IELTS Specialisation" },
    { icon: Mic, label: "Educators New to IELTS Teaching" },
  ];

  const videoTestimonials = [
    {
      name: "Ali Mohamad",
      outcome: "Teacher from Qatar -> IELTS exam-class teaching practice",
      youtubeId: "QES55s1pOXE",
      thumb: "https://img.youtube.com/vi/QES55s1pOXE/hqdefault.jpg",
      alt: "Ali Mohamad sharing his CVIM IELTS teacher training experience",
    },
    {
      name: "Sunithi Soni",
      outcome: "Study abroad expert -> CVIM\u00ae IELTS teacher training story",
      youtubeId: "BxCxz0ceVg0",
      thumb: "https://img.youtube.com/vi/BxCxz0ceVg0/hqdefault.jpg",
      alt: "Sunithi Soni sharing her experience after CVIM IELTS teacher training",
    },
    {
      name: "Amritha Shameer",
      outcome: "ESL trainer from Qatar -> IELTS Train-the-Trainer experience",
      youtubeId: "gKAhMvTrMfw",
      thumb: "https://img.youtube.com/vi/gKAhMvTrMfw/hqdefault.jpg",
      alt: "Amritha Shameer discussing her CVIM IELTS Train-the-Trainer experience",
    },
    {
      name: "Joseph",
      outcome: "Teacher from Kerala -> IELTS teaching development pathway",
      youtubeId: "2jKme5v3OCY",
      thumb: "https://img.youtube.com/vi/2jKme5v3OCY/hqdefault.jpg",
      alt: "Joseph sharing his IELTS teacher development experience",
    },
  ];

  const certPath = [
    {
      step: "01",
      icon: BookOpen,
      title: "Attend the Free IELTS Trainer Class",
      desc: "Explore IELTS teaching, public Band Descriptors, lesson planning, feedback and the difference between teaching IELTS and taking IELTS.",
    },
    {
      step: "02",
      icon: Video,
      title: "Continue Into the CVIM\u00ae Programme",
      desc: "The full CVIM\u00ae pathway currently includes 40 hours: 20 hours live trainer-led input plus 20 hours of structured digital tasks.",
    },
    {
      step: "03",
      icon: Target,
      title: "Practise IELTS Teaching Skills",
      desc: "Develop lesson planning, four-skills teaching, learner diagnosis, public descriptor awareness, feedback language and micro-teaching evidence.",
    },
    {
      step: "04",
      icon: Award,
      title: "Earn the CVIM\u00ae Credential",
      desc: "The CVIM\u00ae credential is awarded after completing the full programme requirements, not after the free introduction class.",
    },
  ];

  const employmentBenefits = [
    { icon: Search, title: "Understand IELTS Trainer Roles", desc: "See how IELTS trainers support learners through lesson planning, timed practice, assessment awareness and skill-specific feedback." },
    { icon: Building2, title: "Teach Academic and General Training", desc: "Explore how teachers prepare learners for IELTS Listening, Reading, Writing and Speaking across different test goals." },
    { icon: Network, title: "Build Portfolio Evidence", desc: "Learn why lesson plans, feedback samples, micro-teaching and reflection matter for a professional IELTS teacher profile." },
    { icon: TrendingUp, title: "Choose the Right Next Step", desc: "Use the free class to decide whether the full CVIM\u00ae teacher-training pathway fits your professional goals." },
  ];

  const faqs = [
    { q: "Is the IELTS Train-the-Trainer introduction class free?", a: "Yes. The live IELTS Train-the-Trainer introduction class is free to attend and lasts approximately 90 minutes." },
    { q: "Who is the IELTS trainer introduction class for?", a: "The class is designed for aspiring IELTS teachers, English language teachers, TESOL and TEFL professionals, CELTA and DELTA graduates, soft-skills trainers and educators interested in specialising in IELTS teaching." },
    { q: "Do I need IELTS teaching experience to attend?", a: "No prior IELTS teaching experience is required for the introduction class. Strong English proficiency and an interest in teaching or training are recommended." },
    { q: "What is IELTS Train-the-Trainer training?", a: "IELTS Train-the-Trainer development helps teachers understand IELTS test formats, the four skills, assessment criteria, lesson planning, learner diagnosis, feedback and effective IELTS preparation teaching." },
    { q: "Is an IELTS trainer the same as an IELTS examiner?", a: "No. IELTS trainers prepare learners for the test. Official IELTS examiners are recruited and trained separately through authorised IELTS organisations and test centres." },
    { q: "Will I receive CVIM\u00ae certification after the free class?", a: "No. The free introduction class introduces IELTS teacher training and the CVIM\u00ae pathway. The CVIM\u00ae credential is awarded only after completing the requirements of the full programme." },
    { q: "Will the free class cover IELTS Writing and Speaking assessment?", a: "The class introduces how IELTS teachers use public Writing and Speaking criteria for classroom feedback. It does not train participants to issue official IELTS scores." },
    { q: "Can CELTA or DELTA teachers attend?", a: "Yes. CELTA and DELTA graduates can use the class to explore how general ELT methodology can develop into IELTS-specific lesson planning, assessment awareness and feedback practice." },
    { q: "Do I need to have taken IELTS before teaching IELTS?", a: "Taking IELTS can help you understand the candidate experience, but it is not a universal requirement. IELTS teachers need strong English, test-format knowledge, teaching skill and feedback ability." },
    { q: "Is this class for IELTS students or IELTS teachers?", a: "This introduction class is intended for current and aspiring IELTS teachers and trainers. IELTS test-takers should use Cambridge Veritas IELTS preparation programmes instead." },
  ];

  const sectionContext = { PRIMARY_BTN, form, setForm, sessions, selectedSessionLabel, hasSessions, expanded, setExpanded, submitting, formError, handleSubmit, benefits, audience, videoTestimonials, certPath, employmentBenefits, faqs };

  return (
    <div className="cv-intro-page min-h-screen bg-white">
      <CVHeader />

      {/* ══════════════════════════════════════════════════
          1. HERO + FORM
      ══════════════════════════════════════════════════ */}
      <HeroRegistrationSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          2. WHAT YOU'LL DISCOVER
      ══════════════════════════════════════════════════ */}
      <DiscoverSection course="ielts" context={sectionContext} />

      <IeltsTrainerInfoSection />

      {/* ══════════════════════════════════════════════════
          3. WHO IT IS FOR
      ══════════════════════════════════════════════════ */}
      <AudienceSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          4. TRAINER AUTHORITY
      ══════════════════════════════════════════════════ */}
      <TrainerSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          5. CERTIFICATION PATH
      ══════════════════════════════════════════════════ */}
      <CertificationPathSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          6. SOCIAL PROOF STRIP
      ══════════════════════════════════════════════════ */}
      <SocialProofSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          7. VIDEO TESTIMONIALS
      ══════════════════════════════════════════════════ */}
      <VideoTestimonialsSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          8. EMPLOYMENT & CAREER CREDIBILITY
      ══════════════════════════════════════════════════ */}
      <CareerBenefitsSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          9. URGENCY BLOCK
      ══════════════════════════════════════════════════ */}
      <UrgencySection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          10. CERTIFICATE VISUAL BLOCK
      ══════════════════════════════════════════════════ */}
      <CertificateSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          11. FAQ
      ══════════════════════════════════════════════════ */}
      <FaqSection course="ielts" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          12. FINAL CTA
      ══════════════════════════════════════════════════ */}
      <FinalCtaSection course="ielts" context={sectionContext} />

      <CVFooter />
    </div>
  );
}