"use client";

import { useEffect, useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useToast } from "@/hooks/use-toast";
import { authApi, configuracionApi, type ValorParaUI } from "@/lib/api";
import { Loader2, Receipt, Wifi } from "lucide-react";

export type FacturacionPosParametros = Record<string, ValorParaUI>;

type FacturacionPosFormState = {
  habilitada: boolean;
  url: string;
  username: string;
  password: string;
  computadora: string;
  precioDecimales: string;
};

function aFormState(parametros: FacturacionPosParametros): FacturacionPosFormState {
  const precioDecimales = parametros["facturacion_pos.precio_decimales"];
  return {
    habilitada: Boolean(parametros["facturacion_pos.habilitada"]),
    url: typeof parametros["facturacion_pos.url"] === "string" ? (parametros["facturacion_pos.url"] as string) : "",
    username:
      typeof parametros["facturacion_pos.username"] === "string"
        ? (parametros["facturacion_pos.username"] as string)
        : "",
    password: "",
    computadora:
      typeof parametros["facturacion_pos.computadora"] === "string"
        ? (parametros["facturacion_pos.computadora"] as string)
        : "",
    precioDecimales: typeof precioDecimales === "number" ? String(precioDecimales) : "2",
  };
}

function passwordYaConfigurada(parametros: FacturacionPosParametros): boolean {
  const valor = parametros["facturacion_pos.password"];
  return typeof valor === "object" && valor !== null && Boolean((valor as { configurado?: boolean }).configurado);
}

export function FacturacionPosConfigForm({
  tiendaId,
  tiendaNombre,
  parametros,
  onSaved,
  readOnly = false,
}: {
  tiendaId: number;
  tiendaNombre: string;
  parametros: FacturacionPosParametros;
  onSaved?: () => void;
  // Deshabilita todos los campos y botones (guardar/probar) sin ocultar
  // nada -- lo usa /dashboard/configuracion para un usuario con solo
  // canRead("configuracion"). Default false: no afecta el uso existente de
  // este componente en tiendas/page.tsx.
  readOnly?: boolean;
}) {
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const [form, setForm] = useState<FacturacionPosFormState>(() => aFormState(parametros));
  const [probando, setProbando] = useState(false);
  const [resultadoPrueba, setResultadoPrueba] = useState<{ ok: boolean; detalle?: string } | null>(null);

  useEffect(() => {
    setForm(aFormState(parametros));
    setResultadoPrueba(null);
  }, [tiendaId, parametros]);

  const guardarMutation = useMutation({
    mutationFn: async () => {
      const precioDecimales = Number(form.precioDecimales);
      if (form.habilitada && (!Number.isFinite(precioDecimales) || precioDecimales < 0)) {
        throw new Error("Los decimales de redondeo deben ser un número válido.");
      }
      if (form.habilitada && (!form.url.trim() || !form.username.trim() || !form.computadora.trim())) {
        throw new Error("URL, usuario y computadora son obligatorios mientras la facturación POS esté activada.");
      }

      return authApi.updateTiendaFacturacionPos(tiendaId, {
        habilitada: form.habilitada,
        url: form.url || undefined,
        username: form.username || undefined,
        password: form.password || undefined,
        computadora: form.computadora || undefined,
        precioDecimales: form.habilitada ? precioDecimales : undefined,
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["tiendas"] });
      await queryClient.invalidateQueries({ queryKey: ["configuracion"] });
      setForm((current) => ({ ...current, password: "" }));
      setResultadoPrueba(null);
      onSaved?.();
      toast({
        variant: "success",
        title: "Facturación POS actualizada",
        description: form.habilitada
          ? "Las OTs terminadas de esta tienda se enviarán automáticamente a POSTouch."
          : "El envío automático a POSTouch quedó desactivado para esta tienda.",
      });
    },
    onError: (error: any) =>
      toast({
        variant: "destructive",
        title: "No se pudo actualizar",
        description: error.message || "Revisa los datos e intenta de nuevo.",
      }),
  });

  const probarConexion = async () => {
    if (!form.url.trim() || !form.username.trim() || !form.computadora.trim()) {
      toast({
        variant: "destructive",
        title: "Faltan datos",
        description: "Completá URL, usuario y computadora antes de probar.",
      });
      return;
    }
    setProbando(true);
    setResultadoPrueba(null);
    try {
      const resultado = await configuracionApi.probarConexionPos(tiendaId, {
        url: form.url,
        username: form.username,
        password: form.password || undefined,
        computadora: form.computadora,
      });
      setResultadoPrueba(resultado);
    } catch (error: any) {
      setResultadoPrueba({ ok: false, detalle: error.message || "No se pudo probar la conexión." });
    } finally {
      setProbando(false);
    }
  };

  return (
    <div className="max-w-xl space-y-4">
      <label className="flex items-center gap-3 rounded-xl border border-border bg-muted p-4">
        <input
          type="checkbox"
          checked={form.habilitada}
          disabled={readOnly}
          onChange={(event) => setForm({ ...form, habilitada: event.target.checked })}
          className="h-5 w-5 rounded border-border-strong"
        />
        <span className="text-sm font-bold text-foreground">
          Activar envío automático a POSTouch para {tiendaNombre}
        </span>
      </label>

      {form.habilitada ? (
        <div className="space-y-4 rounded-xl border border-border bg-surface p-4">
          <label className="space-y-2 block">
            <span className="text-sm font-bold text-foreground">URL de create_ordenes_edngt</span>
            <Input
              value={form.url}
              disabled={readOnly}
              onChange={(event) => setForm({ ...form, url: event.target.value })}
              className="h-11 rounded-xl"
              placeholder="http://host:puerto/create_ordenes_edngt"
            />
          </label>
          <div className="grid gap-4 md:grid-cols-2">
            <label className="space-y-2">
              <span className="text-sm font-bold text-foreground">Usuario de servicio</span>
              <Input
                value={form.username}
                disabled={readOnly}
                onChange={(event) => setForm({ ...form, username: event.target.value })}
                className="h-11 rounded-xl"
              />
            </label>
            <label className="space-y-2">
              <span className="text-sm font-bold text-foreground">Contraseña</span>
              <Input
                type="password"
                value={form.password}
                disabled={readOnly}
                onChange={(event) => setForm({ ...form, password: event.target.value })}
                className="h-11 rounded-xl"
                placeholder={passwordYaConfigurada(parametros) ? "Dejar en blanco para no cambiarla" : "Contraseña"}
              />
            </label>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <label className="space-y-2">
              <span className="text-sm font-bold text-foreground">Computadora (POSTouch)</span>
              <Input
                value={form.computadora}
                disabled={readOnly}
                onChange={(event) => setForm({ ...form, computadora: event.target.value })}
                className="h-11 rounded-xl"
                placeholder="5.5"
              />
            </label>
            <label className="space-y-2">
              <span className="text-sm font-bold text-foreground">Decimales de redondeo</span>
              <Input
                type="number"
                min={0}
                value={form.precioDecimales}
                disabled={readOnly}
                onChange={(event) => setForm({ ...form, precioDecimales: event.target.value })}
                className="h-11 rounded-xl"
              />
            </label>
          </div>
        </div>
      ) : null}

      {resultadoPrueba ? (
        <div
          className={`rounded-xl border p-3 text-sm font-medium ${
            resultadoPrueba.ok
              ? "border-success/40 bg-success-soft text-success"
              : "border-destructive/40 bg-destructive-soft text-destructive"
          }`}
        >
          {resultadoPrueba.ok
            ? "Conexión verificada: POSTouch respondió correctamente."
            : resultadoPrueba.detalle || "No se pudo verificar la conexión."}
        </div>
      ) : null}

      <div className="flex flex-wrap gap-2">
        <Button
          className="rounded-xl"
          disabled={guardarMutation.isPending || readOnly}
          onClick={() => guardarMutation.mutate()}
        >
          {guardarMutation.isPending ? (
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          ) : (
            <Receipt className="mr-2 h-4 w-4" />
          )}
          Guardar facturación POS
        </Button>
        <Button
          variant="outline"
          className="rounded-xl"
          disabled={probando || !form.habilitada || readOnly}
          onClick={probarConexion}
        >
          {probando ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Wifi className="mr-2 h-4 w-4" />}
          Probar conexión
        </Button>
      </div>
    </div>
  );
}