import { useMemo, useState } from "react";
import {
  IdCard,
  Search,
  Save,
  Upload,
  Eye,
  Download,
  User,
  Phone,
  MapPin,
  Calendar,
  Briefcase,
  Building2,
  QrCode,
  Palette,
  ShieldCheck,
  RefreshCcw,
  Settings2,
} from "lucide-react";

const designTypes = [
  "Classic Blue",
  "Modern Dark",
  "Gradient Purple",
  "Minimal White",
  "Corporate Style",
];

const departments = [
  "Administration",
  "Accounts",
  "Teaching",
  "Transport",
  "Library",
  "Sports",
  "Management",
];

const staffData = [
  {
    id: 1,
    name: "Rahul Sharma",
    staffId: "STF001",
    designation: "Math Teacher",
    department: "Teaching",
    fatherName: "Ramesh Sharma",
    motherName: "Sunita Sharma",
    joiningDate: "2021-06-12",
    dob: "1995-04-18",
    phone: "9876543210",
    address: "Bhopal, Madhya Pradesh",
    designType: "Classic Blue",
    qr: true,
  },
  {
    id: 2,
    name: "Neha Verma",
    staffId: "STF002",
    designation: "Principal",
    department: "Administration",
    fatherName: "Mahesh Verma",
    motherName: "Anita Verma",
    joiningDate: "2019-03-10",
    dob: "1990-08-11",
    phone: "9876501234",
    address: "Indore, Madhya Pradesh",
    designType: "Modern Dark",
    qr: true,
  },
];

const toggleFields = [
  "Staff ID",
  "Designation",
  "Department",
  "Father Name",
  "Mother Name",
  "Date Of Joining",
  "Current Address",
  "Phone",
  "Date Of Birth",
  "Design Type",
  "Barcode / QR Code",
];

export default function StaffIdCard() {
  const [search, setSearch] = useState("");
  const [selectedStaff, setSelectedStaff] = useState(staffData[0]);

  const [toggles, setToggles] = useState({
    "Staff ID": true,
    Designation: true,
    Department: true,
    "Father Name": false,
    "Mother Name": false,
    "Date Of Joining": true,
    "Current Address": true,
    Phone: true,
    "Date Of Birth": false,
    "Design Type": true,
    "Barcode / QR Code": true,
  });

  const filteredStaff = useMemo(() => {
    return staffData.filter(
      (s) =>
        s.name.toLowerCase().includes(search.toLowerCase()) ||
        s.staffId.toLowerCase().includes(search.toLowerCase()),
    );
  }, [search]);

  const handleToggle = (field) => {
    setToggles((prev) => ({
      ...prev,
      [field]: !prev[field],
    }));
  };

  return (
    <div className="min-h-screen bg-[#f4f7fb] p-3 sm:p-5 lg:p-6 overflow-hidden">
      {/* Header */}
      <div className="bg-gradient-to-r from-slate-900 via-blue-900 to-indigo-900 rounded-3xl p-5 sm:p-7 text-white shadow-2xl overflow-hidden relative">
        <div className="absolute right-0 top-0 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl" />

        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
          <div className="flex items-start gap-4">
            <div className="w-16 h-16 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center flex-shrink-0">
              <IdCard size={32} />
            </div>

            <div>
              <h1 className="text-2xl sm:text-3xl font-bold">Staff ID Card</h1>
              <p className="text-blue-100 mt-1 text-sm sm:text-base">
                Create & customize modern employee ID cards
              </p>
            </div>
          </div>

          <div className="flex flex-wrap gap-3">
            <button className="h-11 px-5 rounded-2xl bg-white text-slate-900 font-semibold flex items-center gap-2 hover:scale-[1.02] transition-all shadow-lg">
              <Download size={18} />
              Generate PDF
            </button>

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

      {/* Main Grid */}
      <div className="grid grid-cols-1 xl:grid-cols-[360px_minmax(0,1fr)] gap-6 mt-6">
        {/* Left Panel */}
        <div className="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden h-fit">
          <div className="p-5 border-b border-gray-100">
            <div className="flex items-center gap-3">
              <div className="w-11 h-11 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center">
                <Settings2 size={22} />
              </div>

              <div>
                <h2 className="font-bold text-lg text-gray-900">
                  Card Settings
                </h2>
                <p className="text-sm text-gray-400">
                  Customize visible fields
                </p>
              </div>
            </div>

            {/* Search */}
            <div className="relative mt-5">
              <Search
                size={18}
                className="absolute left-4 top-3.5 text-gray-400"
              />

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

            {/* Staff List */}
            <div className="mt-4 max-h-[240px] overflow-y-auto space-y-2 pr-1">
              {filteredStaff.map((staff) => (
                <button
                  key={staff.id}
                  onClick={() => setSelectedStaff(staff)}
                  className={`w-full p-3 rounded-2xl border transition-all text-left ${
                    selectedStaff.id === staff.id
                      ? "border-blue-500 bg-blue-50"
                      : "border-gray-100 hover:bg-gray-50"
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center font-bold">
                      {staff.name.charAt(0)}
                    </div>

                    <div className="min-w-0">
                      <h3 className="font-semibold text-sm text-gray-900 truncate">
                        {staff.name}
                      </h3>

                      <p className="text-xs text-gray-400 truncate">
                        {staff.staffId}
                      </p>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Toggle Fields */}
          <div className="p-5">
            <div className="flex items-center justify-between mb-5">
              <h3 className="font-bold text-gray-900">Visible Fields</h3>

              <button className="text-sm text-blue-600 flex items-center gap-1 font-medium">
                <RefreshCcw size={14} />
                Reset
              </button>
            </div>

            <div className="space-y-4">
              {toggleFields.map((field) => (
                <div
                  key={field}
                  className="flex items-center justify-between gap-3"
                >
                  <span className="text-sm font-medium text-gray-700">
                    {field}
                  </span>

                  <button
                    onClick={() => handleToggle(field)}
                    className={`w-12 h-6 rounded-full transition-all relative ${
                      toggles[field] ? "bg-blue-600" : "bg-gray-300"
                    }`}
                  >
                    <span
                      className={`absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-md transition-all ${
                        toggles[field] ? "left-6" : "left-0.5"
                      }`}
                    />
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Preview */}
        <div className="space-y-6 min-w-0">
          {/* Controls */}
          <div className="bg-white rounded-3xl p-5 border border-gray-100 shadow-sm">
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
              {/* Design */}
              <div>
                <label className="text-xs font-bold uppercase tracking-wider text-gray-500 mb-2 block">
                  Design Type
                </label>

                <div className="relative">
                  <Palette
                    size={17}
                    className="absolute left-3 top-3.5 text-gray-400"
                  />

                  <select className="w-full h-11 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-blue-100">
                    {designTypes.map((d) => (
                      <option key={d}>{d}</option>
                    ))}
                  </select>
                </div>
              </div>

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

                <div className="relative">
                  <Building2
                    size={17}
                    className="absolute left-3 top-3.5 text-gray-400"
                  />

                  <select className="w-full h-11 rounded-2xl border border-gray-200 bg-white pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-blue-100">
                    {departments.map((d) => (
                      <option key={d}>{d}</option>
                    ))}
                  </select>
                </div>
              </div>

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

                <button className="w-full h-11 rounded-2xl border border-dashed border-gray-300 bg-gray-50 text-sm font-medium text-gray-600 flex items-center justify-center gap-2 hover:bg-gray-100 transition-all">
                  <Upload size={16} />
                  Upload
                </button>
              </div>

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

                <button className="w-full h-11 rounded-2xl bg-blue-600 text-white font-semibold flex items-center justify-center gap-2 hover:bg-blue-700 transition-all">
                  <Eye size={17} />
                  Preview Card
                </button>
              </div>
            </div>
          </div>

          {/* ID Card Preview */}
          <div className="flex justify-center overflow-hidden">
            <div className="w-full max-w-[420px]">
              <div className="rounded-[32px] overflow-hidden shadow-2xl bg-white border border-gray-200">
                {/* Top */}
                <div className="bg-gradient-to-r from-blue-700 via-indigo-700 to-slate-900 px-6 py-7 text-white relative overflow-hidden">
                  <div className="absolute -right-10 -top-10 w-40 h-40 rounded-full bg-white/10" />
                  <div className="absolute -left-8 bottom-0 w-32 h-32 rounded-full bg-cyan-400/10" />

                  <div className="relative z-10 flex items-center gap-4">
                    <div className="w-20 h-20 rounded-3xl bg-white text-blue-700 flex items-center justify-center shadow-lg font-bold text-3xl">
                      S
                    </div>

                    <div className="min-w-0">
                      <h2 className="text-2xl font-bold truncate">
                        Demo High School
                      </h2>

                      <p className="text-blue-100 text-sm">
                        Staff Identity Card
                      </p>
                    </div>
                  </div>
                </div>

                {/* Middle */}
                <div className="px-6 py-7">
                  <div className="flex flex-col items-center">
                    <div className="w-28 h-28 rounded-3xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center text-5xl font-bold shadow-xl">
                      {selectedStaff.name.charAt(0)}
                    </div>

                    <h3 className="mt-4 text-2xl font-bold text-gray-900 text-center">
                      {selectedStaff.name}
                    </h3>

                    <p className="text-blue-600 font-semibold">
                      {selectedStaff.designation}
                    </p>
                  </div>

                  <div className="mt-7 space-y-3">
                    {toggles["Staff ID"] && (
                      <InfoRow
                        icon={ShieldCheck}
                        label="Staff ID"
                        value={selectedStaff.staffId}
                      />
                    )}

                    {toggles.Designation && (
                      <InfoRow
                        icon={Briefcase}
                        label="Designation"
                        value={selectedStaff.designation}
                      />
                    )}

                    {toggles.Department && (
                      <InfoRow
                        icon={Building2}
                        label="Department"
                        value={selectedStaff.department}
                      />
                    )}

                    {toggles.Phone && (
                      <InfoRow
                        icon={Phone}
                        label="Phone"
                        value={selectedStaff.phone}
                      />
                    )}

                    {toggles["Current Address"] && (
                      <InfoRow
                        icon={MapPin}
                        label="Address"
                        value={selectedStaff.address}
                      />
                    )}

                    {toggles["Date Of Joining"] && (
                      <InfoRow
                        icon={Calendar}
                        label="Joining"
                        value={selectedStaff.joiningDate}
                      />
                    )}

                    {toggles["Date Of Birth"] && (
                      <InfoRow
                        icon={User}
                        label="DOB"
                        value={selectedStaff.dob}
                      />
                    )}
                  </div>
                </div>

                {/* Footer */}
                <div className="border-t border-gray-100 px-6 py-5 bg-gray-50 flex items-center justify-between gap-4">
                  <div>
                    <p className="text-xs text-gray-400">
                      Authorized Signature
                    </p>

                    <div className="mt-2 w-24 h-[2px] bg-gray-400 rounded-full" />
                  </div>

                  {toggles["Barcode / QR Code"] && (
                    <div className="w-16 h-16 rounded-2xl bg-white border border-gray-200 flex items-center justify-center shadow-sm">
                      <QrCode className="text-gray-700" size={34} />
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function InfoRow({ icon: Icon, label, value }) {
  return (
    <div className="flex items-start gap-3 p-3 rounded-2xl bg-gray-50 border border-gray-100">
      <div className="w-10 h-10 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center flex-shrink-0">
        <Icon size={18} />
      </div>

      <div className="min-w-0">
        <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">
          {label}
        </p>

        <p className="text-sm font-semibold text-gray-800 break-words">
          {value}
        </p>
      </div>
    </div>
  );
}
