"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;
  precioIncluyeIva: boolean;
  pluProductosTaller: string;
  pluServiciosTaller: string;
};

function textoDe(parametros: FacturacionPosParametros, clave: string): string {
  const valor = parametros[clave];
  return typeof valor === "string" ? valor : "";
}

function aFormState(parametros: FacturacionPosParametros): FacturacionPosFormState {
  const precioDecimales = parametros["facturacion_pos.precio_decimales"];
  const precioIncluyeIva = parametros["facturacion_pos.precio_incluye_iva"];
  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",
    precioIncluyeIva: typeof precioIncluyeIva === "boolean" ? precioIncluyeIva : true,
    pluProductosTaller: textoDe(parametros, "facturacion_pos.plu_productos_taller"),
    pluServiciosTaller: textoDe(parametros, "facturacion_pos.plu_servicios_taller"),
  };
}

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,
        precioIncluyeIva: form.habilitada ? form.precioIncluyeIva : undefined,
        pluProductosTaller: form.habilitada ? form.pluProductosTaller.trim() : undefined,
        pluServiciosTaller: form.habilitada ? form.pluServiciosTaller.trim() : 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>
          <label className="flex items-start gap-3 rounded-xl border border-border bg-muted p-4">
            <input
              type="checkbox"
              checked={form.precioIncluyeIva}
              disabled={readOnly}
              onChange={(event) => setForm({ ...form, precioIncluyeIva: event.target.checked })}
              className="mt-0.5 h-5 w-5 rounded border-border-strong"
            />
            <span>
              <span className="block text-sm font-bold text-foreground">El precio de POSTouch incluye IVA</span>
              <span className="block text-xs text-muted-foreground">
                Activado envía el precio final con IVA; desactivado envía el precio base sin IVA.
              </span>
            </span>
          </label>
          <div className="space-y-3 rounded-xl border border-border bg-muted p-4">
            <div>
              <p className="text-sm font-bold text-foreground">Productos y servicios creados en el taller</p>
              <p className="text-xs text-muted-foreground">
                Lo que se crea en el taller no existe en el ERP, así que en la factura de POSTouch sale agrupado bajo
                estos dos PLU genéricos (uno para productos y otro para servicios) con la suma de cada grupo. El
                detalle completo queda en la orden del taller. Los productos que vienen del ERP se facturan con su
                propio PLU. Vienen con TALLER-PROD y TALLER-SERV, que se crean solos en el ERP al preparar el sitio; si se deja vacío, una OT con productos o servicios creados en el taller no se puede facturar.
              </p>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="space-y-2">
                <span className="text-sm font-bold text-foreground">PLU genérico de productos</span>
                <Input
                  value={form.pluProductosTaller}
                  disabled={readOnly}
                  onChange={(event) => setForm({ ...form, pluProductosTaller: event.target.value })}
                  className="h-11 rounded-xl"
                  placeholder="TALLER-PROD"
                />
              </label>
              <label className="space-y-2">
                <span className="text-sm font-bold text-foreground">PLU genérico de servicios</span>
                <Input
                  value={form.pluServiciosTaller}
                  disabled={readOnly}
                  onChange={(event) => setForm({ ...form, pluServiciosTaller: event.target.value })}
                  className="h-11 rounded-xl"
                  placeholder="TALLER-SERV"
                />
              </label>
            </div>
          </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>
  );
}