import { useEffect, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { RUBROS, ESTADOS_VE, type Restaurante, type Horarios, type DiaSemana, type Json } from '@gustito/shared';
import { supabase } from '../../lib/supabase';
import { subirImagen } from '../../lib/storage';
import MapaUbicacion from './MapaUbicacion';

const DIAS: [DiaSemana, string][] = [
  ['lun', 'Lunes'],
  ['mar', 'Martes'],
  ['mie', 'Miercoles'],
  ['jue', 'Jueves'],
  ['vie', 'Viernes'],
  ['sab', 'Sabado'],
  ['dom', 'Domingo'],
];

const COLORES = ['#F97316', '#DC2626', '#E11D48', '#16A34A', '#0891B2', '#2563EB', '#7C3AED', '#DB2777'];

export default function PasoPerfil({
  restaurante,
  onGuardado,
}: {
  restaurante: Restaurante;
  onGuardado?: () => void;
}) {
  const qc = useQueryClient();
  const [descripcion, setDescripcion] = useState(restaurante.descripcion ?? '');
  const [direccion, setDireccion] = useState(restaurante.direccion ?? '');
  const [lat, setLat] = useState<number | null>(restaurante.latitud);
  const [lng, setLng] = useState<number | null>(restaurante.longitud);
  const [telefono, setTelefono] = useState(restaurante.telefono ?? '');
  const [tasa, setTasa] = useState(restaurante.tasa_bs?.toString() ?? '');
  const [logo, setLogo] = useState(restaurante.logo_url);
  const [portada, setPortada] = useState(restaurante.portada_url);
  const [color, setColor] = useState(restaurante.color_primario || '#F97316');
  const [tasaAuto, setTasaAuto] = useState(restaurante.tasa_automatica);
  const [rubros, setRubros] = useState<string[]>(
    restaurante.rubros?.length ? restaurante.rubros : restaurante.rubro ? [restaurante.rubro] : [],
  );
  const [estadoVe, setEstadoVe] = useState(restaurante.estado_ve ?? '');
  const [municipio, setMunicipio] = useState(restaurante.municipio ?? '');
  const [enDirectorio, setEnDirectorio] = useState(restaurante.en_directorio ?? true);
  const tasaGlobalQ = useQuery({
    queryKey: ['tasa_cambio'],
    queryFn: async () => {
      const { data } = await supabase.from('tasa_cambio').select('tasa_bs').eq('id', 1).maybeSingle();
      return (data as { tasa_bs: number } | null)?.tasa_bs ?? null;
    },
  });
  const [horarios, setHorarios] = useState<Horarios>(restaurante.horarios ?? {});
  const [guardando, setGuardando] = useState(false);
  const [ok, setOk] = useState(false);

  // Vista previa en vivo: refleja los cambios en la tienda de muestra mientras
  // editas, sin tener que guardar. Actualiza la cache que alimenta la preview.
  useEffect(() => {
    qc.setQueryData(['mi-restaurante', restaurante.id], (prev: Restaurante | undefined) =>
      prev
        ? {
            ...prev,
            color_primario: color,
            descripcion: descripcion || null,
            logo_url: logo,
            portada_url: portada,
            tasa_bs: tasaAuto ? tasaGlobalQ.data ?? prev.tasa_bs : tasa ? Number(tasa) : prev.tasa_bs,
          }
        : prev
    );
  }, [color, descripcion, logo, portada, tasa, tasaAuto, tasaGlobalQ.data, restaurante.id, qc]);

  function setDia(dia: DiaSemana, patch: Partial<{ activo: boolean; abre: string; cierra: string }>) {
    setHorarios((h) => ({ ...h, [dia]: { activo: false, ...h[dia], ...patch } }));
  }

  async function subir(file: File | undefined, set: (u: string) => void, carpeta: string) {
    if (!file) return;
    try {
      set(await subirImagen(file, carpeta, restaurante.id));
    } catch (e) {
      alert('No se pudo subir la imagen: ' + (e as Error).message);
    }
  }

  async function guardar() {
    setGuardando(true);
    setOk(false);
    const { error } = await supabase
      .from('restaurantes')
      .update({
        descripcion: descripcion || null,
        direccion: direccion || null,
        latitud: lat,
        longitud: lng,
        telefono: telefono || null,
        tasa_bs: tasaAuto ? (tasaGlobalQ.data ?? (tasa ? Number(tasa) : null)) : tasa ? Number(tasa) : null,
        tasa_automatica: tasaAuto,
        logo_url: logo,
        portada_url: portada,
        color_primario: color,
        horarios: horarios as unknown as Json,
        rubro: rubros[0] ?? null,
        rubros,
        estado_ve: estadoVe || null,
        municipio: municipio || null,
        en_directorio: enDirectorio,
      })
      .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-4">
      <div className="grid grid-cols-2 gap-3">
        <ImagenCampo label="Logo" url={logo} onFile={(f) => subir(f, setLogo, 'logos')} />
        <ImagenCampo label="Portada" url={portada} onFile={(f) => subir(f, setPortada, 'portadas')} />
      </div>

      <Campo label="Color de tu marca">
        <div className="flex items-center gap-3">
          <input
            type="color"
            value={color}
            onChange={(e) => setColor(e.target.value)}
            className="w-11 h-10 rounded-lg border border-white/10 cursor-pointer p-0.5 bg-superficie"
          />
          <div className="flex flex-wrap gap-1.5">
            {COLORES.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setColor(c)}
                className="w-7 h-7 rounded-full"
                style={{
                  background: c,
                  boxShadow: color.toLowerCase() === c.toLowerCase() ? '0 0 0 2px #1c1917' : 'none',
                }}
                aria-label={c}
              />
            ))}
          </div>
        </div>
      </Campo>

      <Campo label="Descripcion">
        <textarea className="input" rows={2} value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
      </Campo>
      <Campo label="Telefono / WhatsApp">
        <input className="input" value={telefono} onChange={(e) => setTelefono(e.target.value)} />
      </Campo>

      <div className="rounded-xl border border-dorado/30 bg-dorado/15/40 p-3">
        <p className="text-sm font-bold text-dorado">Tu negocio en la vitrina</p>
        <p className="mb-2 text-xs text-niebla">Para que la gente te descubra en Gustito Xpress.</p>
        <span className="text-xs font-medium text-niebla">Que vendes (elige todo lo que apliques)</span>
        <div className="mb-3 mt-1.5 flex flex-wrap gap-1.5">
          {RUBROS.map((r) => {
            const on = rubros.includes(r);
            return (
              <button
                key={r}
                type="button"
                onClick={() => setRubros((prev) => (on ? prev.filter((x) => x !== r) : [...prev, r]))}
                className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
                  on ? 'bg-dorado text-noche' : 'bg-white/10 text-niebla'
                }`}
              >
                {r}
              </button>
            );
          })}
        </div>

        <div className="grid grid-cols-2 gap-2">
          <label className="block">
            <span className="text-xs font-medium text-niebla">Estado</span>
            <select className="input mt-1" value={estadoVe} onChange={(e) => setEstadoVe(e.target.value)}>
              <option value="">Elige...</option>
              {ESTADOS_VE.map((e) => (
                <option key={e} value={e}>
                  {e}
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="text-xs font-medium text-niebla">Municipio / zona</span>
            <input className="input mt-1" value={municipio} onChange={(e) => setMunicipio(e.target.value)} placeholder="Ej: Araure" />
          </label>
        </div>
        <label className="mt-3 flex items-center gap-2 text-sm">
          <input type="checkbox" checked={enDirectorio} onChange={(e) => setEnDirectorio(e.target.checked)} className="accent-dorado" />
          <span>Aparecer en la vitrina publica de Gustito Xpress</span>
        </label>
      </div>

      <div>
        <span className="text-xs font-medium text-niebla">Tasa de cambio (Bs por $)</span>
        <label className="flex items-center gap-2 mt-1 text-sm">
          <input type="checkbox" checked={tasaAuto} onChange={(e) => setTasaAuto(e.target.checked)} />
          <span>
            Automatica segun BCV{tasaGlobalQ.data ? ` — hoy Bs ${tasaGlobalQ.data} / $` : ''}
          </span>
        </label>
        {!tasaAuto && (
          <input
            className="input mt-2"
            inputMode="decimal"
            placeholder="Tasa manual (Bs por $)"
            value={tasa}
            onChange={(e) => setTasa(e.target.value)}
          />
        )}
      </div>
      <Campo label="Direccion">
        <input className="input" value={direccion} onChange={(e) => setDireccion(e.target.value)} />
      </Campo>

      <div>
        <p className="text-xs font-medium text-niebla mb-1">
          Ubicacion en el mapa (para que tus clientes y repartidores te encuentren)
        </p>
        <MapaUbicacion lat={lat} lng={lng} onCambio={(a, b) => { setLat(a); setLng(b); }} />
      </div>

      <div>
        <p className="text-xs font-medium text-niebla mb-1">Horarios</p>
        <div className="space-y-1">
          {DIAS.map(([dia, nombre]) => {
            const h = horarios[dia];
            const activo = h?.activo ?? false;
            return (
              <div key={dia} className="flex items-center gap-2 text-sm">
                <label className="flex items-center gap-1 w-28">
                  <input type="checkbox" checked={activo} onChange={(e) => setDia(dia, { activo: e.target.checked })} />
                  {nombre}
                </label>
                <input
                  type="time"
                  className="input py-1 disabled:opacity-40"
                  disabled={!activo}
                  value={h?.abre ?? '08:00'}
                  onChange={(e) => setDia(dia, { abre: e.target.value })}
                />
                <span className="text-niebla">a</span>
                <input
                  type="time"
                  className="input py-1 disabled:opacity-40"
                  disabled={!activo}
                  value={h?.cierra ?? '20:00'}
                  onChange={(e) => setDia(dia, { cierra: e.target.value })}
                />
              </div>
            );
          })}
        </div>
      </div>

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

function ImagenCampo({ label, url, onFile }: { label: string; url: string | null; onFile: (f?: File) => void }) {
  return (
    <label className="block">
      <span className="text-xs font-medium text-niebla">{label}</span>
      <div className="mt-1 border border-dashed rounded-lg h-24 flex items-center justify-center overflow-hidden bg-superficie-2 cursor-pointer">
        {url ? (
          <img src={url} alt="" className="h-full w-full object-cover" />
        ) : (
          <span className="text-xs text-niebla">Subir imagen</span>
        )}
        <input type="file" accept="image/*" className="hidden" onChange={(e) => onFile(e.target.files?.[0])} />
      </div>
    </label>
  );
}

function Campo({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="text-xs font-medium text-niebla">{label}</span>
      <div className="mt-1">{children}</div>
    </label>
  );
}
