import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import {
  BANCOS_VE,
  type Restaurante,
  type MetodosPago,
  type MetodoPagoConfig,
  type Json,
} from '@gustito/shared';
import { supabase } from '../../lib/supabase';

export default function PasoPagos({
  restaurante,
  onGuardado,
}: {
  restaurante: Restaurante;
  onGuardado?: () => void;
}) {
  const qc = useQueryClient();
  const [m, setM] = useState<MetodosPago>(restaurante.metodos_pago ?? {});
  const [guardando, setGuardando] = useState(false);
  const [ok, setOk] = useState(false);

  function set(metodo: keyof MetodosPago, patch: Partial<MetodoPagoConfig>) {
    setM((prev) => ({ ...prev, [metodo]: { activo: false, ...prev[metodo], ...patch } }));
  }

  async function guardar() {
    setGuardando(true);
    setOk(false);
    const { error } = await supabase
      .from('restaurantes')
      .update({ metodos_pago: m as unknown as Json })
      .eq('id', restaurante.id);
    setGuardando(false);
    if (error) alert(error.message);
    else {
      setOk(true);
      qc.invalidateQueries({ queryKey: ['mi-restaurante'] });
      onGuardado?.();
    }
  }

  return (
    <div className="space-y-3">
      <p className="text-sm text-niebla">Activa los metodos que aceptas. Estos datos se le muestran al cliente al pagar.</p>

      <Metodo titulo="Pago Movil" activo={!!m.pago_movil?.activo} onToggle={(v) => set('pago_movil', { activo: v })}>
        <select className="input" value={m.pago_movil?.banco ?? ''} onChange={(e) => set('pago_movil', { banco: e.target.value })}>
          <option value="">Selecciona tu banco</option>
          {BANCOS_VE.map((b) => (
            <option key={b} value={b}>
              {b}
            </option>
          ))}
        </select>
        <input className="input" placeholder="Cedula / RIF" value={m.pago_movil?.cedula ?? ''} onChange={(e) => set('pago_movil', { cedula: e.target.value })} />
        <input className="input" placeholder="Telefono" value={m.pago_movil?.telefono ?? ''} onChange={(e) => set('pago_movil', { telefono: e.target.value })} />
      </Metodo>

      <Metodo titulo="Zelle" activo={!!m.zelle?.activo} onToggle={(v) => set('zelle', { activo: v })}>
        <input className="input" placeholder="Correo Zelle" value={m.zelle?.correo ?? ''} onChange={(e) => set('zelle', { correo: e.target.value })} />
        <input className="input" placeholder="Titular" value={m.zelle?.titular ?? ''} onChange={(e) => set('zelle', { titular: e.target.value })} />
      </Metodo>

      <Metodo titulo="Transferencia" activo={!!m.transferencia?.activo} onToggle={(v) => set('transferencia', { activo: v })}>
        <input className="input" placeholder="Banco" value={m.transferencia?.banco ?? ''} onChange={(e) => set('transferencia', { banco: e.target.value })} />
        <input className="input" placeholder="Numero de cuenta" value={m.transferencia?.cuenta ?? ''} onChange={(e) => set('transferencia', { cuenta: e.target.value })} />
        <input className="input" placeholder="Titular" value={m.transferencia?.titular ?? ''} onChange={(e) => set('transferencia', { titular: e.target.value })} />
      </Metodo>

      <Metodo titulo="Efectivo" activo={!!m.efectivo?.activo} onToggle={(v) => set('efectivo', { activo: v })} />

      <button onClick={guardar} disabled={guardando} className="btn bg-dorado text-noche disabled:opacity-60">
        {guardando ? 'Guardando...' : 'Guardar pagos'}
      </button>
      {ok && <span className="text-green-700 text-sm ml-2">Guardado</span>}
    </div>
  );
}

function Metodo({
  titulo,
  activo,
  onToggle,
  children,
}: {
  titulo: string;
  activo: boolean;
  onToggle: (v: boolean) => void;
  children?: React.ReactNode;
}) {
  return (
    <div className="border rounded-xl p-3 bg-superficie">
      <label className="flex items-center gap-2 font-medium">
        <input type="checkbox" checked={activo} onChange={(e) => onToggle(e.target.checked)} />
        {titulo}
      </label>
      {activo && children && <div className="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-2">{children}</div>}
    </div>
  );
}
