"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import {
  AlertCircle,
  Building2,
  CalendarDays,
  CheckCircle2,
  Clock3,
  Moon,
  Plus,
  RefreshCw,
  Shield,
  Sun,
  UserCheck,
  UserPlus,
  Users,
  X,
} from "lucide-react";

interface Template {
  id: number;
  name: string;
  scheduleType: string;
  description: string;
  pattern: any;
  isSystem: boolean;
}

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  jobTitle: string;
  department?: { name: string } | null;
}

interface Assignment {
  id: number;
  employeeId: number;
  templateId: number;
  squadId?: number | null;
  unitName: string;
  startDate: string;
  endDate: string | null;
  status: string;
  employee: Employee | null;
  template: Template | null;
}

interface StaffingRule {
  id: number;
  squadId: number;
  shiftCode: string;
  minimumStaff: number;
  effectiveDate: string;
  endDate: string | null;
}

interface Squad {
  id: number;
  name: string;
  unitType: string;
  description: string;
  department: { name: string } | null;
  manager: Employee | null;
  members: Array<{ id: number; employeeId: number; role: string; employee: Employee | null }>;
  staffingRules: StaffingRule[];
}

type SchedulingSetting = {
  enabled: boolean;
  lawEnforcementTemplates: boolean;
  overtimeTracking: boolean;
  shiftSwapRequests: boolean;
  minStaffingAlerts: boolean;
  canManage: boolean;
};

const colorMap: Record<string, string> = {
  blue: "bg-blue-100 text-blue-800 border-blue-200",
  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
  teal: "bg-teal-100 text-teal-800 border-teal-200",
  gray: "bg-gray-100 text-gray-500 border-gray-200",
};

function shiftForDate(assignment: Assignment, date: Date) {
  const template = assignment.template;
  if (!template) return null;
  const pattern = template.pattern || {};
  const start = new Date(`${assignment.startDate}T00:00:00`);
  const diffDays = Math.floor((date.getTime() - start.getTime()) / 86400000);
  if (diffDays < 0) return null;
  const cycle = Number(pattern.cycleDays || pattern.pattern?.length || 7);
  const idx = ((diffDays % cycle) + cycle) % cycle;
  const code = pattern.pattern?.[idx] || "O";
  const legend = pattern.legend?.[code] || { label: "Off", color: "gray" };
  return { code, ...legend };
}

function nextDays(days = 14) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return Array.from({ length: days }, (_, i) => new Date(today.getTime() + i * 86400000));
}

export default function SchedulingPage() {
  const [setting, setSetting] = useState<SchedulingSetting | null>(null);
  const [templates, setTemplates] = useState<Template[]>([]);
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [assignments, setAssignments] = useState<Assignment[]>([]);
  const [squads, setSquads] = useState<Squad[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [notice, setNotice] = useState("");
  const [error, setError] = useState("");
  const [showAssignModal, setShowAssignModal] = useState(false);
  const [showSquadModal, setShowSquadModal] = useState(false);
  const [showSquadScheduleModal, setShowSquadScheduleModal] = useState(false);
  const [selectedSquad, setSelectedSquad] = useState<Squad | null>(null);
  const [newSquad, setNewSquad] = useState({ name: "", unitType: "patrol", departmentId: "", managerEmployeeId: "", description: "", memberIds: [] as number[] });
  const [squadSchedule, setSquadSchedule] = useState({ templateId: "", startDate: new Date().toISOString().slice(0, 10), endDate: "", minimumStaff: 1, shiftCode: "", notes: "" });
  const [newAssignment, setNewAssignment] = useState({
    employeeId: "",
    templateId: "",
    unitName: "",
    startDate: new Date().toISOString().slice(0, 10),
    endDate: "",
    notes: "",
  });

  async function loadAll() {
    setLoading(true);
    setError("");
    try {
      const [settingRes, schedRes] = await Promise.all([
        fetch("/api/settings/scheduling"),
        fetch("/api/scheduling"),
      ]);
      const [settingData, schedData] = await Promise.all([settingRes.json(), schedRes.json()]);
      if (settingRes.ok) setSetting(settingData);
      if (schedRes.ok) {
        setTemplates(schedData.templates || []);
        setEmployees(schedData.employees || []);
        setAssignments(schedData.assignments || []);
        setSquads(schedData.squads || []);
        if (!newAssignment.employeeId && schedData.employees?.length) setNewAssignment((p) => ({ ...p, employeeId: String(schedData.employees[0].id) }));
        if (!newAssignment.templateId && schedData.templates?.length) setNewAssignment((p) => ({ ...p, templateId: String(schedData.templates[0].id) }));
      }
    } catch {
      setError("Unable to load scheduling module.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { loadAll(); }, []);

  async function toggleScheduling(enabled: boolean) {
    if (!setting) return;
    setSaving(true);
    setError("");
    try {
      const res = await fetch("/api/settings/scheduling", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...setting, enabled }),
      });
      const data = await res.json();
      if (res.ok) {
        setSetting(data);
        setNotice(enabled ? "Scheduling module enabled." : "Scheduling module disabled.");
        window.dispatchEvent(new Event("scheduling_setting_updated"));
      } else setError(data.error || "Unable to change scheduling setting.");
    } catch { setError("Network error updating scheduling module."); }
    finally { setSaving(false); }
  }

  async function createAssignment() {
    setSaving(true);
    setError("");
    try {
      const res = await fetch("/api/scheduling", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(newAssignment),
      });
      const data = await res.json();
      if (res.ok) {
        setNotice("Schedule assignment created.");
        setShowAssignModal(false);
        await loadAll();
      } else setError(data.error || "Unable to assign schedule.");
    } catch { setError("Network error assigning schedule."); }
    finally { setSaving(false); }
  }

  async function createSquad() {
    if (!newSquad.name || !newSquad.memberIds.length) {
      setError("Squad name and at least one member are required.");
      return;
    }
    setSaving(true);
    setError("");
    try {
      const res = await fetch("/api/scheduling/squads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(newSquad),
      });
      const data = await res.json();
      if (res.ok) {
        setNotice(`${data.name} created with ${newSquad.memberIds.length} member(s).`);
        setShowSquadModal(false);
        setNewSquad({ name: "", unitType: "patrol", departmentId: "", managerEmployeeId: "", description: "", memberIds: [] });
        await loadAll();
      } else setError(data.error || "Unable to create squad.");
    } catch { setError("Network error creating squad."); }
    finally { setSaving(false); }
  }

  function openSquadSchedule(squad: Squad) {
    const current = assignments.find((a) => a.squadId === squad.id && a.status === "active");
    const rule = squad.staffingRules[0];
    setSelectedSquad(squad);
    setSquadSchedule({
      templateId: current?.templateId ? String(current.templateId) : templates[0]?.id ? String(templates[0].id) : "",
      startDate: current?.startDate || new Date().toISOString().slice(0, 10),
      endDate: current?.endDate || "",
      minimumStaff: rule?.minimumStaff || 1,
      shiftCode: rule?.shiftCode || "",
      notes: "",
    });
    setShowSquadScheduleModal(true);
  }

  async function assignSquadSchedule() {
    if (!selectedSquad || !squadSchedule.templateId) return;
    setSaving(true);
    setError("");
    try {
      const res = await fetch(`/api/scheduling/squads/${selectedSquad.id}/assign`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(squadSchedule),
      });
      const data = await res.json();
      if (res.ok) {
        setNotice(`${data.template.name} automatically assigned to all ${data.assignmentsCreated} member(s) of ${selectedSquad.name}. Minimum staffing set to ${squadSchedule.minimumStaff}.`);
        setShowSquadScheduleModal(false);
        await loadAll();
      } else setError(data.error || "Unable to assign squad schedule.");
    } catch { setError("Network error assigning squad schedule."); }
    finally { setSaving(false); }
  }

  function toggleSquadMember(employeeId: number) {
    setNewSquad((prev) => ({
      ...prev,
      memberIds: prev.memberIds.includes(employeeId)
        ? prev.memberIds.filter((id) => id !== employeeId)
        : [...prev.memberIds, employeeId],
    }));
  }

  const days = useMemo(() => nextDays(14), []);
  const activeAssignments = assignments.filter((a) => a.status === "active");

  if (loading) return <div className="h-full flex items-center justify-center"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" /></div>;

  if (!setting?.enabled) {
    return (
      <div className="p-6 max-w-4xl mx-auto">
        <div className="bg-gradient-to-br from-slate-900 via-blue-950 to-indigo-950 text-white rounded-3xl p-10 shadow-2xl border border-white/10">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 bg-white/10 rounded-full text-xs font-bold uppercase tracking-wider mb-6">
            <CalendarDays className="w-4 h-4" /> Optional Scheduling Module
          </div>
          <h1 className="text-3xl md:text-5xl font-black">Workforce & Public Safety Scheduling</h1>
          <p className="text-blue-100 mt-4 max-w-2xl text-lg leading-relaxed">
            Enable advanced schedule management for standard business schedules, rotating shifts, and law-enforcement patterns such as Pitman 2-2-3 day/night patrol rotations.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8">
            <div className="p-4 bg-white/5 border border-white/10 rounded-2xl"><Shield className="w-6 h-6 text-blue-300 mb-2" /><p className="font-bold">Law Enforcement</p><p className="text-xs text-blue-200">Pitman, rotating patrols, units and squads.</p></div>
            <div className="p-4 bg-white/5 border border-white/10 rounded-2xl"><Clock3 className="w-6 h-6 text-emerald-300 mb-2" /><p className="font-bold">All Shift Types</p><p className="text-xs text-blue-200">5/8, 4/10, 12-hour, compressed, custom.</p></div>
            <div className="p-4 bg-white/5 border border-white/10 rounded-2xl"><Users className="w-6 h-6 text-purple-300 mb-2" /><p className="font-bold">Teams & Units</p><p className="text-xs text-blue-200">Assign employees to squads, teams, and divisions.</p></div>
          </div>
          <div className="mt-8 pt-6 border-t border-white/10 flex items-center justify-between gap-4 flex-wrap">
            {setting?.canManage ? (
              <button onClick={() => toggleScheduling(true)} disabled={saving} className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-xl font-bold shadow-lg disabled:opacity-50">
                {saving ? "Enabling..." : "Enable Scheduling Module"}
              </button>
            ) : (
              <p className="text-sm text-amber-200">Only a super administrator can turn on Scheduling.</p>
            )}
            <Link href="/settings" className="text-sm text-blue-200 hover:text-white underline">Manage in Settings</Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 space-y-6 max-w-[1500px] mx-auto">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
        <div className="flex items-center gap-3">
          <div className="p-3 bg-blue-100 text-blue-700 rounded-2xl"><CalendarDays className="w-6 h-6" /></div>
          <div>
            <h1 className="text-2xl font-black text-gray-900">Scheduling</h1>
            <p className="text-sm text-gray-500">Manage employee shifts, law-enforcement Pitman rotations, squads, units, and workforce schedules.</p>
          </div>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <button onClick={loadAll} className="px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl text-sm font-bold flex items-center gap-2"><RefreshCw className="w-4 h-4" /> Refresh</button>
          <button onClick={() => setShowSquadModal(true)} className="px-4 py-2.5 bg-white border border-blue-200 hover:bg-blue-50 text-blue-700 rounded-xl text-sm font-bold flex items-center gap-2 shadow-sm"><UserPlus className="w-4 h-4" /> Create Squad</button>
          <button onClick={() => setShowAssignModal(true)} className="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-bold flex items-center gap-2 shadow-sm"><Plus className="w-4 h-4" /> Assign Individual</button>
        </div>
      </div>

      {notice && <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-xl text-sm font-bold text-emerald-800 flex justify-between"><span>{notice}</span><button onClick={() => setNotice("")}><X className="w-4 h-4" /></button></div>}
      {error && <div className="p-3 bg-red-50 border border-red-200 rounded-xl text-sm font-semibold text-red-700 flex justify-between"><span>{error}</span><button onClick={() => setError("")}><X className="w-4 h-4" /></button></div>}

      {/* Squads and automatic squad schedules */}
      <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-5 space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="font-bold text-gray-900 text-lg">Squads, Teams & Minimum Staffing</h2>
            <p className="text-xs text-gray-500">Assign a day/night template once and H.R. Vista automatically schedules every squad member. Staffing rules enforce leave eligibility.</p>
          </div>
          <button onClick={() => setShowSquadModal(true)} className="px-3.5 py-2 bg-blue-50 text-blue-700 border border-blue-200 rounded-xl text-xs font-bold flex items-center gap-1.5"><UserPlus className="w-4 h-4" /> New Squad</button>
        </div>
        {squads.length === 0 ? (
          <div className="p-8 text-center border border-dashed border-gray-300 rounded-xl text-sm text-gray-400">No squads created yet.</div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            {squads.map((squad) => {
              const currentAssignment = assignments.find((a) => a.squadId === squad.id && a.status === "active");
              const rule = squad.staffingRules[0];
              return (
                <div key={squad.id} className="p-4 bg-slate-50 border border-slate-200 rounded-2xl space-y-3">
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <span className="text-[10px] uppercase font-extrabold px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full">{squad.unitType.replaceAll("_", " ")}</span>
                      <h3 className="font-bold text-gray-900 mt-1">{squad.name}</h3>
                      <p className="text-xs text-gray-500">{squad.department?.name || "No department"} · Manager: {squad.manager ? `${squad.manager.firstName} ${squad.manager.lastName}` : "Unassigned"}</p>
                    </div>
                    <Shield className="w-5 h-5 text-blue-600" />
                  </div>
                  <div className="grid grid-cols-3 gap-2 text-center text-xs">
                    <div className="bg-white border border-gray-200 rounded-lg p-2"><p className="font-black text-gray-900 text-lg">{squad.members.length}</p><p className="text-gray-500">Members</p></div>
                    <div className="bg-white border border-gray-200 rounded-lg p-2"><p className="font-black text-blue-700 text-lg">{rule?.minimumStaff || "—"}</p><p className="text-gray-500">Minimum</p></div>
                    <div className="bg-white border border-gray-200 rounded-lg p-2"><p className="font-black text-emerald-700 text-sm mt-1">{currentAssignment?.template?.scheduleType?.includes("pitman") ? "Pitman" : currentAssignment ? "Active" : "None"}</p><p className="text-gray-500 mt-1">Schedule</p></div>
                  </div>
                  {currentAssignment && <p className="text-xs font-medium text-blue-700 truncate">{currentAssignment.template?.name}</p>}
                  <div className="flex flex-wrap gap-1">{squad.members.slice(0, 5).map((member) => <span key={member.id} className="text-[10px] px-2 py-1 bg-white border border-gray-200 rounded-full">{member.employee?.firstName} {member.employee?.lastName}</span>)}{squad.members.length > 5 && <span className="text-[10px] px-2 py-1 text-gray-500">+{squad.members.length - 5}</span>}</div>
                  <button onClick={() => openSquadSchedule(squad)} className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded-xl transition-colors">Assign Shift & Minimum Staffing</button>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Template Library */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
        {templates.map((tpl) => (
          <div key={tpl.id} className="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm space-y-3">
            <div className="flex items-start justify-between gap-2">
              <div>
                <span className={`text-[10px] uppercase font-extrabold px-2 py-0.5 rounded-full ${tpl.scheduleType.includes("pitman") ? "bg-blue-100 text-blue-800" : "bg-gray-100 text-gray-700"}`}>{tpl.scheduleType.replaceAll("_", " ")}</span>
                <h3 className="font-bold text-gray-900 mt-2 leading-tight">{tpl.name}</h3>
              </div>
              {tpl.scheduleType.includes("pitman") ? <Shield className="w-5 h-5 text-blue-600" /> : <Clock3 className="w-5 h-5 text-gray-500" />}
            </div>
            <p className="text-xs text-gray-500 line-clamp-2">{tpl.description}</p>
            <div className="flex flex-wrap gap-1 pt-2 border-t border-gray-100">
              {(tpl.pattern?.pattern || []).slice(0, 14).map((code: string, i: number) => {
                const legend = tpl.pattern?.legend?.[code] || { label: "Off", color: "gray" };
                return <span key={i} className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${colorMap[legend.color] || colorMap.gray}`}>{code}</span>;
              })}
            </div>
          </div>
        ))}
      </div>

      {/* 14 day roster */}
      <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
        <div className="p-5 border-b border-gray-200 flex items-center justify-between">
          <div><h2 className="font-bold text-gray-900 text-lg">14-Day Schedule Board</h2><p className="text-xs text-gray-500">Displays assigned schedule templates projected from each employee's start date.</p></div>
          <span className="text-xs px-2.5 py-1 bg-blue-50 text-blue-700 rounded-full font-bold border border-blue-100">{activeAssignments.length} active assignments</span>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1100px] text-left text-xs">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="sticky left-0 bg-gray-50 px-4 py-3 w-64 z-10">Employee / Unit</th>
                {days.map((day) => <th key={day.toISOString()} className="px-3 py-3 text-center font-bold text-gray-600">{day.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}</th>)}
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {activeAssignments.length === 0 ? (
                <tr><td colSpan={15} className="text-center py-12 text-gray-400">No schedule assignments yet.</td></tr>
              ) : activeAssignments.map((assignment) => (
                <tr key={assignment.id} className="hover:bg-gray-50">
                  <td className="sticky left-0 bg-white px-4 py-3 z-10 border-r border-gray-100">
                    <div className="font-bold text-gray-900">{assignment.employee?.firstName} {assignment.employee?.lastName}</div>
                    <div className="text-[11px] text-gray-500 truncate">{assignment.employee?.jobTitle}</div>
                    <div className="text-[10px] font-bold text-blue-700 mt-1">{assignment.unitName || "Unassigned Unit"}</div>
                  </td>
                  {days.map((day) => {
                    const shift = shiftForDate(assignment, day);
                    const isOff = !shift || shift.code === "O";
                    const cls = isOff ? colorMap.gray : colorMap[shift.color] || colorMap.blue;
                    return (
                      <td key={day.toISOString()} className="px-2 py-3 text-center align-top">
                        <div className={`rounded-lg border p-2 min-h-[58px] flex flex-col justify-center ${cls}`}>
                          <span className="font-black text-sm">{shift?.code || "O"}</span>
                          <span className="text-[10px] leading-tight">{shift?.label || "Off"}</span>
                          {shift?.startTime && <span className="text-[9px] mt-1 opacity-80">{shift.startTime}-{shift.endTime}</span>}
                        </div>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Feature Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {[
          { label: "Law Enforcement Templates", enabled: setting.lawEnforcementTemplates, icon: Shield },
          { label: "Overtime Tracking", enabled: setting.overtimeTracking, icon: Clock3 },
          { label: "Shift Swap Requests", enabled: setting.shiftSwapRequests, icon: UserCheck },
          { label: "Minimum Staffing Alerts", enabled: setting.minStaffingAlerts, icon: AlertCircle },
        ].map((feature) => <div key={feature.label} className="bg-white rounded-2xl border border-gray-200 p-4 shadow-sm flex items-center gap-3"><feature.icon className={`w-5 h-5 ${feature.enabled ? "text-emerald-600" : "text-gray-300"}`} /><div><p className="font-bold text-sm text-gray-900">{feature.label}</p><p className="text-xs text-gray-500">{feature.enabled ? "Enabled" : "Disabled"}</p></div></div>)}
      </div>

      {showSquadModal && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="px-6 py-5 bg-blue-600 text-white flex justify-between items-center"><div><h2 className="font-bold text-lg">Create Squad / Team</h2><p className="text-xs text-blue-100">Members inherit the schedule assigned to this squad.</p></div><button onClick={() => setShowSquadModal(false)} className="p-2 text-blue-100 hover:text-white"><X className="w-5 h-5" /></button></div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-2 gap-4"><div><label className="block text-sm font-bold text-gray-700 mb-1">Squad Name</label><input value={newSquad.name} onChange={(e) => setNewSquad({ ...newSquad, name: e.target.value })} placeholder="Patrol A Squad" className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm" /></div><div><label className="block text-sm font-bold text-gray-700 mb-1">Unit Type</label><select value={newSquad.unitType} onChange={(e) => setNewSquad({ ...newSquad, unitType: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm"><option value="patrol">Law Enforcement Patrol</option><option value="dispatch">Dispatch</option><option value="corrections">Corrections</option><option value="fire_company">Fire Company</option><option value="office">Office Team</option><option value="team">General Team</option></select></div></div>
              <div><label className="block text-sm font-bold text-gray-700 mb-1">Squad Manager</label><select value={newSquad.managerEmployeeId} onChange={(e) => { const id = Number(e.target.value); setNewSquad({ ...newSquad, managerEmployeeId: e.target.value, memberIds: id && !newSquad.memberIds.includes(id) ? [...newSquad.memberIds, id] : newSquad.memberIds }); }} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm"><option value="">Unassigned</option>{employees.map((emp) => <option key={emp.id} value={emp.id}>{emp.firstName} {emp.lastName} — {emp.jobTitle}</option>)}</select></div>
              <div><label className="block text-sm font-bold text-gray-700 mb-2">Squad Members ({newSquad.memberIds.length} selected)</label><div className="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-60 overflow-y-auto p-2 bg-gray-50 rounded-xl border border-gray-200">{employees.map((emp) => <label key={emp.id} className={`flex items-center gap-2 p-2.5 bg-white border rounded-lg cursor-pointer ${newSquad.memberIds.includes(emp.id) ? "border-blue-400 bg-blue-50" : "border-gray-200"}`}><input type="checkbox" checked={newSquad.memberIds.includes(emp.id)} onChange={() => toggleSquadMember(emp.id)} className="rounded" /><div><p className="text-sm font-semibold text-gray-900">{emp.firstName} {emp.lastName}</p><p className="text-xs text-gray-500">{emp.jobTitle}</p></div></label>)}</div></div>
              <div><label className="block text-sm font-bold text-gray-700 mb-1">Description</label><textarea value={newSquad.description} onChange={(e) => setNewSquad({ ...newSquad, description: e.target.value })} rows={2} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm resize-none" /></div>
              <div className="pt-4 border-t border-gray-100 flex justify-end gap-3"><button onClick={() => setShowSquadModal(false)} className="px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-100 rounded-xl">Cancel</button><button onClick={createSquad} disabled={saving || !newSquad.name || !newSquad.memberIds.length} className="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm rounded-xl disabled:opacity-50">{saving ? "Creating..." : "Create Squad"}</button></div>
            </div>
          </div>
        </div>
      )}

      {showSquadScheduleModal && selectedSquad && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden">
            <div className="px-6 py-5 bg-slate-900 text-white flex justify-between items-center"><div><h2 className="font-bold text-lg">Assign Squad Shift</h2><p className="text-xs text-slate-300">{selectedSquad.name} · {selectedSquad.members.length} members</p></div><button onClick={() => setShowSquadScheduleModal(false)} className="p-2 text-slate-300 hover:text-white"><X className="w-5 h-5" /></button></div>
            <div className="p-6 space-y-4">
              <div><label className="block text-sm font-bold text-gray-700 mb-1">Day / Night / Schedule Pattern</label><select value={squadSchedule.templateId} onChange={(e) => setSquadSchedule({ ...squadSchedule, templateId: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm">{templates.map((tpl) => <option key={tpl.id} value={tpl.id}>{tpl.name}</option>)}</select><p className="text-xs text-gray-500 mt-1">This one selection is automatically assigned to every squad member.</p></div>
              <div className="grid grid-cols-2 gap-4"><div><label className="block text-sm font-bold text-gray-700 mb-1">Effective Start</label><input type="date" value={squadSchedule.startDate} onChange={(e) => setSquadSchedule({ ...squadSchedule, startDate: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm" /></div><div><label className="block text-sm font-bold text-gray-700 mb-1">End (optional)</label><input type="date" value={squadSchedule.endDate} onChange={(e) => setSquadSchedule({ ...squadSchedule, endDate: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm" /></div></div>
              <div className="p-4 bg-amber-50 border border-amber-200 rounded-xl"><label className="block text-sm font-bold text-amber-900 mb-1">Minimum On-Duty Staffing</label><input type="number" min="1" max={selectedSquad.members.length} value={squadSchedule.minimumStaff} onChange={(e) => setSquadSchedule({ ...squadSchedule, minimumStaff: Number(e.target.value) })} className="w-full px-3 py-2.5 border border-amber-300 rounded-xl text-sm font-bold" /><p className="text-xs text-amber-800 mt-1">Time off will be automatically denied if this request would leave fewer than {squadSchedule.minimumStaff} on-duty member(s) for the same shift.</p></div>
              <div className="pt-4 border-t border-gray-100 flex justify-end gap-3"><button onClick={() => setShowSquadScheduleModal(false)} className="px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-100 rounded-xl">Cancel</button><button onClick={assignSquadSchedule} disabled={saving || !squadSchedule.templateId} className="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm rounded-xl disabled:opacity-50">{saving ? "Assigning..." : `Assign to All ${selectedSquad.members.length} Members`}</button></div>
            </div>
          </div>
        </div>
      )}

      {showAssignModal && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden">
            <div className="px-6 py-5 bg-blue-600 text-white flex justify-between items-center"><h2 className="font-bold text-lg">Assign Schedule</h2><button onClick={() => setShowAssignModal(false)} className="p-2 text-blue-100 hover:text-white"><X className="w-5 h-5" /></button></div>
            <div className="p-6 space-y-4">
              <div><label className="block text-sm font-bold text-gray-700 mb-1">Employee</label><select value={newAssignment.employeeId} onChange={(e) => setNewAssignment({ ...newAssignment, employeeId: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm">{employees.map((emp) => <option key={emp.id} value={emp.id}>{emp.firstName} {emp.lastName} — {emp.jobTitle}</option>)}</select></div>
              <div><label className="block text-sm font-bold text-gray-700 mb-1">Schedule Template</label><select value={newAssignment.templateId} onChange={(e) => setNewAssignment({ ...newAssignment, templateId: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm">{templates.map((tpl) => <option key={tpl.id} value={tpl.id}>{tpl.name}</option>)}</select></div>
              <div><label className="block text-sm font-bold text-gray-700 mb-1">Unit / Squad / Team</label><input value={newAssignment.unitName} onChange={(e) => setNewAssignment({ ...newAssignment, unitName: e.target.value })} placeholder="e.g. Patrol A Squad" className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm" /></div>
              <div className="grid grid-cols-2 gap-4"><div><label className="block text-sm font-bold text-gray-700 mb-1">Start Date</label><input type="date" value={newAssignment.startDate} onChange={(e) => setNewAssignment({ ...newAssignment, startDate: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm" /></div><div><label className="block text-sm font-bold text-gray-700 mb-1">End Date</label><input type="date" value={newAssignment.endDate} onChange={(e) => setNewAssignment({ ...newAssignment, endDate: e.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-xl text-sm" /></div></div>
              <div className="pt-4 border-t border-gray-100 flex justify-end gap-3"><button onClick={() => setShowAssignModal(false)} className="px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-100 rounded-xl">Cancel</button><button onClick={createAssignment} disabled={saving || !newAssignment.employeeId || !newAssignment.templateId} className="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm rounded-xl disabled:opacity-50">{saving ? "Assigning..." : "Assign Schedule"}</button></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}