import { useState } from 'react';
import { DIAS_CORTO, textoHorarioCategoria, type Categoria } from '@gustito/shared';
import { supabase } from '../lib/supabase';

// Horario de venta de una categoria: "las sopas solo los domingos", "las arepas
// desde las 5pm". Ojo: esto frena SOLO la venta en linea. El mesero y la caja
// venden igual (decision de Gilberto: si quedo sopa un lunes, se vende).

const HORAS: { valor: string; texto: string }[] = [];
for (let h = 0; h < 24; h++) {
  for (const m of [0, 30]) {
    const valor = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:00`;
    const ampm = h >= 12 ? 'pm' : 'am';
    const h12 = h % 12 === 0 ? 12 : h % 12;
    HORAS.push({ valor, texto: `${h12}:${String(m).padStart(2, '0')} ${ampm}` });
  }
}

// La hora que viene de la BD puede traer segundos raros; se pega a la media hora
// mas cercana para que caiga en una opcion del selector.
function aOpcion(hora: string | null): string {
  if (!hora) return '';
  const [h, m] = hora.split(':');
  return `${h}:${Number(m) >= 30 ? '30' : '00'}:00`;
}

export default function HorarioCategoria({
  categoria,
  marca,
  txtMarca,
  onCerrar,
}: {
  categoria: Categoria;
  marca: string;
  txtMarca: string;
  onCerrar: (cambio: boolean) => void;
}) {
  const [dias, setDias] = useState<number[]>(categoria.dias_semana ?? []);
  const [desde, setDesde] = useState(aOpcion(categoria.hora_desde));
  const [hasta, setHasta] = useState(aOpcion(categoria.hora_hasta));
  const [guardando, setGuardando] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const previo = textoHorarioCategoria({
    dias_semana: dias.length ? dias : null,
    hora_desde: desde || null,
    hora_hasta: hasta || null,
  });

  async function guardar(limpiar = false) {
    setGuardando(true);
    setError(null);
    const { error: e } = await supabase
      .from('categorias')
      .update({
        dias_semana: limpiar || !dias.length ? null : [...dias].sort((a, b) => a - b),
        hora_desde: limpiar ? null : desde || null,
        hora_hasta: limpiar ? null : hasta || null,
      })
      .eq('id', categoria.id);
    setGuardando(false);
    if (e) {
      setError(e.message);
      return;
    }
    onCerrar(true);
  }

  return (
    <>
      <div className="fixed inset-0 z-[1500] bg-black/60" onClick={() => onCerrar(false)} />
      <div
        className="fixed inset-x-3 top-1/2 z-[1600] mx-auto flex max-h-[90vh] max-w-md -translate-y-1/2 flex-col overflow-hidden rounded-2xl ring-1 ring-white/15"
        style={{ background: '#12142B' }}
      >
        <div className="flex items-center justify-between px-4 py-3" style={{ background: marca, color: txtMarca }}>
          <p className="min-w-0 truncate font-extrabold">Horario · {categoria.nombre}</p>
          <button onClick={() => onCerrar(false)} title="Cerrar" className="rounded-lg px-2 text-xl font-bold leading-none hover:bg-black/10">
            ✕
          </button>
        </div>

        <div className="flex-1 space-y-4 overflow-y-auto p-4">
          <p className="text-xs text-niebla">
            Sirve para cosas como "las sopas solo los domingos" o "las arepas desde las 5 de la tarde".
            Esto solo frena a quien pide por internet; tú, tus meseros y la caja siguen vendiendo cuando quieran.
          </p>

          <div>
            <p className="mb-2 text-xs font-bold uppercase tracking-wide text-niebla">Días que se vende</p>
            <div className="grid grid-cols-4 gap-2">
              {DIAS_CORTO.map((d, i) => {
                const puesto = dias.includes(i);
                return (
                  <label
                    key={d}
                    className="flex cursor-pointer items-center gap-2 rounded-xl bg-superficie px-2.5 py-2 text-sm ring-1 ring-white/10"
                  >
                    <input
                      type="checkbox"
                      checked={puesto}
                      onChange={() => setDias(puesto ? dias.filter((x) => x !== i) : [...dias, i])}
                      className="h-4 w-4 accent-current"
                      style={{ accentColor: marca }}
                    />
                    {d}
                  </label>
                );
              })}
            </div>
            <p className="mt-1.5 text-[11px] text-niebla">Sin marcar ninguno, se vende todos los días.</p>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <p className="mb-1.5 text-xs font-bold uppercase tracking-wide text-niebla">Desde</p>
              <select value={desde} onChange={(e) => setDesde(e.target.value)} className="w-full rounded-xl bg-black/30 px-3 py-2 text-sm ring-1 ring-white/20">
                <option value="">Cuando abra</option>
                {HORAS.map((h) => (
                  <option key={h.valor} value={h.valor}>{h.texto}</option>
                ))}
              </select>
            </div>
            <div>
              <p className="mb-1.5 text-xs font-bold uppercase tracking-wide text-niebla">Hasta</p>
              <select value={hasta} onChange={(e) => setHasta(e.target.value)} className="w-full rounded-xl bg-black/30 px-3 py-2 text-sm ring-1 ring-white/20">
                <option value="">Cuando cierre</option>
                {HORAS.map((h) => (
                  <option key={h.valor} value={h.valor}>{h.texto}</option>
                ))}
              </select>
            </div>
          </div>

          <div className="rounded-2xl bg-superficie p-3 text-sm ring-1 ring-white/10">
            <p className="text-xs text-niebla">Así lo va a ver tu cliente:</p>
            <p className="mt-1 font-bold">{previo ?? 'Se vende siempre que el negocio esté abierto'}</p>
          </div>

          {error && <p className="text-xs text-red-400">{error}</p>}
        </div>

        <div className="flex gap-2 border-t border-white/10 p-3">
          <button
            onClick={() => guardar(true)}
            disabled={guardando}
            className="rounded-xl px-3 py-2.5 text-sm font-bold ring-1 ring-white/15 disabled:opacity-60"
          >
            Quitar horario
          </button>
          <button
            onClick={() => guardar(false)}
            disabled={guardando}
            className="flex-1 rounded-xl py-2.5 text-sm font-bold disabled:opacity-60"
            style={{ background: marca, color: txtMarca }}
          >
            {guardando ? 'Guardando...' : 'Guardar'}
          </button>
        </div>
      </div>
    </>
  );
}
