import { useEffect } from 'react';
import type { Restaurante } from '@gustito/shared';

// Iconos por defecto de Gustito Xpress (siempre validos para el icono instalado en Android).
const ICONS_DEFAULT = [
  { src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
  { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
  { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
];

function setLink(rel: string, href: string) {
  let el = document.head.querySelector<HTMLLinkElement>(`link[rel="${rel}"]`);
  if (!el) {
    el = document.createElement('link');
    el.rel = rel;
    document.head.appendChild(el);
  }
  el.href = href;
}

function setMeta(name: string, content: string) {
  let el = document.head.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
  if (!el) {
    el = document.createElement('meta');
    el.name = name;
    document.head.appendChild(el);
  }
  el.content = content;
}

// Convierte la tienda de cada restaurante en un PWA propio:
// nombre, color y pantalla de inicio del restaurante. En iPhone, el icono de
// inicio usa el logo del restaurante si lo tiene.
export function useManifestRestaurante(rest: Restaurante | undefined) {
  useEffect(() => {
    if (!rest) return;
    const color = rest.color_primario || '#F97316';
    const prevTitle = document.title;
    const prevManifest = document.head.querySelector<HTMLLinkElement>('link[rel="manifest"]')?.href;

    const manifest = {
      name: rest.nombre,
      short_name: rest.nombre.slice(0, 18),
      description: rest.descripcion || `Pide en ${rest.nombre}`,
      lang: 'es',
      start_url: `/${rest.slug}`,
      scope: `/${rest.slug}`,
      display: 'standalone',
      orientation: 'portrait',
      background_color: '#FDFBF7',
      theme_color: color,
      icons: ICONS_DEFAULT,
    };
    const blobUrl = URL.createObjectURL(
      new Blob([JSON.stringify(manifest)], { type: 'application/manifest+json' }),
    );

    setLink('manifest', blobUrl);
    setMeta('theme-color', color);
    setMeta('apple-mobile-web-app-title', rest.nombre);
    if (rest.logo_url) setLink('apple-touch-icon', rest.logo_url);
    document.title = rest.nombre;

    return () => {
      URL.revokeObjectURL(blobUrl);
      if (prevManifest) setLink('manifest', prevManifest);
      setMeta('theme-color', '#F97316');
      setMeta('apple-mobile-web-app-title', 'Gustito Xpress');
      setLink('apple-touch-icon', '/apple-touch-icon.png');
      document.title = prevTitle;
    };
  }, [rest]);
}
