GRH/src/pages/meters/MetersModal.tsx

import type React from "react";
import { useEffect, useState } from "react";
import type { MeterInput } from "../../api/meters";
import { fetchConcentrators, type Concentrator } from "../../api/concentrators";

type Props = {
  editingId: string | null;

  form: MeterInput;
  setForm: React.Dispatch<React.SetStateAction<MeterInput>>;

  errors: Record<string, boolean>;
  setErrors: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;

  onClose: () => void;
  onSave: () => void | Promise<void>;
};

export default function MetersModal({
  editingId,
  form,
  setForm,
  errors,
  setErrors,
  onClose,
  onSave,
}: Props) {
  const title = editingId ? "Editar Medidor" : "Agregar Medidor";
  const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
  const [loadingConcentrators, setLoadingConcentrators] = useState(true);

  // Load concentrators for the dropdown
  useEffect(() => {
    const load = async () => {
      try {
        const data = await fetchConcentrators();
        setConcentrators(data);
      } catch (error) {
        console.error("Error loading concentrators:", error);
      } finally {
        setLoadingConcentrators(false);
      }
    };
    load();
  }, []);

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
        <h2 className="text-lg font-semibold">{title}</h2>

        {/* FORM */}
        <div className="space-y-3">
          <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
            Información del Medidor
          </h3>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm text-gray-600 mb-1">Serial *</label>
              <input
                className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                  errors["serialNumber"] ? "border-red-500" : ""
                }`}
                placeholder="Número de serie"
                value={form.serialNumber}
                onChange={(e) => {
                  setForm({ ...form, serialNumber: e.target.value });
                  if (errors["serialNumber"]) setErrors({ ...errors, serialNumber: false });
                }}
                required
              />
              {errors["serialNumber"] && (
                <p className="text-red-500 text-xs mt-1">Campo requerido</p>
              )}
            </div>

            <div>
              <label className="block text-sm text-gray-600 mb-1">Meter ID</label>
              <input
                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="ID del medidor (opcional)"
                value={form.meterId ?? ""}
                onChange={(e) => setForm({ ...form, meterId: e.target.value || undefined })}
              />
            </div>
          </div>

          <div>
            <label className="block text-sm text-gray-600 mb-1">Nombre *</label>
            <input
              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors["name"] ? "border-red-500" : ""
              }`}
              placeholder="Nombre del medidor"
              value={form.name}
              onChange={(e) => {
                setForm({ ...form, name: e.target.value });
                if (errors["name"]) setErrors({ ...errors, name: false });
              }}
              required
            />
            {errors["name"] && <p className="text-red-500 text-xs mt-1">Campo requerido</p>}
          </div>

          <div>
            <label className="block text-sm text-gray-600 mb-1">Concentrador *</label>
            <select
              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
                errors["concentratorId"] ? "border-red-500" : ""
              }`}
              value={form.concentratorId}
              onChange={(e) => {
                setForm({ ...form, concentratorId: e.target.value });
                if (errors["concentratorId"]) setErrors({ ...errors, concentratorId: false });
              }}
              disabled={loadingConcentrators}
              required
            >
              <option value="">
                {loadingConcentrators ? "Cargando..." : "Selecciona un concentrador"}
              </option>
              {concentrators.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name} ({c.serialNumber})
                </option>
              ))}
            </select>
            {errors["concentratorId"] && (
              <p className="text-red-500 text-xs mt-1">Selecciona un concentrador</p>
            )}
          </div>

          <div>
            <label className="block text-sm text-gray-600 mb-1">Ubicación</label>
            <input
              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="Ubicación del medidor (opcional)"
              value={form.location ?? ""}
              onChange={(e) => setForm({ ...form, location: e.target.value || undefined })}
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm text-gray-600 mb-1">Tipo</label>
              <select
                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                value={form.type ?? "LORA"}
                onChange={(e) => setForm({ ...form, type: e.target.value })}
              >
                <option value="LORA">LoRa</option>
                <option value="LORAWAN">LoRaWAN</option>
                <option value="GRANDES">Grandes Consumidores</option>
              </select>
            </div>

            <div>
              <label className="block text-sm text-gray-600 mb-1">Estado</label>
              <select
                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                value={form.status ?? "ACTIVE"}
                onChange={(e) => setForm({ ...form, status: e.target.value })}
              >
                <option value="ACTIVE">Activo</option>
                <option value="INACTIVE">Inactivo</option>
                <option value="MAINTENANCE">Mantenimiento</option>
                <option value="FAULTY">Averiado</option>
                <option value="REPLACED">Reemplazado</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm text-gray-600 mb-1">Fecha de Instalación</label>
            <input
              type="date"
              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              value={form.installationDate?.split("T")[0] ?? ""}
              onChange={(e) =>
                setForm({
                  ...form,
                  installationDate: e.target.value ? new Date(e.target.value).toISOString() : undefined,
                })
              }
            />
          </div>
        </div>

        {/* ACTIONS */}
        <div className="flex justify-end gap-2 pt-3 border-t">
          <button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
            Cancelar
          </button>
          <button
            onClick={onSave}
            className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
          >
            Guardar
          </button>
        </div>
      </div>
    </div>
  );
}