"use client";

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

type Sector = {
  Id_sector: number;
  nombre_sector: string;
};

type TipoMedidor = {
  Id_tipo_medidores: number;
  nombre_tipo_medidor: string;
};

type Ciudad = {
  Id_ciudades: number;
  nombre_ciudad: string;
};

type TipoDocumento = {
  Id_doc: number;
  tipo_doc: string;
  impuesto: number;
};

export default function NuevoSocioPage() {
  const router = useRouter();

  const [sectores, setSectores] = useState<Sector[]>([]);
  const [tiposMedidor, setTiposMedidor] = useState<TipoMedidor[]>([]);
  const [ciudades, setCiudades] = useState<Ciudad[]>([]);
  const [tiposDocumento, setTiposDocumento] = useState<TipoDocumento[]>([]);

  const [rut, setRut] = useState("");
  const [nombre, setNombre] = useState("");
  const [direccion, setDireccion] = useState("");
  const [sectorId, setSectorId] = useState<string>("");
  const [numeroMedidor, setNumeroMedidor] = useState("");
  const [tipoMedidorId, setTipoMedidorId] = useState<string>("");

  const [ciudadId, setCiudadId] = useState<string>("");
  const [tipoDocumentoId, setTipoDocumentoId] = useState<string>("");

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const canSubmit = useMemo(() => {
    return Boolean(rut.trim() && nombre.trim() && direccion.trim() && sectorId);
  }, [rut, nombre, direccion, sectorId]);

  useEffect(() => {
    const load = async () => {
      setLoading(true);
      setError(null);
      try {
        const [sectoresRes, tiposRes, ciudadesRes, tiposDocRes] = await Promise.all([
          fetch("/api/mantenedores/sectores"),
          fetch("/api/mantenedores/tipo-medidores"),
          fetch("/api/mantenedores/ciudades"),
          fetch("/api/mantenedores/tipos-documento"),
        ]);

        if (!sectoresRes.ok) throw new Error("No se pudieron cargar los sectores");
        if (!tiposRes.ok) throw new Error("No se pudieron cargar los tipos de medidor");
        if (!ciudadesRes.ok) throw new Error("No se pudieron cargar las ciudades");
        if (!tiposDocRes.ok) throw new Error("No se pudieron cargar los tipos de documento");

        const sectoresData = (await sectoresRes.json()) as Sector[];
        const tiposData = (await tiposRes.json()) as TipoMedidor[];
        const ciudadesData = (await ciudadesRes.json()) as Ciudad[];
        const tiposDocData = (await tiposDocRes.json()) as TipoDocumento[];

        setSectores(sectoresData);
        setTiposMedidor(tiposData);
        setCiudades(ciudadesData);
        setTiposDocumento(tiposDocData);

        if (!sectorId && sectoresData.length > 0) {
          setSectorId(String(sectoresData[0].Id_sector));
        }
        if (!tipoMedidorId && tiposData.length > 0) {
          setTipoMedidorId(String(tiposData[0].Id_tipo_medidores));
        }
        if (!ciudadId && ciudadesData.length > 0) {
          setCiudadId(String(ciudadesData[0].Id_ciudades));
        }
        if (!tipoDocumentoId && tiposDocData.length > 0) {
          setTipoDocumentoId(String(tiposDocData[0].Id_doc));
        }
      } catch (e: any) {
        setError(e?.message || "Error al cargar datos");
      } finally {
        setLoading(false);
      }
    };

    void load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const submit = async () => {
    setSaving(true);
    setError(null);
    try {
      if (!canSubmit) {
        setError("Completa RUT, nombre, dirección y sector");
        return;
      }

      const payload = {
        rut: rut.trim(),
        nombre: nombre.trim(),
        direccion: direccion.trim(),
        sectorId: Number(sectorId),
        ciudadId: ciudadId ? Number(ciudadId) : undefined,
        tipoDocumento: tipoDocumentoId ? Number(tipoDocumentoId) : undefined,
        numeroMedidor: numeroMedidor.trim(),
        tipoCañeria: tipoMedidorId ? Number(tipoMedidorId) : 1,
      };

      const res = await fetch("/api/socios", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const data = await res.json().catch(() => null);
        throw new Error(data?.error || "Error al crear socio");
      }

      router.push("/socios");
      router.refresh();
    } catch (e: any) {
      setError(e?.message || "Error al crear socio");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="max-w-3xl">
      <div className="flex items-center justify-between mb-6">
        <h1 className="page-title">Nuevo Socio</h1>
        <Link href="/socios" className="btn-secondary">
          Volver
        </Link>
      </div>

      <div className="card">
        {loading ? (
          <div className="text-center py-8 text-gray-500">Cargando...</div>
        ) : (
          <div className="space-y-4">
            {error ? (
              <div className="p-3 rounded bg-red-50 text-red-800 text-sm">{error}</div>
            ) : null}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">RUT</label>
                <input
                  className="input-field"
                  value={rut}
                  onChange={(e) => setRut(e.target.value)}
                  placeholder="12.345.678-9"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Número Medidor</label>
                <input
                  className="input-field"
                  value={numeroMedidor}
                  onChange={(e) => setNumeroMedidor(e.target.value)}
                  placeholder="Ej: 29748"
                />
              </div>

              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
                <input
                  className="input-field"
                  value={nombre}
                  onChange={(e) => setNombre(e.target.value)}
                  placeholder="Nombre completo"
                />
              </div>

              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-1">Dirección</label>
                <input
                  className="input-field"
                  value={direccion}
                  onChange={(e) => setDireccion(e.target.value)}
                  placeholder="Dirección"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Sector</label>
                <select
                  className="input-field"
                  value={sectorId}
                  onChange={(e) => setSectorId(e.target.value)}
                >
                  {sectores.map((s) => (
                    <option key={s.Id_sector} value={s.Id_sector}>
                      {s.nombre_sector}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Tipo Medidor</label>
                <select
                  className="input-field"
                  value={tipoMedidorId}
                  onChange={(e) => setTipoMedidorId(e.target.value)}
                >
                  {tiposMedidor.map((t) => (
                    <option key={t.Id_tipo_medidores} value={t.Id_tipo_medidores}>
                      {t.nombre_tipo_medidor}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Ciudad</label>
                <select
                  className="input-field"
                  value={ciudadId}
                  onChange={(e) => setCiudadId(e.target.value)}
                >
                  <option value="">Seleccione...</option>
                  {ciudades.map((c) => (
                    <option key={c.Id_ciudades} value={c.Id_ciudades}>
                      {c.nombre_ciudad}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Tipo Documento</label>
                <select
                  className="input-field"
                  value={tipoDocumentoId}
                  onChange={(e) => setTipoDocumentoId(e.target.value)}
                >
                  <option value="">Seleccione...</option>
                  {tiposDocumento.map((t) => (
                    <option key={t.Id_doc} value={t.Id_doc}>
                      {t.tipo_doc}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            <div className="flex gap-3 pt-2">
              <button
                className="btn-primary"
                disabled={!canSubmit || saving}
                onClick={submit}
              >
                {saving ? "Guardando..." : "Guardar"}
              </button>
              <Link href="/socios" className="btn-secondary">
                Cancelar
              </Link>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}