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

export default function PasoDelivery({
  restaurante,
  onGuardado,
}: {
  restaurante: Restaurante;
  onGuardado?: () => void;
}) {
  const qc = useQueryClient();
  const [delivery, setDelivery] = useState(restaurante.hace_delivery);
  const [pickup, setPickup] = useState(restaurante.hace_pickup);
  const [costo, setCosto] = useState(restaurante.costo_delivery_usd?.toString() ?? '0');
  const [gratis, setGratis] = useState((restaurante.costo_delivery_usd ?? 0) === 0);
  const [radio, setRadio] = useState(restaurante.delivery_radio_km?.toString() ?? '');
  const [guardando, setGuardando] = useState(false);
  const [ok, setOk] = useState(false);

  async function guardar() {
    setGuardando(true);
    setOk(false);
    const { error } = await supabase
      .from('restaurantes')
      .update({
        hace_delivery: delivery,
        hace_pickup: pickup,
        costo_delivery_usd: gratis ? 0 : costo ? Number(costo) : 0,
        delivery_radio_km: radio ? Number(radio) : null,
      })
      .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">Con delivery propio, tus repartidores llevan los pedidos.</p>

      <label className="flex items-center gap-2 border rounded-xl p-3 bg-superficie">
        <input type="checkbox" checked={delivery} onChange={(e) => setDelivery(e.target.checked)} />
        <span className="font-medium">Hago entregas a domicilio</span>
      </label>
      <label className="flex items-center gap-2 border rounded-xl p-3 bg-superficie">
        <input type="checkbox" checked={pickup} onChange={(e) => setPickup(e.target.checked)} />
        <span className="font-medium">El cliente puede buscar en tienda</span>
      </label>

      {delivery && (
        <div className="space-y-3 rounded-xl border bg-superficie p-3">
          <p className="text-xs text-niebla">Cuanto le cobras al cliente por llevarle el pedido a su casa.</p>
          <label className="flex items-center gap-2">
            <input type="checkbox" checked={gratis} onChange={(e) => setGratis(e.target.checked)} className="accent-dorado" />
            <span className="font-medium">Mi delivery es gratis</span>
          </label>
          <div className="grid grid-cols-2 gap-3">
            <label className="block">
              <span className="text-xs font-medium text-niebla">Costo del delivery ($)</span>
              <input
                className="input mt-1 disabled:bg-white/10 disabled:text-niebla"
                inputMode="decimal"
                placeholder="Ej: 1.50"
                value={gratis ? '0' : costo}
                disabled={gratis}
                onChange={(e) => setCosto(e.target.value)}
              />
            </label>
            <label className="block">
              <span className="text-xs font-medium text-niebla">Radio de cobertura (km, opcional)</span>
              <input className="input mt-1" inputMode="decimal" value={radio} onChange={(e) => setRadio(e.target.value)} />
            </label>
          </div>
          {gratis ? (
            <p className="rounded-lg bg-green-50 px-2 py-1.5 text-xs font-semibold text-green-700 ring-1 ring-green-200">
              Tus clientes veran "Delivery gratis".
            </p>
          ) : (
            <p className="text-xs text-niebla">Si tu delivery es gratis, marca la casilla de arriba.</p>
          )}
        </div>
      )}

      <p className="text-xs text-niebla">
        Los repartidores de tu equipo se agregan desde el panel (proximo paso del desarrollo).
      </p>

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