import { useState } from 'react';
import { supabase } from '../lib/supabase';
import { useCerrarConAtras } from '../lib/useCerrarConAtras';

const PROD = import.meta.env.PROD;
const NEGOCIOS = PROD ? 'https://gustitoxpress.app' : 'http://localhost:5174';
const REPARTIDOR = PROD ? 'https://repartidor.gustitoxpress.app' : 'http://localhost:5175';

interface PerfilRol {
  rol: string | null;
  restaurante_id: string | null;
  es_fundador: boolean | null;
}

// Login unico. Segun la cuenta, lleva a la persona a SU espacio (negocio o
// repartidor) pasando la sesion por la URL, para que no tenga que entrar de nuevo.
export default function Entrar({ onCerrar }: { onCerrar: () => void }) {
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [ver, setVer] = useState(false);
  const [cargando, setCargando] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [aviso, setAviso] = useState<string | null>(null);

  // El boton "atras" cierra este modal en vez de salir de la pagina.
  useCerrarConAtras(onCerrar);

  async function entrar() {
    setErr(null);
    setAviso(null);
    setCargando(true);
    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email: email.trim(),
        password: pass,
      });
      if (error) throw error;
      const sesion = data.session;
      if (!sesion) throw new Error('No se pudo iniciar sesion.');

      // select('*') como el resto de las apps: tolerante a columnas que puedan
      // no existir (p.ej. es_fundador). Un select de columnas explicitas fallaria
      // entero si alguna no existe; asi no rompemos el login.
      const { data: p } = await supabase
        .from('perfiles')
        .select('*')
        .eq('id', sesion.user.id)
        .maybeSingle();
      const perfil = (p as unknown as PerfilRol) ?? { rol: null, restaurante_id: null, es_fundador: null };

      const at = sesion.access_token;
      const rt = sesion.refresh_token;
      const handoff = (destino: string) =>
        `${destino}/#gx_at=${encodeURIComponent(at)}&gx_rt=${encodeURIComponent(rt)}`;

      // Ruteo calcado a como enruta cada app: el repartidor a su espacio; el
      // fundador (CEO) o cualquiera con restaurante_id (dueno/staff/admin) al
      // panel de negocios; el resto (comensal) se queda pidiendo.
      if (perfil.rol === 'repartidor') {
        window.location.href = handoff(REPARTIDOR);
        return;
      }
      if (perfil.es_fundador || perfil.restaurante_id) {
        window.location.href = handoff(NEGOCIOS);
        return;
      }
      setAviso('Ya puedes pedir normalmente. Esta cuenta no tiene panel de negocio ni de repartidor.');
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setCargando(false);
    }
  }

  return (
    <div className="fixed inset-0 z-40 flex items-end justify-center bg-black/60 sm:items-center" onClick={onCerrar}>
      <div
        className="w-full max-w-sm rounded-t-3xl bg-superficie p-5 ring-1 ring-white/10 sm:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-lg font-extrabold text-white">Iniciar sesión</h2>
            <p className="text-xs text-niebla">Para negocios y repartidores</p>
          </div>
          <button onClick={onCerrar} className="h-8 w-8 text-2xl leading-none text-niebla" aria-label="Cerrar">
            &times;
          </button>
        </div>

        <div className="mt-4 space-y-3">
          <input
            className="w-full rounded-xl border border-white/10 bg-superficie-2 px-3.5 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-dorado"
            placeholder="Correo"
            type="email"
            inputMode="email"
            autoCapitalize="none"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <div className="relative">
            <input
              className="w-full rounded-xl border border-white/10 bg-superficie-2 px-3.5 py-3 pr-14 text-sm text-white placeholder:text-white/40 outline-none focus:border-dorado"
              placeholder="Contraseña"
              type={ver ? 'text' : 'password'}
              value={pass}
              onChange={(e) => setPass(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && entrar()}
            />
            <button
              type="button"
              onClick={() => setVer((v) => !v)}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-bold text-dorado"
            >
              {ver ? 'Ocultar' : 'Ver'}
            </button>
          </div>

          {err && <p className="text-sm text-red-400">{err}</p>}
          {aviso && <p className="text-sm text-dorado">{aviso}</p>}

          <button
            onClick={entrar}
            disabled={cargando || !email || !pass}
            className="w-full rounded-2xl bg-dorado py-3.5 font-bold text-noche shadow-glow disabled:opacity-60 active:scale-[0.99] transition"
          >
            {cargando ? 'Entrando...' : 'Entrar'}
          </button>
          <p className="text-center text-xs text-niebla">
            ¿Solo quieres pedir? Cierra esto y elige tu restaurante.
          </p>
          <p className="text-center text-xs text-niebla">
            ¿Aún no tienes cuenta de negocio?{' '}
            <a href={NEGOCIOS} className="font-bold text-dorado">
              Regístralo aquí
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}
