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

// Aceptacion de terminos en el PRIMER inicio de sesion del repartidor: su
// cuenta la crea el negocio, asi que nunca paso por un registro con checkbox.
// Incluye el aviso de la ubicacion en vivo durante entregas. Se registra en
// metadata igual que la del dueño. Auditoria legal 2026-07-23.
import { LEGAL_VERSION } from '@gustito/shared';

const TERMINOS_URL = 'https://pedir.gustitoxpress.app/terminos';
const PRIVACIDAD_URL = 'https://pedir.gustitoxpress.app/privacidad';

export default function AceptarLegal() {
  const { session } = useAuth();
  const [listo, setListo] = useState(false);
  const [guardando, setGuardando] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  const meta = session?.user?.user_metadata as { acepto_terminos?: boolean } | undefined;
  if (!session || meta?.acepto_terminos || listo) return null;

  async function aceptar() {
    setErr(null);
    setGuardando(true);
    const { error } = await supabase.auth.updateUser({
      data: { acepto_terminos: true, terminos_version: LEGAL_VERSION, acepto_en: new Date().toISOString() },
    });
    setGuardando(false);
    if (error) {
      setErr('No se pudo guardar. Revisa tu conexión e intenta de nuevo.');
      return;
    }
    setListo(true);
  }

  return (
    <div className="fixed inset-0 z-[75] flex items-center justify-center bg-black/60 p-4">
      <div className="w-full max-w-sm rounded-2xl bg-white p-5 shadow-xl">
        <h2 className="text-lg font-extrabold text-stone-900">Antes de empezar</h2>
        <p className="mt-2 text-sm leading-relaxed text-stone-600">
          Para usar Gustito Xpress necesitas aceptar los{' '}
          <a href={TERMINOS_URL} target="_blank" rel="noreferrer" className="font-semibold text-stone-800 underline">
            Términos y Condiciones
          </a>{' '}
          y la{' '}
          <a href={PRIVACIDAD_URL} target="_blank" rel="noreferrer" className="font-semibold text-stone-800 underline">
            Política de Privacidad
          </a>
          . Incluye compartir tu ubicación en vivo únicamente mientras llevas una entrega, para que el
          cliente siga su pedido. Es una sola vez.
        </p>
        {err && <p className="mt-3 text-sm font-semibold text-red-600">{err}</p>}
        <button
          onClick={aceptar}
          disabled={guardando}
          className="mt-4 w-full rounded-2xl bg-stone-900 py-3 text-sm font-bold text-white disabled:opacity-60"
        >
          {guardando ? 'Guardando...' : 'Acepto y continuar'}
        </button>
      </div>
    </div>
  );
}
