"use client";
import { useState, useEffect } from "react";
import {
  Plus,
  Edit3,
  Trash2,
  ShieldAlert,
  ShieldCheck,
  Lock,
  Unlock,
  AlertTriangle,
  Users,
  Calendar,
} from "lucide-react";
import { format, addDays } from "date-fns";
import Modal from "./ui/Modal";
import Badge from "./ui/Badge";
import { cn } from "@/lib/utils";

interface Rule {
  id: number;
  orgNodeId: number | null;
  shiftType: string | null;
  dayOfWeek: number | null;
  minOfficers: number;
  minSupervisors: number;
  allowSupervisorOverride: boolean;
  allowAdminOverride: boolean;
  notes: string | null;
  isActive: boolean;
}

interface OrgNode {
  id: number;
  name: string;
  type: string;
  color: string | null;
}

interface Coverage {
  date: string;
  orgNodeId: number;
  orgNodeName: string;
  shiftType: string;
  available: number;
  required: number;
  short: number;
}

interface Props {
  rules: Rule[];
  orgNodes: OrgNode[];
  departmentId: number;
  isAdmin: boolean;
  onUpdate: () => void;
}

const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const SHIFT_TYPES = ["day", "evening", "night", "custom"];

export default function MinStaffingManager({ rules, orgNodes, departmentId, isAdmin, onUpdate }: Props) {
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState<Rule | null>(null);
  const [coverage, setCoverage] = useState<Coverage[]>([]);
  const [loadingCoverage, setLoadingCoverage] = useState(false);

  const empty = {
    orgNodeId: null as number | null,
    shiftType: null as string | null,
    dayOfWeek: null as number | null,
    minOfficers: 4,
    minSupervisors: 1,
    allowSupervisorOverride: false,
    allowAdminOverride: true,
    notes: "",
    isActive: true,
  };
  const [form, setForm] = useState({ ...empty });

  const loadCoverage = async () => {
    setLoadingCoverage(true);
    try {
      const start = format(new Date(), "yyyy-MM-dd");
      const end = format(addDays(new Date(), 13), "yyyy-MM-dd");
      const res = await fetch(`/api/time-off/impact?startDate=${start}&endDate=${end}`);
      const data = await res.json();
      setCoverage(Array.isArray(data) ? data : []);
    } finally {
      setLoadingCoverage(false);
    }
  };

  useEffect(() => {
    loadCoverage();
  }, [rules]);

  const save = async () => {
    await fetch("/api/min-staffing", {
      method: editing ? "PUT" : "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(
        editing ? { ...form, id: editing.id, actorRole: "admin" } : { ...form, departmentId, actorRole: "admin" }
      ),
    });
    setShowModal(false);
    onUpdate();
  };

  const remove = async (id: number) => {
    if (!confirm("Delete this minimum staffing rule?")) return;
    await fetch(`/api/min-staffing?id=${id}&actorRole=admin`, { method: "DELETE" });
    onUpdate();
  };

  const shortfalls = coverage.filter((c) => c.short > 0);

  return (
    <div>
      {!isAdmin && (
        <div className="mb-4 flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-800 rounded-xl px-4 py-3 text-sm">
          <Lock size={16} />
          Minimum staffing is configured by administrators only. Supervisors can view these thresholds but cannot change them.
        </div>
      )}

      <div className="flex flex-wrap justify-between items-center gap-3 mb-5">
        <p className="text-sm text-slate-500 max-w-2xl">
          These floors are enforced automatically when leave is approved. Where a rule forbids supervisor override,
          supervisors are blocked outright and the request must be escalated.
        </p>
        <button
          onClick={() => {
            setEditing(null);
            setForm({ ...empty });
            setShowModal(true);
          }}
          disabled={!isAdmin}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-xl text-sm font-medium hover:bg-blue-700 disabled:opacity-40"
        >
          <Plus size={16} />
          Add Rule
        </button>
      </div>

      {/* Live shortfall warning */}
      {shortfalls.length > 0 && (
        <div className="mb-5 rounded-2xl border border-red-200 bg-red-50 p-4">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle size={16} className="text-red-500" />
            <h4 className="font-semibold text-red-800 text-sm">
              {shortfalls.length} shift{shortfalls.length !== 1 ? "s" : ""} below minimum in the next 14 days
            </h4>
          </div>
          <div className="flex flex-wrap gap-2">
            {shortfalls.slice(0, 12).map((c, i) => (
              <div key={i} className="bg-white border border-red-200 rounded-lg px-2.5 py-1.5 text-xs">
                <span className="font-medium text-slate-700">{format(new Date(c.date + "T00:00:00"), "MMM d")}</span>
                <span className="text-slate-400 mx-1">·</span>
                <span className="text-slate-600">{c.orgNodeName}</span>
                <span className="text-slate-400 mx-1">·</span>
                <span className="capitalize text-slate-500">{c.shiftType}</span>
                <span className="ml-1.5 font-bold text-red-600">
                  {c.available}/{c.required}
                </span>
              </div>
            ))}
            {shortfalls.length > 12 && (
              <span className="text-xs text-red-600 self-center">+{shortfalls.length - 12} more</span>
            )}
          </div>
        </div>
      )}

      {/* Rules */}
      <div className="space-y-3">
        {rules.length === 0 && (
          <div className="text-center py-12 border-2 border-dashed border-slate-200 rounded-2xl text-slate-400">
            <ShieldAlert size={36} className="mx-auto mb-3 opacity-30" />
            <p className="font-medium">No minimum staffing rules</p>
            <p className="text-sm">Without a rule, leave approvals are unrestricted.</p>
          </div>
        )}

        {rules.map((r) => {
          const node = orgNodes.find((n) => n.id === r.orgNodeId);
          return (
            <div
              key={r.id}
              className={cn(
                "rounded-2xl border bg-white p-4 flex flex-wrap items-center gap-4",
                r.isActive ? "border-slate-200" : "border-slate-200 opacity-60"
              )}
            >
              <div
                className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0"
                style={{
                  backgroundColor: r.allowSupervisorOverride ? "#F59E0B18" : "#EF444418",
                  color: r.allowSupervisorOverride ? "#F59E0B" : "#EF4444",
                }}
              >
                {r.allowSupervisorOverride ? <Unlock size={20} /> : <Lock size={20} />}
              </div>

              <div className="flex-1 min-w-[220px]">
                <div className="flex items-center gap-2 flex-wrap mb-1">
                  <span className="font-bold text-slate-800">
                    {node ? node.name : "All units (department-wide)"}
                  </span>
                  <Badge color={node?.color ?? "#64748B"}>
                    {r.shiftType ? `${r.shiftType} shift` : "every shift"}
                  </Badge>
                  {r.dayOfWeek !== null && <Badge color="#8B5CF6">{DOW[r.dayOfWeek]}</Badge>}
                  {!r.isActive && <Badge color="#94A3B8">Inactive</Badge>}
                </div>
                <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-slate-600">
                  <span className="flex items-center gap-1.5">
                    <Users size={14} className="text-slate-400" />
                    Min <strong>{r.minOfficers}</strong> officers
                  </span>
                  {r.minSupervisors > 0 && (
                    <span className="flex items-center gap-1.5">
                      <ShieldCheck size={14} className="text-slate-400" />
                      Min <strong>{r.minSupervisors}</strong> supervisor{r.minSupervisors !== 1 ? "s" : ""}
                    </span>
                  )}
                </div>
                <div className="flex flex-wrap gap-2 mt-2">
                  <span
                    className={cn(
                      "text-xs px-2 py-0.5 rounded-full font-medium",
                      r.allowSupervisorOverride ? "bg-amber-100 text-amber-700" : "bg-red-100 text-red-700"
                    )}
                  >
                    {r.allowSupervisorOverride ? "Supervisor may override" : "Supervisor override blocked"}
                  </span>
                  <span
                    className={cn(
                      "text-xs px-2 py-0.5 rounded-full font-medium",
                      r.allowAdminOverride ? "bg-blue-100 text-blue-700" : "bg-slate-200 text-slate-600"
                    )}
                  >
                    {r.allowAdminOverride ? "Admin may override with justification" : "Hard floor — nobody may override"}
                  </span>
                </div>
                {r.notes && <p className="text-xs text-slate-400 mt-1.5 italic">{r.notes}</p>}
              </div>

              <div className="flex gap-2">
                <button
                  onClick={() => {
                    setEditing(r);
                    setForm({
                      orgNodeId: r.orgNodeId,
                      shiftType: r.shiftType,
                      dayOfWeek: r.dayOfWeek,
                      minOfficers: r.minOfficers,
                      minSupervisors: r.minSupervisors,
                      allowSupervisorOverride: r.allowSupervisorOverride,
                      allowAdminOverride: r.allowAdminOverride,
                      notes: r.notes ?? "",
                      isActive: r.isActive,
                    });
                    setShowModal(true);
                  }}
                  disabled={!isAdmin}
                  className="p-2 rounded-xl bg-slate-50 text-slate-500 hover:bg-slate-100 disabled:opacity-40"
                >
                  <Edit3 size={16} />
                </button>
                <button
                  onClick={() => remove(r.id)}
                  disabled={!isAdmin}
                  className="p-2 rounded-xl bg-red-50 text-red-400 hover:bg-red-100 disabled:opacity-40"
                >
                  <Trash2 size={16} />
                </button>
              </div>
            </div>
          );
        })}
      </div>

      {/* Editor */}
      <Modal isOpen={showModal} onClose={() => setShowModal(false)} title={editing ? "Edit Staffing Rule" : "New Staffing Rule"} size="lg">
        <div className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Applies to</label>
              <select
                value={form.orgNodeId ?? ""}
                onChange={(e) => setForm({ ...form, orgNodeId: e.target.value ? parseInt(e.target.value) : null })}
                className="w-full border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">All units (department-wide)</option>
                {orgNodes.map((n) => (
                  <option key={n.id} value={n.id}>
                    {n.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Shift</label>
              <select
                value={form.shiftType ?? ""}
                onChange={(e) => setForm({ ...form, shiftType: e.target.value || null })}
                className="w-full border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">Every shift</option>
                {SHIFT_TYPES.map((s) => (
                  <option key={s} value={s}>
                    {s.charAt(0).toUpperCase() + s.slice(1)}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Day of week</label>
              <select
                value={form.dayOfWeek ?? ""}
                onChange={(e) => setForm({ ...form, dayOfWeek: e.target.value === "" ? null : parseInt(e.target.value) })}
                className="w-full border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">Every day</option>
                {DOW.map((d, i) => (
                  <option key={d} value={i}>
                    {d}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Minimum officers on duty</label>
              <input
                type="number"
                min={0}
                value={form.minOfficers}
                onChange={(e) => setForm({ ...form, minOfficers: Math.max(0, parseInt(e.target.value) || 0) })}
                className="w-full border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Minimum supervisors</label>
              <input
                type="number"
                min={0}
                value={form.minSupervisors}
                onChange={(e) => setForm({ ...form, minSupervisors: Math.max(0, parseInt(e.target.value) || 0) })}
                className="w-full border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>

          <div className="rounded-xl border border-slate-200 p-4 space-y-3">
            <p className="text-sm font-semibold text-slate-700">Override authority</p>
            <label className="flex items-start gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={form.allowSupervisorOverride}
                onChange={(e) => setForm({ ...form, allowSupervisorOverride: e.target.checked })}
                className="w-4 h-4 mt-0.5 rounded border-slate-300 text-blue-600"
              />
              <span className="text-sm text-slate-700">
                Allow <strong>supervisors</strong> to approve leave that breaches this floor
                <span className="block text-xs text-slate-400">
                  Leave unchecked (recommended) so minimum staffing always wins over supervisor discretion.
                </span>
              </span>
            </label>
            <label className="flex items-start gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={form.allowAdminOverride}
                onChange={(e) => setForm({ ...form, allowAdminOverride: e.target.checked })}
                className="w-4 h-4 mt-0.5 rounded border-slate-300 text-blue-600"
              />
              <span className="text-sm text-slate-700">
                Allow <strong>administrators</strong> to force approval with written justification
                <span className="block text-xs text-slate-400">
                  Unchecking makes this an absolute floor that nobody can breach.
                </span>
              </span>
            </label>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={form.isActive}
                onChange={(e) => setForm({ ...form, isActive: e.target.checked })}
                className="w-4 h-4 rounded border-slate-300 text-blue-600"
              />
              <span className="text-sm text-slate-700">Rule active</span>
            </label>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Notes</label>
            <textarea
              rows={2}
              value={form.notes}
              onChange={(e) => setForm({ ...form, notes: e.target.value })}
              placeholder="e.g., Per collective bargaining agreement §14.2"
              className="w-full border border-slate-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div className="flex gap-3">
            <button onClick={save} className="flex-1 py-2.5 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700">
              {editing ? "Save Rule" : "Create Rule"}
            </button>
            <button onClick={() => setShowModal(false)} className="px-4 py-2.5 border border-slate-200 rounded-xl text-slate-600 hover:bg-slate-50">
              Cancel
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}