AdmissionTabs

"use client";

import { useState } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { FaGraduationCap, FaFileAlt, FaMoneyBillWave, FaAward, FaQuestionCircle } from "react-icons/fa";

// These should be proper images from your school
const ADMISSION_IMAGES = {
  process: "/admission-process.jpg", // Replace with actual image
  requirements: "/requirements.jpg", // Replace with actual image
  fees: "/tuition-fees.jpg", // Replace with actual image
  scholarships: "/scholarships.jpg", // Replace with actual image
  faq: "/campus-life.jpg", // Replace with actual image
};

type Tab = {
  title: string;
  value: string;
  icon: React.ReactNode;
  content?: React.ReactNode;
};

export function AdmissionTabs() {
  const tabs: Tab[] = [
    {
      title: "Application Process",
      value: "process",
      icon: <FaFileAlt />,
      content: (
        <div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
          <div className="flex flex-col md:flex-row h-full">
            <div className="w-full md:w-1/2 p-8 md:p-10">
              <h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Application Process</h3>
              
              <div className="space-y-4">
                <div className="bg-white p-4 rounded-xl shadow-md">
                  <div className="flex items-center">
                    <div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">1</div>
                    <h4 className="font-semibold text-gray-800">Submit Online Application</h4>
                  </div>
                  <p className="mt-2 text-gray-600 pl-11">Complete the online application form with personal information and academic history.</p>
                </div>

                <div className="bg-white p-4 rounded-xl shadow-md">
                  <div className="flex items-center">
                    <div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">2</div>
                    <h4 className="font-semibold text-gray-800">Upload Documents</h4>
                  </div>
                  <p className="mt-2 text-gray-600 pl-11">Submit required documents including transcripts, ID proof, and recommendation letters.</p>
                </div>

                <div className="bg-white p-4 rounded-xl shadow-md">
                  <div className="flex items-center">
                    <div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">3</div>
                    <h4 className="font-semibold text-gray-800">Entrance Assessment</h4>
                  </div>
                  <p className="mt-2 text-gray-600 pl-11">Complete the required assessment test or interview as per your chosen program.</p>
                </div>

                <div className="bg-white p-4 rounded-xl shadow-md">
                  <div className="flex items-center">
                    <div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">4</div>
                    <h4 className="font-semibold text-gray-800">Admission Decision</h4>
                  </div>
                  <p className="mt-2 text-gray-600 pl-11">Receive your admission decision within 2-3 weeks after completing all steps.</p>
                </div>
              </div>

              <motion.button 
                whileHover={{ scale: 1.05 }} 
                whileTap={{ scale: 0.95 }}
                className="mt-8 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-8 rounded-xl font-medium shadow-lg hover:shadow-indigo-200 transition-all"
              >
                Apply Now
              </motion.button>
            </div>
            
            <div className="w-full md:w-1/2 relative h-60 md:h-auto">
              <Image
                src={ADMISSION_IMAGES.process}
                alt="Application process"
                layout="fill"
                objectFit="cover"
                className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
                <p className="text-white font-medium text-lg">Applications for 2025-26 Academic Year</p>
                <p className="text-white/80">Deadline: August 15, 2025</p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
    {
      title: "Requirements",
      value: "requirements",
      icon: <FaGraduationCap />,
      content: (
        <div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
          <div className="flex flex-col md:flex-row h-full">
            <div className="w-full md:w-1/2 p-8 md:p-10">
              <h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Admission Requirements</h3>
              
              <div className="space-y-6">
                <div>
                  <h4 className="text-lg font-semibold text-indigo-800 mb-2 flex items-center">
                    <span className="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
                    Academic Records
                  </h4>
                  <ul className="list-disc pl-6 text-gray-700 space-y-1">
                    <li>High School Transcripts with minimum GPA of 3.0</li>
                    <li>Standardized test scores (SAT/ACT)</li>
                    <li>Previous academic certificates</li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="text-lg font-semibold text-indigo-800 mb-2 flex items-center">
                    <span className="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
                    Personal Documents
                  </h4>
                  <ul className="list-disc pl-6 text-gray-700 space-y-1">
                    <li>Valid ID proof/passport</li>
                    <li>Recent passport-sized photographs</li>
                    <li>Proof of residence</li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="text-lg font-semibold text-indigo-800 mb-2 flex items-center">
                    <span className="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
                    Additional Requirements
                  </h4>
                  <ul className="list-disc pl-6 text-gray-700 space-y-1">
                    <li>Two letters of recommendation</li>
                    <li>Personal statement/essay</li>
                    <li>Portfolio (for creative programs)</li>
                    <li>Interview (for selected programs)</li>
                  </ul>
                </div>
              </div>
              
              <div className="mt-8 p-4 bg-indigo-50 rounded-lg border-l-4 border-indigo-500">
                <p className="text-indigo-900 text-sm">
                  <strong>Note:</strong> Requirements may vary by program. Please check specific program 
                  requirements before applying.
                </p>
              </div>
            </div>
            
            <div className="w-full md:w-1/2 relative h-60 md:h-auto">
              <Image
                src={ADMISSION_IMAGES.requirements}
                alt="Admission requirements"
                layout="fill"
                objectFit="cover"
                className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
                <p className="text-white font-medium text-lg">Required Documents</p>
                <p className="text-white/80">All documents must be in PDF format</p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
    {
      title: "Tuition & Fees",
      value: "fees",
      icon: <FaMoneyBillWave />,
      content: (
        <div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
          <div className="flex flex-col md:flex-row h-full">
            <div className="w-full md:w-1/2 p-8 md:p-10">
              <h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Tuition & Fees</h3>
              
              <div className="space-y-6">
                <div className="bg-white rounded-xl shadow-md overflow-hidden">
                  <div className="bg-indigo-600 text-white py-3 px-4">
                    <h4 className="font-semibold">Undergraduate Programs</h4>
                  </div>
                  <div className="p-4">
                    <table className="w-full text-sm">
                      <tbody>
                        <tr className="border-b border-gray-100">
                          <td className="py-3 text-gray-700">Tuition (per year)</td>
                          <td className="py-3 font-medium text-gray-900">$12,500</td>
                        </tr>
                        <tr className="border-b border-gray-100">
                          <td className="py-3 text-gray-700">Registration Fee</td>
                          <td className="py-3 font-medium text-gray-900">$250</td>
                        </tr>
                        <tr>
                          <td className="py-3 text-gray-700">Student Services</td>
                          <td className="py-3 font-medium text-gray-900">$850</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                
                <div className="bg-white rounded-xl shadow-md overflow-hidden">
                  <div className="bg-purple-600 text-white py-3 px-4">
                    <h4 className="font-semibold">Graduate Programs</h4>
                  </div>
                  <div className="p-4">
                    <table className="w-full text-sm">
                      <tbody>
                        <tr className="border-b border-gray-100">
                          <td className="py-3 text-gray-700">Tuition (per year)</td>
                          <td className="py-3 font-medium text-gray-900">$15,800</td>
                        </tr>
                        <tr className="border-b border-gray-100">
                          <td className="py-3 text-gray-700">Registration Fee</td>
                          <td className="py-3 font-medium text-gray-900">$300</td>
                        </tr>
                        <tr>
                          <td className="py-3 text-gray-700">Research Access</td>
                          <td className="py-3 font-medium text-gray-900">$1,200</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              
              <div className="mt-8 flex gap-4">
                <motion.button 
                  whileHover={{ scale: 1.05 }} 
                  whileTap={{ scale: 0.95 }}
                  className="bg-white border border-indigo-200 text-indigo-700 py-2 px-6 rounded-xl font-medium hover:bg-indigo-50 transition-colors"
                >
                  Payment Plans
                </motion.button>
                <motion.button 
                  whileHover={{ scale: 1.05 }} 
                  whileTap={{ scale: 0.95 }}
                  className="bg-white border border-indigo-200 text-indigo-700 py-2 px-6 rounded-xl font-medium hover:bg-indigo-50 transition-colors"
                >
                  Financial Aid
                </motion.button>
              </div>
            </div>
            
            <div className="w-full md:w-1/2 relative h-60 md:h-auto">
              <Image
                src={ADMISSION_IMAGES.fees}
                alt="Tuition and fees"
                layout="fill"
                objectFit="cover"
                className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
                <p className="text-white font-medium text-lg">Affordable Education</p>
                <p className="text-white/80">Multiple payment options available</p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
    {
      title: "Scholarships",
      value: "scholarships",
      icon: <FaAward />,
      content: (
        <div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
          <div className="flex flex-col md:flex-row h-full">
            <div className="w-full md:w-1/2 p-8 md:p-10">
              <h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Scholarships & Financial Aid</h3>
              
              <div className="grid grid-cols-1 gap-6">
                {[
                  {
                    title: "Academic Excellence Scholarship",
                    amount: "Up to 75% tuition waiver",
                    criteria: "GPA 3.8+ and outstanding academic achievements",
                    deadline: "June 30, 2025",
                    color: "from-blue-500 to-indigo-500"
                  },
                  {
                    title: "Leadership & Community Service",
                    amount: "Up to 50% tuition waiver",
                    criteria: "Demonstrated leadership and community involvement",
                    deadline: "July 15, 2025",
                    color: "from-purple-500 to-pink-500"
                  },
                  {
                    title: "Creative Arts Scholarship",
                    amount: "Up to 60% tuition waiver",
                    criteria: "Outstanding portfolio and creative achievements",
                    deadline: "July 30, 2025",
                    color: "from-amber-500 to-orange-500"
                  }
                ].map((scholarship, idx) => (
                  <div key={idx} className="bg-white rounded-xl shadow-md overflow-hidden">
                    <div className={`bg-gradient-to-r ${scholarship.color} text-white py-3 px-4`}>
                      <h4 className="font-semibold">{scholarship.title}</h4>
                    </div>
                    <div className="p-4 space-y-2">
                      <div className="flex justify-between">
                        <span className="text-gray-600">Award:</span>
                        <span className="font-medium text-gray-900">{scholarship.amount}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">Criteria:</span>
                        <span className="font-medium text-gray-900 text-right">{scholarship.criteria}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">Deadline:</span>
                        <span className="font-medium text-gray-900">{scholarship.deadline}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              
              <motion.button 
                whileHover={{ scale: 1.05 }} 
                whileTap={{ scale: 0.95 }}
                className="mt-8 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-8 rounded-xl font-medium shadow-lg hover:shadow-indigo-200 transition-all"
              >
                Apply for Scholarships
              </motion.button>
            </div>
            
            <div className="w-full md:w-1/2 relative h-60 md:h-auto">
              <Image
                src={ADMISSION_IMAGES.scholarships}
                alt="Scholarships"
                layout="fill"
                objectFit="cover"
                className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
                <p className="text-white font-medium text-lg">Rewarding Excellence</p>
                <p className="text-white/80">Over $2 million in scholarships awarded annually</p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
    {
      title: "FAQ",
      value: "faq",
      icon: <FaQuestionCircle />,
      content: (
        <div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
          <div className="flex flex-col md:flex-row h-full">
            <div className="w-full md:w-1/2 p-8 md:p-10">
              <h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Frequently Asked Questions</h3>
              
              <div className="space-y-4">
                {[
                  {
                    question: "What is the application deadline?",
                    answer: "Regular admission deadline is August 15, 2025. Early decision applications are due by June 1, 2025."
                  },
                  {
                    question: "Can I apply to multiple programs?",
                    answer: "Yes, you can apply to up to three programs with a single application fee."
                  },
                  {
                    question: "Are there any application fee waivers?",
                    answer: "Fee waivers are available for students with financial need. Contact the admissions office for details."
                  },
                  {
                    question: "How long does the admission process take?",
                    answer: "Most decisions are made within 2-3 weeks after all required documents are received."
                  },
                  {
                    question: "Is on-campus housing guaranteed?",
                    answer: "On-campus housing is guaranteed for first-year students who apply by the priority deadline."
                  }
                ].map((faq, idx) => (
                  <motion.div 
                    key={idx}
                    initial={{ height: "auto" }}
                    whileHover={{ backgroundColor: "rgba(238, 242, 255, 0.5)" }}
                    className="bg-white rounded-xl shadow-sm overflow-hidden p-4 transition-colors"
                  >
                    <h4 className="font-semibold text-indigo-800">{faq.question}</h4>
                    <p className="text-gray-600 mt-2">{faq.answer}</p>
                  </motion.div>
                ))}
              </div>
              
              <div className="mt-8 text-center">
                <p className="text-gray-600 mb-4">Didn't find what you're looking for?</p>
                <motion.button 
                  whileHover={{ scale: 1.05 }} 
                  whileTap={{ scale: 0.95 }}
                  className="bg-white border border-indigo-200 text-indigo-700 py-2 px-6 rounded-xl font-medium hover:bg-indigo-50 transition-colors"
                >
                  Contact Admissions
                </motion.button>
              </div>
            </div>
            
            <div className="w-full md:w-1/2 relative h-60 md:h-auto">
              <Image
                src={ADMISSION_IMAGES.faq}
                alt="Frequently asked questions"
                layout="fill"
                objectFit="cover"
                className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
                <p className="text-white font-medium text-lg">Still Have Questions?</p>
                <p className="text-white/80">Our admissions team is here to help</p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <div className="h-auto md:h-[40rem] [perspective:1000px] relative flex flex-col max-w-6xl mx-auto w-full items-start justify-start">
      <Tabs tabs={tabs} />
    </div>
  );
}

export const Tabs = ({
  tabs: propTabs,
  containerClassName,
  activeTabClassName,
  tabClassName,
  contentClassName,
}: {
  tabs: Tab[];
  containerClassName?: string;
  activeTabClassName?: string;
  tabClassName?: string;
  contentClassName?: string;
}) => {
  const [active, setActive] = useState<Tab>(propTabs[0]);
  const [tabs, setTabs] = useState<Tab[]>(propTabs);
  const [hovering, setHovering] = useState(false);

  const moveSelectedTabToTop = (idx: number) => {
    const newTabs = [...propTabs];
    const selectedTab = newTabs.splice(idx, 1);
    newTabs.unshift(selectedTab[0]);
    setTabs(newTabs);
    setActive(newTabs[0]);
  };

  return (
    <>
      <div className="text-center mb-8">
        <h2 className="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-700 to-purple-700">
          Join Our Academic Community
        </h2>
        <p className="text-gray-600 mt-2 max-w-2xl mx-auto">
          Explore our admission process and find everything you need to become part of Kautilya Academy.
        </p>
      </div>
    
      <div
        className={cn(
          "flex flex-row items-center justify-center [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full mb-8",
          containerClassName
        )}
      >
        {propTabs.map((tab, idx) => (
          <motion.button
            key={tab.title}
            onClick={() => {
              moveSelectedTabToTop(idx);
            }}
            onMouseEnter={() => setHovering(true)}
            onMouseLeave={() => setHovering(false)}
            className={cn(
              "relative px-6 py-4 rounded-full mx-1 flex items-center gap-2", 
              tabClassName
            )}
            style={{
              transformStyle: "preserve-3d",
            }}
            whileHover={{ y: -3 }}
            whileTap={{ y: 0 }}
          >
            {active.value === tab.value && (
              <motion.div
                layoutId="clickedbutton"
                transition={{ type: "spring", bounce: 0.3, duration: 0.6 }}
                className={cn(
                  "absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full shadow-lg",
                  activeTabClassName
                )}
              />
            )}

            <span className={`relative z-10 ${active.value === tab.value ? 'text-white' : 'text-gray-700'}`}>
              {tab.icon}
            </span>
            <span className={`relative z-10 font-medium ${active.value === tab.value ? 'text-white' : 'text-gray-700'}`}>
              {tab.title}
            </span>
          </motion.button>
        ))}
      </div>
      
      <FadeInDiv
        tabs={tabs}
        active={active}
        key={active.value}
        hovering={hovering}
        className={cn("mt-2 h-full w-full", contentClassName)}
      />
    </>
  );
};

export const FadeInDiv = ({
  className,
  tabs,
  active,
  hovering,
}: {
  className?: string;
  key?: string;
  tabs: Tab[];
  active: Tab;
  hovering?: boolean;
}) => {
  const isActive = (tab: Tab) => {
    return tab.value === tabs[0].value;
  };
  
  return (
    <div className="relative w-full h-full">
      {tabs.map((tab, idx) => (
        <motion.div
          key={tab.value}
          layoutId={tab.value}
          style={{
            scale: 1 - idx * 0.05,
            top: hovering ? idx * -30 : 0,
            zIndex: -idx,
            opacity: idx < 3 ? 1 - idx * 0.2 : 0,
          }}
          animate={{
            y: isActive(tab) ? [0, 10, 0] : 0,
          }}
          transition={{
            duration: 0.5,
            ease: "easeInOut"
          }}
          className={cn("w-full h-full absolute top-0 left-0", className)}
        >
          {tab.content}
        </motion.div>
      ))}
    </div>
  );
};