import { useMemo, useState } from "react";
import {
  Award,
  Search,
  Filter,
  Download,
  Eye,
  Printer,
  RotateCcw,
  GraduationCap,
  Users,
  FileBadge2,
  CalendarDays,
  CheckCircle2,
} from "lucide-react";

const schoolData = {
  Nursery: {
    sections: ["A", "B"],
  },
  LKG: {
    sections: ["A", "B"],
  },
  UKG: {
    sections: ["A", "B"],
  },
  1: {
    sections: ["A", "B", "C"],
  },
  2: {
    sections: ["A", "B", "C"],
  },
  3: {
    sections: ["A", "B", "C"],
  },
  4: {
    sections: ["A", "B", "C"],
  },
  5: {
    sections: ["A", "B", "C"],
  },
  6: {
    sections: ["A", "B", "C"],
  },
  7: {
    sections: ["A", "B", "C"],
  },
  8: {
    sections: ["A", "B", "C"],
  },
  9: {
    sections: ["A", "B", "C"],
  },
  10: {
    sections: ["A", "B", "C"],
  },
};

const certificateTypes = [
  "Academic Excellence",
  "Sports Achievement",
  "Attendance Certificate",
  "Discipline Award",
  "Science Exhibition",
  "Dance Competition",
  "Drawing Competition",
  "Leadership Award",
  "Quiz Winner",
  "Participation Certificate",
];

const certificateData = [
  {
    id: 1,
    student: "Aarav Sharma",
    class: "10",
    section: "A",
    certificate: "Academic Excellence",
    issueDate: "2026-05-20",
    generatedBy: "Admin",
    status: "Generated",
  },
  {
    id: 2,
    student: "Priya Patel",
    class: "8",
    section: "B",
    certificate: "Sports Achievement",
    issueDate: "2026-05-18",
    generatedBy: "Principal",
    status: "Generated",
  },
  {
    id: 3,
    student: "Rohit Mehta",
    class: "5",
    section: "C",
    certificate: "Quiz Winner",
    issueDate: "2026-05-15",
    generatedBy: "Admin",
    status: "Pending",
  },
  {
    id: 4,
    student: "Sneha Gupta",
    class: "7",
    section: "A",
    certificate: "Leadership Award",
    issueDate: "2026-05-10",
    generatedBy: "Coordinator",
    status: "Generated",
  },
];

export default function GenerateCertificate() {
  const [search, setSearch] = useState("");

  const [filters, setFilters] = useState({
    class: "",
    section: "",
    certificate: "",
    status: "",
  });

  const filteredCertificates = useMemo(() => {
    return certificateData.filter((item) => {
      if (filters.class && item.class !== filters.class) return false;

      if (filters.section && item.section !== filters.section) return false;

      if (filters.certificate && item.certificate !== filters.certificate)
        return false;

      if (filters.status && item.status !== filters.status) return false;

      if (search && !item.student.toLowerCase().includes(search.toLowerCase()))
        return false;

      return true;
    });
  }, [search, filters]);

  const resetFilters = () => {
    setFilters({
      class: "",
      section: "",
      certificate: "",
      status: "",
    });

    setSearch("");
  };

  return (
    <div className="min-h-screen bg-[#f4f7fb] p-4 md:p-6 overflow-x-hidden">
      {/* Header */}
      <div className="bg-white rounded-3xl border border-gray-100 shadow-sm p-6 mb-6">
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-3xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white flex items-center justify-center shadow-xl">
              <Award size={30} />
            </div>

            <div>
              <h1 className="text-3xl font-bold text-gray-900">
                Generated Certificate
              </h1>

              <p className="text-gray-500 mt-1">
                Manage all generated student certificates
              </p>
            </div>
          </div>

          <div className="flex gap-3 flex-wrap">
            <button className="h-11 px-5 rounded-2xl bg-gray-900 text-white text-sm font-semibold flex items-center gap-2 hover:scale-105 transition-all">
              <Printer size={17} />
              Print All
            </button>

            <button className="h-11 px-5 rounded-2xl bg-blue-600 text-white text-sm font-semibold flex items-center gap-2 shadow-lg hover:bg-blue-700 transition-all">
              <Download size={17} />
              Export
            </button>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white rounded-3xl border border-gray-100 shadow-sm p-6 mb-6">
        <div className="flex items-center gap-3 mb-6">
          <div className="w-11 h-11 rounded-2xl bg-blue-100 flex items-center justify-center">
            <Filter className="text-blue-600" size={20} />
          </div>

          <div>
            <h2 className="text-lg font-bold text-gray-900">
              Filter Certificates
            </h2>

            <p className="text-sm text-gray-500">
              Select class, section and certificate type
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
          {/* Class */}
          <div>
            <label className="text-xs font-bold uppercase text-gray-500 mb-2 block">
              Class
            </label>

            <div className="relative">
              <GraduationCap
                size={16}
                className="absolute left-3 top-4 text-gray-400"
              />

              <select
                value={filters.class}
                onChange={(e) =>
                  setFilters({
                    ...filters,
                    class: e.target.value,
                    section: "",
                  })
                }
                className="w-full h-12 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 outline-none focus:ring-2 focus:ring-blue-100"
              >
                <option value="">Select Class</option>

                {Object.keys(schoolData).map((cls) => (
                  <option key={cls}>{cls}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Section */}
          <div>
            <label className="text-xs font-bold uppercase text-gray-500 mb-2 block">
              Section
            </label>

            <div className="relative">
              <Users
                size={16}
                className="absolute left-3 top-4 text-gray-400"
              />

              <select
                value={filters.section}
                onChange={(e) =>
                  setFilters({
                    ...filters,
                    section: e.target.value,
                  })
                }
                className="w-full h-12 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 outline-none focus:ring-2 focus:ring-blue-100"
              >
                <option value="">Select Section</option>

                {(schoolData[filters.class]?.sections || []).map((sec) => (
                  <option key={sec}>{sec}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Certificate */}
          <div>
            <label className="text-xs font-bold uppercase text-gray-500 mb-2 block">
              Certificate
            </label>

            <div className="relative">
              <FileBadge2
                size={16}
                className="absolute left-3 top-4 text-gray-400"
              />

              <select
                value={filters.certificate}
                onChange={(e) =>
                  setFilters({
                    ...filters,
                    certificate: e.target.value,
                  })
                }
                className="w-full h-12 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 outline-none focus:ring-2 focus:ring-blue-100"
              >
                <option value="">Select Certificate</option>

                {certificateTypes.map((cert) => (
                  <option key={cert}>{cert}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Status */}
          <div>
            <label className="text-xs font-bold uppercase text-gray-500 mb-2 block">
              Status
            </label>

            <div className="relative">
              <CheckCircle2
                size={16}
                className="absolute left-3 top-4 text-gray-400"
              />

              <select
                value={filters.status}
                onChange={(e) =>
                  setFilters({
                    ...filters,
                    status: e.target.value,
                  })
                }
                className="w-full h-12 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 outline-none focus:ring-2 focus:ring-blue-100"
              >
                <option value="">Select Status</option>
                <option>Generated</option>
                <option>Pending</option>
              </select>
            </div>
          </div>

          {/* Search */}
          <div>
            <label className="text-xs font-bold uppercase text-gray-500 mb-2 block">
              Search Student
            </label>

            <div className="relative">
              <Search
                size={16}
                className="absolute left-3 top-4 text-gray-400"
              />

              <input
                type="text"
                placeholder="Search student..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="w-full h-12 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 outline-none focus:ring-2 focus:ring-blue-100"
              />
            </div>
          </div>
        </div>

        <div className="flex justify-end mt-5">
          <button
            onClick={resetFilters}
            className="h-11 px-5 rounded-2xl border border-gray-200 bg-white text-gray-600 text-sm font-semibold flex items-center gap-2 hover:bg-gray-50 transition-all"
          >
            <RotateCcw size={16} />
            Reset Filters
          </button>
        </div>
      </div>

      {/* Table */}
      <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
        <div className="p-6 border-b border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h2 className="text-xl font-bold text-gray-900">
              Generated Certificates
            </h2>

            <p className="text-sm text-gray-500 mt-1">
              {filteredCertificates.length} certificates found
            </p>
          </div>
        </div>

        {/* Mobile Cards */}
        <div className="block xl:hidden p-4 space-y-4">
          {filteredCertificates.map((item) => (
            <div
              key={item.id}
              className="border border-gray-200 rounded-3xl p-5"
            >
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h3 className="font-bold text-lg text-gray-900">
                    {item.student}
                  </h3>

                  <p className="text-sm text-gray-500 mt-1">
                    Class {item.class} ({item.section})
                  </p>
                </div>

                <span
                  className={`px-3 py-1 rounded-full text-xs font-bold ${
                    item.status === "Generated"
                      ? "bg-green-100 text-green-700"
                      : "bg-orange-100 text-orange-600"
                  }`}
                >
                  {item.status}
                </span>
              </div>

              <div className="grid grid-cols-2 gap-4 mt-5">
                <div>
                  <p className="text-xs text-gray-400">Certificate</p>

                  <p className="font-semibold text-sm mt-1">
                    {item.certificate}
                  </p>
                </div>

                <div>
                  <p className="text-xs text-gray-400">Issue Date</p>

                  <p className="font-semibold text-sm mt-1">{item.issueDate}</p>
                </div>

                <div>
                  <p className="text-xs text-gray-400">Generated By</p>

                  <p className="font-semibold text-sm mt-1">
                    {item.generatedBy}
                  </p>
                </div>
              </div>

              <div className="flex justify-end gap-3 mt-5">
                <button className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                  <Eye size={17} />
                </button>

                <button className="w-10 h-10 rounded-xl bg-green-50 text-green-600 flex items-center justify-center">
                  <Download size={17} />
                </button>

                <button className="w-10 h-10 rounded-xl bg-gray-900 text-white flex items-center justify-center">
                  <Printer size={17} />
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Desktop Table */}
        <div className="hidden xl:block overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                {[
                  "Student",
                  "Class",
                  "Certificate",
                  "Issue Date",
                  "Generated By",
                  "Status",
                  "Actions",
                ].map((head) => (
                  <th
                    key={head}
                    className="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500"
                  >
                    {head}
                  </th>
                ))}
              </tr>
            </thead>

            <tbody>
              {filteredCertificates.map((item) => (
                <tr
                  key={item.id}
                  className="border-b border-gray-100 hover:bg-blue-50/40 transition-all"
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-3">
                      <div className="w-11 h-11 rounded-2xl bg-blue-100 text-blue-700 font-bold flex items-center justify-center">
                        {item.student.charAt(0)}
                      </div>

                      <div>
                        <p className="font-bold text-gray-900">
                          {item.student}
                        </p>

                        <p className="text-xs text-gray-400">
                          Student ID #{item.id}
                        </p>
                      </div>
                    </div>
                  </td>

                  <td className="px-6 py-5 text-sm font-medium text-gray-700">
                    {item.class} ({item.section})
                  </td>

                  <td className="px-6 py-5">
                    <span className="px-3 py-1 rounded-xl bg-indigo-50 text-indigo-700 text-xs font-bold">
                      {item.certificate}
                    </span>
                  </td>

                  <td className="px-6 py-5 text-sm text-gray-600">
                    {item.issueDate}
                  </td>

                  <td className="px-6 py-5 text-sm text-gray-600">
                    {item.generatedBy}
                  </td>

                  <td className="px-6 py-5">
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-bold ${
                        item.status === "Generated"
                          ? "bg-green-100 text-green-700"
                          : "bg-orange-100 text-orange-600"
                      }`}
                    >
                      {item.status}
                    </span>
                  </td>

                  <td className="px-6 py-5">
                    <div className="flex gap-2">
                      <button className="w-9 h-9 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                        <Eye size={16} />
                      </button>

                      <button className="w-9 h-9 rounded-xl bg-green-50 text-green-600 flex items-center justify-center">
                        <Download size={16} />
                      </button>

                      <button className="w-9 h-9 rounded-xl bg-gray-900 text-white flex items-center justify-center">
                        <Printer size={16} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {filteredCertificates.length === 0 && (
          <div className="py-20 text-center">
            <Award className="mx-auto text-gray-200 mb-4" size={60} />

            <h3 className="text-xl font-bold text-gray-700">
              No Certificates Found
            </h3>

            <p className="text-gray-400 mt-2">
              Try changing filters or search.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}
