import React, { useState } from 'react';
import { useCollege } from '../context/CollegeContext';
import {
  BookOpen,
  Building,
  GraduationCap,
  Calendar,
  CheckCircle2,
  FileCheck,
  Search,
  Filter,
  DollarSign,
  Clock,
  Layers,
  ArrowRight,
  ShieldCheck,
  HelpCircle,
} from 'lucide-react';
import { Course } from '../types';

interface CoursesCatalogViewProps {
  onOpenRegisterModal: (preselectedCourse?: string) => void;
  onOpenBankPayment: () => void;
}

export const CoursesCatalogView: React.FC<CoursesCatalogViewProps> = ({
  onOpenRegisterModal,
  onOpenBankPayment,
}) => {
  const { courses } = useCollege();
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedBoard, setSelectedBoard] = useState<string>('All');
  const [includeBoarding, setIncludeBoarding] = useState(false);

  const categories = ['All', 'Business & Finance', 'Engineering & ICT', 'Hospitality & Services', 'Management'];
  const examBoards = ['All', 'ICAM', 'IOBM', 'City and Guilds', 'ABE', 'ABMA', 'CIPS', 'ICM', 'NCIC'];

  const filteredCourses = courses.filter(c => {
    if (selectedCategory !== 'All' && c.category !== selectedCategory) return false;
    if (selectedBoard !== 'All' && c.examBoard !== selectedBoard) return false;
    if (searchTerm) {
      const match = `${c.code} ${c.name} ${c.examBoard} ${c.level} ${c.description}`.toLowerCase();
      if (!match.includes(searchTerm.toLowerCase())) return false;
    }
    return true;
  });

  return (
    <div className="space-y-6">
      
      {/* July - December 2026 Intake Banner */}
      <div className="bg-slate-900 text-white rounded-2xl p-6 shadow-md border border-slate-800 space-y-3">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="space-y-1">
            <span className="bg-amber-500 text-slate-950 font-mono text-[10px] font-bold px-2.5 py-0.5 rounded uppercase">
              Low Tuition Fees • One Lowest Fee for All Levels • Registration in Progress
            </span>
            <h1 className="text-2xl sm:text-3xl font-black tracking-tight text-white uppercase font-serif">
              Soche Technical College
            </h1>
            <p className="text-xs sm:text-sm text-emerald-400 font-bold">
              JULY – DECEMBER 2026 INTAKE ADVERT • SEMESTER OPENS ON 13TH JULY, 2026
            </p>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={() => onOpenRegisterModal()}
              className="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl transition shadow-md flex items-center gap-2"
            >
              <FileCheck className="w-4 h-4" />
              Apply Form (STC/APPLFORM/01/2025)
            </button>
          </div>
        </div>

        {/* Bank & Fee Terms Notice */}
        <div className="bg-slate-800/80 rounded-xl p-3.5 border border-slate-700 grid grid-cols-1 sm:grid-cols-4 gap-3 text-xs">
          <div>
            <span className="text-slate-400 text-[11px] block">Entry Qualification:</span>
            <span className="font-semibold text-slate-200">Pass in English at MSCE (Credits are an advantage)</span>
          </div>
          <div>
            <span className="text-slate-400 text-[11px] block">Application Fee:</span>
            <span className="font-semibold text-amber-300 font-mono">MK 10,000.00 (National Bank)</span>
          </div>
          <div>
            <span className="text-slate-400 text-[11px] block">Payment Terms:</span>
            <span className="font-semibold text-emerald-300">70% on Registration, 30% Month-End</span>
          </div>
          <div>
            <span className="text-slate-400 text-[11px] block">National Bank A/C:</span>
            <span className="font-semibold text-white font-mono">Customs Road #1003452219</span>
          </div>
        </div>
      </div>

      {/* Filter and Search Bar */}
      <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-xs space-y-3">
        <div className="flex flex-col md:flex-row gap-3 items-center justify-between">
          <div className="relative w-full md:w-96">
            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
            <input
              type="text"
              placeholder="Search courses by code, name, or exam board..."
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none"
            />
          </div>

          <div className="flex flex-wrap items-center gap-2 text-xs w-full md:w-auto">
            <span className="text-slate-500 font-semibold">Exam Board:</span>
            <select
              value={selectedBoard}
              onChange={e => setSelectedBoard(e.target.value)}
              className="p-1.5 border border-slate-300 rounded-lg bg-white text-xs"
            >
              {examBoards.map(b => (
                <option key={b} value={b}>{b}</option>
              ))}
            </select>

            <label className="flex items-center gap-1.5 ml-2 cursor-pointer font-medium text-slate-700">
              <input
                type="checkbox"
                checked={includeBoarding}
                onChange={e => setIncludeBoarding(e.target.checked)}
                className="text-emerald-600 rounded"
              />
              Include Boarding (+K450,000/term)
            </label>
          </div>
        </div>

        {/* Category Chips */}
        <div className="flex gap-2 overflow-x-auto no-scrollbar pt-1">
          {categories.map(cat => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-3 py-1.5 rounded-lg text-xs font-semibold whitespace-nowrap transition ${
                selectedCategory === cat
                  ? 'bg-slate-900 text-white'
                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
              }`}
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      {/* Courses Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filteredCourses.map(course => {
          const totalCost = course.tuitionFee + (includeBoarding && course.boardingAvailable ? 450000 : 0);
          return (
            <div
              key={course.code}
              className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs hover:border-slate-300 transition flex flex-col justify-between space-y-4 text-xs"
            >
              <div className="space-y-2.5">
                <div className="flex items-start justify-between gap-2">
                  <span className="font-mono font-bold text-xs bg-slate-100 text-slate-900 px-2 py-0.5 rounded border border-slate-300">
                    {course.code}
                  </span>
                  <span className="font-semibold text-[11px] bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded">
                    {course.examBoard}
                  </span>
                </div>

                <h3 className="font-bold text-slate-900 text-base leading-tight">
                  {course.name}
                </h3>

                <div className="text-[11px] text-slate-600 space-y-1">
                  <div className="flex items-center gap-1.5">
                    <GraduationCap className="w-3.5 h-3.5 text-emerald-600 shrink-0" />
                    <span>Level: <strong>{course.level}</strong></span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Clock className="w-3.5 h-3.5 text-slate-400 shrink-0" />
                    <span>Duration: {course.duration} ({course.termOrSemester})</span>
                  </div>
                </div>

                <p className="text-slate-600 text-[11px] leading-relaxed line-clamp-3">
                  {course.description}
                </p>

                <div className="flex flex-wrap gap-1.5 pt-1">
                  {course.dayRelease && (
                    <span className="bg-slate-100 text-slate-700 px-2 py-0.5 rounded text-[10px] font-medium">
                      Day-Release
                    </span>
                  )}
                  {course.weekend && (
                    <span className="bg-amber-100 text-amber-900 px-2 py-0.5 rounded text-[10px] font-medium">
                      Weekend Option
                    </span>
                  )}
                  {course.boardingAvailable && (
                    <span className="bg-blue-50 text-blue-800 px-2 py-0.5 rounded text-[10px] font-medium">
                      Boarding Option
                    </span>
                  )}
                </div>
              </div>

              {/* Fee & Action Card */}
              <div className="pt-3 border-t border-slate-100 space-y-3">
                <div className="flex items-baseline justify-between">
                  <span className="text-slate-500 text-[11px]">Tuition Fee:</span>
                  <div className="text-right">
                    <span className="text-lg font-bold font-mono text-emerald-700">
                      MK {totalCost.toLocaleString()}
                    </span>
                    <span className="text-[10px] text-slate-400 block font-normal">{course.termOrSemester}</span>
                  </div>
                </div>

                <button
                  onClick={() => onOpenRegisterModal(course.code)}
                  className="w-full py-2 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-lg transition shadow flex items-center justify-center gap-1.5 active:scale-95"
                >
                  Apply for {course.code}
                  <ArrowRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};