"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

type Employee = { id: string; employeeCode: string; user: { name: string } };
type Assignment = { employeeId: string; employee: { employeeCode: string; user: { name: string } } };

export default function GeofenceAssignmentPanel({
  geofenceId,
  initialAssignments,
}: {
  geofenceId: string;
  initialAssignments: Assignment[];
}) {
  const router = useRouter();
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [selected, setSelected] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    fetch("/api/employees")
      .then((r) => r.json())
      .then((d) => setEmployees(d.employees ?? []))
      .catch(() => {});
  }, []);

  const assignedIds = new Set(initialAssignments.map((a) => a.employeeId));
  const available = employees.filter((e) => !assignedIds.has(e.id));

  async function assign() {
    if (!selected) return;
    setBusy(true);
    try {
      await fetch(`/api/geofences/${geofenceId}/assign`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ employeeId: selected }),
      });
      setSelected("");
      router.refresh();
    } finally {
      setBusy(false);
    }
  }

  async function unassign(employeeId: string) {
    setBusy(true);
    try {
      await fetch(`/api/geofences/${geofenceId}/assign`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ employeeId }),
      });
      router.refresh();
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="rounded-xl border border-slate-800 bg-slate-900 p-5">
      <h2 className="text-lg font-medium mb-3">Assigned employees</h2>
      <div className="space-y-2 mb-4">
        {initialAssignments.map((a) => (
          <div key={a.employeeId} className="flex items-center justify-between text-sm">
            <span>
              {a.employee.user.name} ({a.employee.employeeCode})
            </span>
            <button disabled={busy} onClick={() => unassign(a.employeeId)} className="text-red-400 hover:text-red-300 text-xs">
              Remove
            </button>
          </div>
        ))}
        {initialAssignments.length === 0 && <p className="text-sm text-slate-500">No employees assigned yet.</p>}
      </div>
      <div className="flex gap-2">
        <select
          value={selected}
          onChange={(e) => setSelected(e.target.value)}
          className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-slate-100"
        >
          <option value="">Select employee…</option>
          {available.map((e) => (
            <option key={e.id} value={e.id}>
              {e.user.name} ({e.employeeCode})
            </option>
          ))}
        </select>
        <button
          disabled={busy || !selected}
          onClick={assign}
          className="rounded-md bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-medium px-4 py-2"
        >
          Assign
        </button>
      </div>
    </div>
  );
}