import { useState, type FormEvent } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { supabase } from '../lib/supabase';

interface MeseroFila {
  mesero_id: string;
  nombre: string | null;
  telefono: string | null;
  correo: string | null;
  rol: string;
  creado_en: string;
}

const ROL_LABEL: Record<string, string> = { staff: 'Mesero', encargado: 'Encargado' };
const VACIO = { nombre: '', telefono: '', email: '', password: '', rol: 'staff' };

export default function Meseros({ restauranteId }: { restauranteId: string }) {
  const qc = useQueryClient();
  const [form, setForm] = useState(VACIO);
  const [guardando, setGuardando] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);
  // Caja de acceso: se muestra al crear un mesero o al cambiarle la clave, para
  // copiar y pasarle sus datos. `nuevo` decide el encabezado.
  const [acceso, setAcceso] = useState<{ nombre: string; correo: string; clave: string; nuevo: boolean } | null>(null);
  const [copiado, setCopiado] = useState(false);
  // Edicion de datos y cambio de clave, uno a la vez (contextual en la fila).
  const [editando, setEditando] = useState<MeseroFila | null>(null);
  const [editForm, setEditForm] = useState({ nombre: '', telefono: '' });
  const [claveMesero, setClaveMesero] = useState<MeseroFila | null>(null);
  const [claveVal, setClaveVal] = useState('');
  const [ocupado, setOcupado] = useState(false);

  const q = useQuery({
    queryKey: ['mis-meseros', restauranteId],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('mis_meseros');
      if (error) throw error;
      return (data as unknown as MeseroFila[]) ?? [];
    },
  });

  async function extraerError(error: unknown): Promise<string> {
    let m = (error as Error).message;
    try {
      const ctx = (error as { context?: Response }).context;
      if (ctx) {
        const j = (await ctx.json()) as { error?: string };
        if (j?.error) m = j.error;
      }
    } catch {
      /* sin cuerpo */
    }
    return m;
  }

  // Llama a la Edge Function y devuelve el mensaje de error, o null si salio bien.
  async function invocar(body: Record<string, unknown>): Promise<string | null> {
    const { data, error } = await supabase.functions.invoke('gestionar-mesero', { body });
    if (error) return await extraerError(error);
    if ((data as { error?: string })?.error) return (data as { error?: string }).error!;
    return null;
  }

  function limpiarAvisos() {
    setErr(null);
    setMsg(null);
  }

  async function crear(e: FormEvent) {
    e.preventDefault();
    limpiarAvisos();
    setGuardando(true);
    const error = await invocar({ accion: 'crear', ...form });
    setGuardando(false);
    if (error) {
      setErr(error);
      return;
    }
    setAcceso({ nombre: form.nombre, correo: form.email, clave: form.password, nuevo: true });
    setCopiado(false);
    setForm(VACIO);
    qc.invalidateQueries({ queryKey: ['mis-meseros', restauranteId] });
  }

  function abrirEdicion(m: MeseroFila) {
    limpiarAvisos();
    setClaveMesero(null);
    setEditForm({ nombre: m.nombre || '', telefono: m.telefono || '' });
    setEditando(m);
  }

  async function guardarEdicion() {
    if (!editando) return;
    if (!editForm.nombre.trim()) {
      setErr('El nombre no puede quedar vacío.');
      return;
    }
    limpiarAvisos();
    setOcupado(true);
    const error = await invocar({
      accion: 'editar',
      mesero_id: editando.mesero_id,
      nombre: editForm.nombre.trim(),
      telefono: editForm.telefono.trim(),
    });
    setOcupado(false);
    if (error) {
      setErr(error);
      return;
    }
    setMsg('Datos del mesero actualizados.');
    setEditando(null);
    qc.invalidateQueries({ queryKey: ['mis-meseros', restauranteId] });
  }

  function abrirClave(m: MeseroFila) {
    limpiarAvisos();
    setEditando(null);
    setClaveVal('');
    setClaveMesero(m);
  }

  async function guardarClave() {
    if (!claveMesero) return;
    if (claveVal.length < 6) {
      setErr('La clave debe tener al menos 6 caracteres.');
      return;
    }
    limpiarAvisos();
    setOcupado(true);
    const error = await invocar({ accion: 'resetear_clave', mesero_id: claveMesero.mesero_id, password: claveVal });
    setOcupado(false);
    if (error) {
      setErr(error);
      return;
    }
    // Mostrar el acceso con la clave nueva para copiar y pasarsela al mesero.
    setAcceso({ nombre: claveMesero.nombre || 'Mesero', correo: claveMesero.correo || '', clave: claveVal, nuevo: false });
    setCopiado(false);
    setClaveMesero(null);
    setClaveVal('');
  }

  async function eliminar(m: MeseroFila) {
    if (
      !confirm(
        `Eliminar al mesero "${m.nombre || 'Mesero'}"? Ya no podrá entrar al panel. Sus pedidos históricos conservan su nombre. No se puede deshacer.`,
      )
    )
      return;
    limpiarAvisos();
    const error = await invocar({ accion: 'eliminar', mesero_id: m.mesero_id });
    if (error) {
      setErr(error);
      return;
    }
    setMsg('Mesero eliminado.');
    qc.invalidateQueries({ queryKey: ['mis-meseros', restauranteId] });
  }

  const meseros = q.data ?? [];

  return (
    <div className="space-y-4">
      <p className="text-sm text-niebla">
        Tu equipo entra en <b className="text-white">gustitoxpress.app</b> con su propio correo y clave. El{' '}
        <b className="text-white">mesero</b> solo ve Mesas, Pedidos y el punto de venta. El{' '}
        <b className="text-white">encargado</b> además ve Cocina y el Menú, pero no Estadísticas, Caja, Inventario ni
        Configuración. Cada pedido queda registrado con el nombre de quien lo tomó.
      </p>

      {acceso && (
        <div className="rounded-xl bg-green-50 p-3 ring-1 ring-green-200">
          <p className="text-sm font-bold text-green-800">
            {acceso.nuevo
              ? `Mesero ${acceso.nombre} agregado. Pásale este acceso:`
              : `Clave de ${acceso.nombre} cambiada. Pásale el nuevo acceso:`}
          </p>
          <div className="mt-2 space-y-0.5 rounded-lg bg-white p-2.5 text-sm text-stone-700">
            <p>Entra a: <b>gustitoxpress.app</b></p>
            <p>Correo: <b>{acceso.correo}</b></p>
            <p>Clave: <b>{acceso.clave}</b></p>
          </div>
          <div className="mt-2 flex gap-2">
            <button
              onClick={() => {
                navigator.clipboard.writeText(
                  `Tu acceso a Gustito Xpress:\nEntra a: https://gustitoxpress.app\nCorreo: ${acceso.correo}\nClave: ${acceso.clave}`,
                );
                setCopiado(true);
              }}
              className="rounded-lg bg-green-600 px-3 py-1.5 text-xs font-bold text-white"
            >
              {copiado ? 'Copiado ✓' : 'Copiar acceso'}
            </button>
            <button onClick={() => setAcceso(null)} className="rounded-lg px-3 py-1.5 text-xs font-bold text-green-800 hover:bg-green-100">
              Listo
            </button>
          </div>
        </div>
      )}
      {q.isLoading && <p className="text-sm text-niebla">Cargando...</p>}
      {meseros.length > 0 ? (
        <ul className="space-y-2">
          {meseros.map((m) => (
            <li key={m.mesero_id} className="rounded-xl border bg-superficie p-3">
              {editando?.mesero_id === m.mesero_id ? (
                // ---- Editar nombre / telefono ----
                <div className="space-y-2">
                  <p className="text-xs font-bold text-niebla">Editar mesero</p>
                  <div className="grid grid-cols-2 gap-2">
                    <input
                      className="input"
                      placeholder="Nombre"
                      value={editForm.nombre}
                      onChange={(e) => setEditForm({ ...editForm, nombre: e.target.value })}
                    />
                    <input
                      className="input"
                      placeholder="Telefono (opcional)"
                      value={editForm.telefono}
                      onChange={(e) => setEditForm({ ...editForm, telefono: e.target.value })}
                      inputMode="tel"
                    />
                  </div>
                  <p className="text-[11px] text-niebla">El correo no se puede cambiar. Es su usuario de entrada.</p>
                  <div className="flex gap-2">
                    <button onClick={guardarEdicion} disabled={ocupado} className="btn bg-dorado text-noche text-xs disabled:opacity-60">
                      {ocupado ? 'Guardando...' : 'Guardar'}
                    </button>
                    <button onClick={() => setEditando(null)} className="rounded-lg px-3 py-1.5 text-xs font-bold text-niebla hover:bg-white/5">
                      Cancelar
                    </button>
                  </div>
                </div>
              ) : claveMesero?.mesero_id === m.mesero_id ? (
                // ---- Cambiar clave ----
                <div className="space-y-2">
                  <p className="text-xs font-bold text-niebla">Nueva clave de {m.nombre || 'Mesero'}</p>
                  <input
                    className="input"
                    type="text"
                    placeholder="Clave nueva (minimo 6)"
                    value={claveVal}
                    onChange={(e) => setClaveVal(e.target.value)}
                    minLength={6}
                    autoFocus
                  />
                  <p className="text-[11px] text-niebla">Se la muestro para que la copies y se la pases. Reemplaza la anterior.</p>
                  <div className="flex gap-2">
                    <button onClick={guardarClave} disabled={ocupado} className="btn bg-dorado text-noche text-xs disabled:opacity-60">
                      {ocupado ? 'Cambiando...' : 'Cambiar clave'}
                    </button>
                    <button onClick={() => setClaveMesero(null)} className="rounded-lg px-3 py-1.5 text-xs font-bold text-niebla hover:bg-white/5">
                      Cancelar
                    </button>
                  </div>
                </div>
              ) : (
                // ---- Fila normal ----
                <div className="flex items-center justify-between gap-2">
                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <p className="truncate text-sm font-bold">{m.nombre || 'Mesero'}</p>
                      <span className="shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-niebla">
                        {ROL_LABEL[m.rol] ?? m.rol}
                      </span>
                    </div>
                    <p className="truncate text-xs text-niebla">
                      {m.correo || 'sin correo'}
                      {m.telefono ? ` · ${m.telefono}` : ''}
                    </p>
                  </div>
                  <div className="flex shrink-0 items-center gap-1">
                    <button
                      onClick={() => abrirEdicion(m)}
                      className="rounded-lg px-2.5 py-1.5 text-xs font-bold text-niebla hover:bg-white/5"
                    >
                      Editar
                    </button>
                    <button
                      onClick={() => abrirClave(m)}
                      className="rounded-lg px-2.5 py-1.5 text-xs font-bold text-niebla hover:bg-white/5"
                    >
                      Cambiar clave
                    </button>
                    <button
                      onClick={() => eliminar(m)}
                      className="rounded-lg p-2 text-red-500 hover:bg-red-50"
                      title="Eliminar mesero"
                      aria-label="Eliminar mesero"
                    >
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6" />
                      </svg>
                    </button>
                  </div>
                </div>
              )}
            </li>
          ))}
        </ul>
      ) : (
        !q.isLoading && <p className="text-sm text-niebla">Aún no tienes meseros. Agrega el primero abajo.</p>
      )}

      {err && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">{err}</p>}
      {msg && <p className="rounded-lg bg-green-50 px-3 py-2 text-sm text-green-700">{msg}</p>}

      <form onSubmit={crear} className="space-y-2 border-t pt-4">
        <p className="text-xs font-bold text-niebla">Agregar a tu equipo</p>
        <select className="input" value={form.rol} onChange={(e) => setForm({ ...form, rol: e.target.value })}>
          <option value="staff">Mesero · solo Mesas, Pedidos y punto de venta</option>
          <option value="encargado">Encargado · además Cocina y Menú, sin lo gerencial</option>
        </select>
        <div className="grid grid-cols-2 gap-2">
          <input className="input" placeholder="Nombre" value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} required />
          <input className="input" placeholder="Telefono (opcional)" value={form.telefono} onChange={(e) => setForm({ ...form, telefono: e.target.value })} inputMode="tel" />
        </div>
        <input className="input" type="email" placeholder="Correo del mesero" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
        <input
          className="input"
          type="text"
          placeholder="Clave (minimo 6, se la das al mesero)"
          value={form.password}
          onChange={(e) => setForm({ ...form, password: e.target.value })}
          required
          minLength={6}
        />
        <button disabled={guardando} className="btn bg-dorado text-noche disabled:opacity-60">
          {guardando ? 'Agregando...' : `Agregar ${ROL_LABEL[form.rol]?.toLowerCase() ?? 'al equipo'}`}
        </button>
      </form>
    </div>
  );
}
