"use client";

import { useEffect, useMemo, useState } from "react";
import { AlertCircle, RefreshCw, Save } from "lucide-react";

type DatosAprDb = {
  Nombre_servicio?: string | null;
  rut_servicio?: string | null;
  Direccion?: string | null;
  Id_comunas?: number | null;
  Representante_legal?: string | null;
  Rut_representante?: string | null;
  telefono_oficina?: string | null;
  fono_contacto?: string | null;
  fecha_facturacion?: string | null;
};

type ComunaDb = Record<string, any> & {
  nombre_comuna?: string;
  nombre?: string;
  Nombre?: string;
  Id_comunas?: number;
  id?: number;
  Id?: number;
};

type FormState = {
  nombreServicio: string;
  rutServicio: string;
  direccion: string;
  comunaId: string;
  representante: string;
  rutRepresentante: string;
  telefono: string;
  fonoContacto: string;
  fechaFacturacion: string;
};

const emptyForm: FormState = {
  nombreServicio: "",
  rutServicio: "",
  direccion: "",
  comunaId: "",
  representante: "",
  rutRepresentante: "",
  telefono: "",
  fonoContacto: "",
  fechaFacturacion: "",
};

function comunaIdOf(row: ComunaDb): number | null {
  const v = row.Id_comunas ?? row.id ?? row.Id;
  if (v === null || v === undefined) return null;
  const n = Number(v);
  return Number.isFinite(n) ? n : null;
}

function comunaNombreOf(row: ComunaDb): string {
  return String(row.nombre_comuna ?? row.nombre ?? row.Nombre ?? "").trim();
}

function normalizeDate(value: any): string {
  if (!value) return "";
  if (typeof value === "string") {
    if (/^\d{4}-\d{2}-\d{2}/.test(value)) return value.slice(0, 10);
  }
  return "";
}

export default function ConfiguracionPage() {
  const [loading, setLoading] = useState(true);
  const [working, setWorking] = useState(false);
  const [mensaje, setMensaje] = useState<{ tipo: "error" | "success"; texto: string } | null>(null);

  const [form, setForm] = useState<FormState>(emptyForm);
  const [comunas, setComunas] = useState<ComunaDb[]>([]);

  const comunasOrdenadas = useMemo(() => {
    const rows = [...comunas];
    rows.sort((a, b) => comunaNombreOf(a).localeCompare(comunaNombreOf(b)));
    return rows;
  }, [comunas]);

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      const [resDatos, resComunas] = await Promise.all([
        fetch("/api/configuracion?tipo=datos-apr"),
        fetch("/api/configuracion?tipo=comunas"),
      ]);

      const datos = (await resDatos.json()) as DatosAprDb;
      const comunasData = (await resComunas.json()) as ComunaDb[];

      if (!resDatos.ok) throw new Error((datos as any)?.error || "Error al cargar datos APR");
      if (!resComunas.ok) throw new Error((comunasData as any)?.error || "Error al cargar comunas");

      setComunas(Array.isArray(comunasData) ? comunasData : []);

      setForm({
        nombreServicio: String(datos?.Nombre_servicio ?? ""),
        rutServicio: String(datos?.rut_servicio ?? ""),
        direccion: String(datos?.Direccion ?? ""),
        comunaId: datos?.Id_comunas ? String(datos.Id_comunas) : "",
        representante: String(datos?.Representante_legal ?? ""),
        rutRepresentante: String(datos?.Rut_representante ?? ""),
        telefono: String(datos?.telefono_oficina ?? ""),
        fonoContacto: String(datos?.fono_contacto ?? ""),
        fechaFacturacion: normalizeDate(datos?.fecha_facturacion),
      });
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al cargar configuración" });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void cargar();
  }, []);

  const guardar = async () => {
    setWorking(true);
    setMensaje(null);
    try {
      const comunaIdNum = form.comunaId ? Number(form.comunaId) : null;
      const payload = {
        tipo: "datos-apr",
        datos: {
          nombreServicio: form.nombreServicio || null,
          rutServicio: form.rutServicio || null,
          direccion: form.direccion || null,
          comunaId: comunaIdNum,
          representante: form.representante || null,
          rutRepresentante: form.rutRepresentante || null,
          telefono: form.telefono || null,
          fonoContacto: form.fonoContacto || null,
          fechaFacturacion: form.fechaFacturacion || null,
        },
      };

      const res = await fetch("/api/configuracion", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al actualizar configuración");

      setMensaje({ tipo: "success", texto: data?.message || "Configuración actualizada" });
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al actualizar configuración" });
    } finally {
      setWorking(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Configuración</h1>
          <p className="mt-1 text-sm text-gray-500">Datos del servicio / APR.</p>
        </div>

        <button
          onClick={() => void cargar()}
          disabled={loading || working}
          className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-md text-sm hover:bg-gray-50 disabled:opacity-50"
        >
          <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
          Recargar
        </button>
      </div>

      {mensaje && (
        <div
          className={`rounded-md p-4 border ${
            mensaje.tipo === "error" ? "bg-red-50 border-red-200" : "bg-green-50 border-green-200"
          }`}
        >
          <div className="flex">
            <div className="flex-shrink-0">
              <AlertCircle
                className={`h-5 w-5 ${mensaje.tipo === "error" ? "text-red-400" : "text-green-400"}`}
              />
            </div>
            <div className="ml-3">
              <p className={`text-sm ${mensaje.tipo === "error" ? "text-red-700" : "text-green-700"}`}>
                {mensaje.texto}
              </p>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Nombre servicio</label>
            <input
              value={form.nombreServicio}
              onChange={(e) => setForm((s) => ({ ...s, nombreServicio: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">RUT servicio</label>
            <input
              value={form.rutServicio}
              onChange={(e) => setForm((s) => ({ ...s, rutServicio: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">Dirección</label>
            <input
              value={form.direccion}
              onChange={(e) => setForm((s) => ({ ...s, direccion: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">Comuna</label>
            <select
              value={form.comunaId}
              onChange={(e) => setForm((s) => ({ ...s, comunaId: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            >
              <option value="">(Sin comuna)</option>
              {comunasOrdenadas.map((c) => {
                const id = comunaIdOf(c);
                const nombre = comunaNombreOf(c);
                if (!id || !nombre) return null;
                return (
                  <option key={id} value={String(id)}>
                    {nombre}
                  </option>
                );
              })}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">Representante legal</label>
            <input
              value={form.representante}
              onChange={(e) => setForm((s) => ({ ...s, representante: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">RUT representante</label>
            <input
              value={form.rutRepresentante}
              onChange={(e) => setForm((s) => ({ ...s, rutRepresentante: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">Teléfono oficina</label>
            <input
              value={form.telefono}
              onChange={(e) => setForm((s) => ({ ...s, telefono: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">Fono contacto</label>
            <input
              value={form.fonoContacto}
              onChange={(e) => setForm((s) => ({ ...s, fonoContacto: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700">Fecha facturación</label>
            <input
              type="date"
              value={form.fechaFacturacion}
              onChange={(e) => setForm((s) => ({ ...s, fechaFacturacion: e.target.value }))}
              className="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
              disabled={loading || working}
            />
          </div>
        </div>

        <div className="mt-6 flex items-center justify-end">
          <button
            onClick={() => void guardar()}
            disabled={loading || working}
            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 disabled:opacity-50"
          >
            <Save className="w-4 h-4" />
            Guardar
          </button>
        </div>
      </div>
    </div>
  );
}