const { useState, useEffect, useMemo } = React;

function parseHash() {
  const h = (window.location.hash || '#/').replace(/^#/, '');
  const parts = h.split('/').filter(Boolean);
  if (parts.length === 0) return { name: 'home' };
  if (parts[0] === 'software') return { name: 'all' };
  if (parts[0] === 'categoria' && parts[1]) return { name: 'category', slug: parts[1] };
  if (parts[0] === 'alternativa' && parts[1]) return { name: 'software', slug: parts[1] };
  if (parts[0] === 'chi-siamo') return { name: 'chi-siamo' };
  if (parts[0] === 'privacy') return { name: 'privacy' };
  if (parts[0] === 'contatti') return { name: 'contatti' };
  return { name: 'home' };
}

function slugifyCat(s) {
  return s.toLowerCase()
    .replace(/[àáâä]/g,'a').replace(/[èéêë]/g,'e').replace(/[ìíîï]/g,'i')
    .replace(/[òóôö]/g,'o').replace(/[ùúûü]/g,'u')
    .replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
}

function App() {
  const [data, setData] = useState(null);
  const [route, setRoute] = useState(parseHash());

  useEffect(() => {
    fetch('data/database.json').then(r => r.json()).then(setData).catch(e => console.error(e));
  }, []);

  useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const nav = (path) => {
    window.location.hash = '#' + path;
  };

  const categories = useMemo(() => {
    if (!data) return [];
    const map = {};
    for (const s of data) {
      if (!map[s.categoria]) map[s.categoria] = { name: s.categoria, slug: slugifyCat(s.categoria), count: 0, altCount: 0 };
      map[s.categoria].count++;
      map[s.categoria].altCount += (s.alternative||[]).length;
    }
    // New v4 categories first; legacy names kept as fallback for any leftover data
    const order = [
      "Produttività e Ufficio",
      "Project Management",
      "Grafica, Design e Video",
      "Comunicazione e Meeting",
      "Sicurezza e Privacy",
      "Marketing e Social",
      "CRM, Vendite e Supporto",
      "Cloud e Storage",
      "AI e Intelligenza Artificiale",
      "Siti Web e E-commerce",
      // legacy
      "Produttività","Grafica e Design","Video Editing","Comunicazione","Email Marketing","CRM e Vendite","AI e Chatbot","Software Italiani"
    ];
    const ordered = order.filter(n => map[n]).map(n => map[n]);
    // Any unknown category appended in original order
    for (const k of Object.keys(map)) if (!ordered.includes(map[k])) ordered.push(map[k]);
    return ordered;
  }, [data]);

  if (!data) {
    return (
      <div style={{minHeight:'100vh', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ink-3)', fontSize:14}}>
        Caricamento…
      </div>
    );
  }

  let view;
  if (route.name === 'home') {
    view = <HomePage data={data} categories={categories} onNav={nav} />;
  } else if (route.name === 'all') {
    view = <AllSoftwarePage data={data} categories={categories} onNav={nav} />;
  } else if (route.name === 'category') {
    const cat = categories.find(c => c.slug === route.slug);
    if (!cat) view = <NotFound onNav={nav} />;
    else {
      const list = data.filter(s => slugifyCat(s.categoria) === route.slug);
      view = <CategoryPage category={cat} softwareList={list} onNav={nav} />;
    }
  } else if (route.name === 'software') {
    const sw = data.find(s => s.slug === route.slug);
    if (!sw) view = <NotFound onNav={nav} />;
    else view = <SoftwarePage sw={sw} onNav={nav} allData={data} />;
  } else if (route.name === 'chi-siamo') {
    view = <ChiSiamoPage onNav={nav} />;
  } else if (route.name === 'privacy') {
    view = <PrivacyPage onNav={nav} />;
  } else if (route.name === 'contatti') {
    view = <ContattiPage onNav={nav} />;
  }

  return (
    <>
      <Header route={route} onNav={nav} />
      <main>{view}</main>
      <Footer categories={categories} onNav={nav} />
    </>
  );
}

function NotFound({ onNav }) {
  React.useEffect(() => {
    applyPageSEO({
      title: 'Pagina non trovata — AlternativeGratis.it',
      description: 'La pagina che cerchi non esiste. Torna alla home o sfoglia tutti i software.',
      path: '/404',
      robots: 'noindex,follow',
    });
    setSchemas([]);
  }, []);
  return (
    <div className="container-narrow" style={{padding:'80px 20px', textAlign:'center'}}>
      <h1 className="serif" style={{fontSize:48, fontWeight:400, margin:'0 0 12px'}}>Pagina non trovata</h1>
      <p style={{color:'var(--ink-3)', fontSize:16, margin:'0 0 24px'}}>Il software o la categoria che cerchi non esiste.</p>
      <a className="btn btn-primary" href="#/" onClick={(e)=>{e.preventDefault(); onNav('/');}}>Torna alla home</a>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);