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

// La tienda del comensal vive en el app de pedidos (otro dominio).
const PROD = import.meta.env.PROD;
const TIENDA = PROD ? 'https://pedir.gustitoxpress.app' : 'http://localhost:5173';
function urlTienda(slug: string) {
  return `${TIENDA}/${slug}`;
}

export default function PasoPublicar({ restaurante }: { restaurante: Restaurante }) {
  const qc = useQueryClient();
  const [publicando, setPublicando] = useState(false);

  const prodQ = useQuery({
    queryKey: ['conteo-productos', restaurante.id],
    queryFn: async () => {
      const { count } = await supabase
        .from('productos')
        .select('id', { count: 'exact', head: true })
        .eq('restaurante_id', restaurante.id);
      return count ?? 0;
    },
  });

  async function publicar() {
    setPublicando(true);
    const { error } = await supabase
      .from('restaurantes')
      .update({ publicado: true, onboarding_completo: true })
      .eq('id', restaurante.id);
    setPublicando(false);
    if (error) alert(error.message);
    else qc.invalidateQueries({ queryKey: ['mi-restaurante'] });
  }

  const link = urlTienda(restaurante.slug);
  const sinProductos = (prodQ.data ?? 0) === 0;

  return (
    <div className="space-y-4">
      <div className="bg-superficie border rounded-xl p-4">
        <h3 className="font-semibold mb-2">Todo listo para publicar</h3>
        <ul className="text-sm space-y-1">
          <li>Nombre: <b>{restaurante.nombre}</b></li>
          <li>Enlace: <span className="text-dorado">{link}</span></li>
          <li>Productos: <b>{prodQ.data ?? '...'}</b></li>
        </ul>
        {sinProductos && (
          <p className="text-sm text-amber-600 mt-2">
            Aun no tienes productos. Puedes publicar, pero tu tienda se vera vacia.
          </p>
        )}
      </div>

      <button onClick={publicar} disabled={publicando} className="btn w-full bg-dorado text-noche disabled:opacity-60">
        {publicando ? 'Publicando...' : 'Publicar mi tienda'}
      </button>
      <p className="text-xs text-niebla text-center">
        Al publicar, tu tienda queda visible y lista para recibir pedidos.
      </p>

      <CompartirTienda slug={restaurante.slug} nombre={restaurante.nombre} />
    </div>
  );
}
