"use client";

import { useState, useEffect } from "react";
import { BookOpen, Save, Search, Wifi, WifiOff } from "lucide-react";
import ProtectedRoute from "@/components/auth/ProtectedRoute";
import SyncStatus from "@/components/offline/SyncStatus";

interface SocioPendiente {
  Id_cliente: number;
  nombre_cliente: string;
  rut_cliente: string;
  direccion: string;
  numero_medidor: string;
  ultima_lectura: number;
  nombre_sector: string;
  sector: number;
}

interface Sector {
  Id_sector: number;
  nombre_sector: string;
}

export default function LecturasPage() {
  return (
    <ProtectedRoute requiredPermission={{ module: "lecturas", action: "escritura" }}>
      <LecturasContent />
    </ProtectedRoute>
  );
}

function LecturasContent() {
  const [pendientes, setPendientes] = useState<SocioPendiente[]>([]);
  const [sectores, setSectores] = useState<Sector[]>([]);
  const [lecturas, setLecturas] = useState<Record<number, number>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [mensaje, setMensaje] = useState<{ tipo: string; texto: string } | null>(null);
  const [mes, setMes] = useState(new Date().getMonth() + 1);
  const [anio, setAnio] = useState(new Date().getFullYear());
  const [sectorFiltro, setSectorFiltro] = useState<string>("");
  const [busqueda, setBusqueda] = useState("");
  const [online, setOnline] = useState(true);

  useEffect(() => {
    setOnline(navigator.onLine);
    const handleOnline = () => setOnline(true);
    const handleOffline = () => setOnline(false);
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  useEffect(() => {
    cargarSectores();
  }, []);

  useEffect(() => {
    cargarPendientes();
  }, [mes, anio, sectorFiltro]);

  const cargarSectores = async () => {
    try {
      const res = await fetch("/api/mantenedores/sectores");
      const data = await res.json();
      setSectores(data);
    } catch (error) {
      console.error("Error al cargar sectores:", error);
    }
  };

  const cargarPendientes = async () => {
    setLoading(true);
    try {
      const sectorParam = sectorFiltro ? `&sector=${sectorFiltro}` : "";
      const res = await fetch(
        `/api/lecturas?pendientes=true&mes=${mes}&anio=${anio}${sectorParam}`
      );
      const data = await res.json();
      setPendientes(data);
    } catch (error) {
      console.error("Error al cargar pendientes:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleLecturaChange = (clienteId: number, valor: string) => {
    const numero = parseInt(valor) || 0;
    setLecturas((prev) => ({ ...prev, [clienteId]: numero }));
  };

  const guardarLectura = async (socio: SocioPendiente) => {
    const lecturaActual = lecturas[socio.Id_cliente];
    if (!lecturaActual || lecturaActual < socio.ultima_lectura) {
      setMensaje({
        tipo: "error",
        texto: "La lectura actual debe ser mayor o igual a la anterior",
      });
      return;
    }

    setSaving(true);
    try {
      // Si está offline, guardar en IndexedDB para sincronizar después
      if (!online) {
        const { saveLecturaPendiente } = await import("@/lib/offline");
        await saveLecturaPendiente({
          clienteId: socio.Id_cliente,
          lecturaAnterior: socio.ultima_lectura,
          lecturaActual,
        });
        setMensaje({
          tipo: "success",
          texto: `Lectura guardada localmente. Se sincronizará cuando haya conexión.`,
        });
        setPendientes((prev) => prev.filter((p) => p.Id_cliente !== socio.Id_cliente));
        delete lecturas[socio.Id_cliente];
        return;
      }

      const res = await fetch("/api/lecturas", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          clienteId: socio.Id_cliente,
          lecturaAnterior: socio.ultima_lectura,
          lecturaActual,
        }),
      });

      const data = await res.json();
      if (data.success) {
        setMensaje({
          tipo: "success",
          texto: `Lectura registrada para ${socio.nombre_cliente}`,
        });
        setPendientes((prev) => prev.filter((p) => p.Id_cliente !== socio.Id_cliente));
        delete lecturas[socio.Id_cliente];
      } else {
        setMensaje({ tipo: "error", texto: data.error });
      }
    } catch (error) {
      setMensaje({ tipo: "error", texto: "Error al guardar la lectura" });
    } finally {
      setSaving(false);
    }
  };

  const pendientesFiltrados = pendientes.filter((p) => {
    if (!busqueda) return true;
    const searchLower = busqueda.toLowerCase();
    return (
      p.nombre_cliente.toLowerCase().includes(searchLower) ||
      p.rut_cliente.toLowerCase().includes(searchLower) ||
      p.numero_medidor.toLowerCase().includes(searchLower)
    );
  });

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-6">
        <h1 className="page-title flex items-center gap-2">
          <BookOpen className="w-6 h-6 md:w-8 md:h-8" />
          Ingreso de Lecturas
        </h1>
        <SyncStatus />
      </div>

      {mensaje && (
        <div
          className={`mb-4 p-4 rounded-lg flex items-center gap-2 ${
            mensaje.tipo === "error"
              ? "bg-red-50 text-red-700"
              : "bg-green-50 text-green-700"
          }`}
        >
          <span>{mensaje.texto}</span>
          <button onClick={() => setMensaje(null)} className="ml-auto font-bold">
            ×
          </button>
        </div>
      )}

      {/* Filtros Mobile-Friendly */}
      <div className="card mb-6 space-y-4">
        <div className="flex flex-col md:flex-row gap-4">
          <div className="flex-1">
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Búsqueda
            </label>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <input
                type="text"
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
                placeholder="Buscar por nombre, RUT o medidor..."
                className="input-field pl-10"
              />
            </div>
          </div>
          <div className="md:w-48">
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Sector
            </label>
            <select
              value={sectorFiltro}
              onChange={(e) => setSectorFiltro(e.target.value)}
              className="input-field"
            >
              <option value="">Todos</option>
              {sectores.map((s) => (
                <option key={s.Id_sector} value={s.Id_sector}>
                  {s.nombre_sector}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Mes
            </label>
            <select
              value={mes}
              onChange={(e) => setMes(parseInt(e.target.value))}
              className="input-field"
            >
              {Array.from({ length: 12 }, (_, i) => (
                <option key={i + 1} value={i + 1}>
                  {new Date(2000, i).toLocaleString("es", { month: "long" })}
                </option>
              ))}
            </select>
          </div>
          <div className="flex-1">
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Año
            </label>
            <select
              value={anio}
              onChange={(e) => setAnio(parseInt(e.target.value))}
              className="input-field"
            >
              {[2024, 2025, 2026, 2027].map((a) => (
                <option key={a} value={a}>
                  {a}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Lista de Pendientes Mobile-Friendly */}
      <div className="card">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-blue-600" />
            <span className="font-medium">
              Pendientes: {pendientesFiltrados.length}
            </span>
          </div>
          {!online && (
            <div className="flex items-center gap-2 text-orange-600">
              <WifiOff className="w-5 h-5" />
              <span className="text-sm">Sin conexión</span>
            </div>
          )}
        </div>

        {loading ? (
          <div className="text-center py-8 text-gray-500">Cargando...</div>
        ) : pendientesFiltrados.length === 0 ? (
          <div className="text-center py-8 text-green-600">
            ✓ Todas las lecturas del período han sido registradas
          </div>
        ) : (
          <div className="space-y-4">
            {pendientesFiltrados.map((socio) => {
              const lecturaActual = lecturas[socio.Id_cliente] || 0;
              const consumo =
                lecturaActual > socio.ultima_lectura
                  ? lecturaActual - socio.ultima_lectura
                  : 0;

              return (
                <div
                  key={socio.Id_cliente}
                  className="border border-gray-200 rounded-lg p-4 space-y-3"
                >
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      {socio.nombre_cliente}
                    </h3>
                    <p className="text-sm text-gray-600">{socio.rut_cliente}</p>
                    <p className="text-sm text-gray-500">{socio.direccion}</p>
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-gray-500">Sector:</span>
                      <p className="font-medium">{socio.nombre_sector}</p>
                    </div>
                    <div>
                      <span className="text-gray-500">Medidor:</span>
                      <p className="font-mono font-medium">{socio.numero_medidor}</p>
                    </div>
                    <div>
                      <span className="text-gray-500">Lectura Anterior:</span>
                      <p className="font-mono font-medium">{socio.ultima_lectura}</p>
                    </div>
                    <div>
                      <span className="text-gray-500">Consumo:</span>
                      <p
                        className={`font-mono font-medium ${
                          consumo > 50 ? "text-red-600" : ""
                        }`}
                      >
                        {consumo} m³
                      </p>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Lectura Actual
                    </label>
                    <input
                      type="number"
                      min={socio.ultima_lectura}
                      value={lecturas[socio.Id_cliente] || ""}
                      onChange={(e) =>
                        handleLecturaChange(socio.Id_cliente, e.target.value)
                      }
                      className="input-field w-full text-right text-lg font-mono"
                      placeholder="0"
                    />
                  </div>
                  <button
                    onClick={() => guardarLectura(socio)}
                    disabled={saving || !lecturas[socio.Id_cliente]}
                    className="btn-success w-full flex items-center justify-center gap-2 disabled:opacity-50"
                  >
                    <Save className="w-5 h-5" />
                    Guardar Lectura
                  </button>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}