/* DockEasy — illustrative product mockups (NOT real customer data) */
const { useState: useStateBM, useMemo: useMemoBM, useRef: useRefBM } = window.React;

/* ---------- Mappa ormeggi (vista Porti) ---------- */
const BERTH_STATES = {
  a: { label: 'Disponibile', dot: '#3FC1C9', cell: 'rgba(63,193,201,0.18)', text: '#0B3C49', bd: 'rgba(63,193,201,0.5)' },
  r: { label: 'Riservato', dot: '#137A86', cell: 'rgba(19,122,134,0.22)', text: '#0B3C49', bd: 'rgba(19,122,134,0.45)' },
  o: { label: 'Occupato', dot: '#0B3C49', cell: 'rgba(11,60,73,0.85)', text: '#ffffff', bd: 'rgba(11,60,73,0.9)' },
  m: { label: 'Manutenzione', dot: '#F0654A', cell: 'rgba(240,101,74,0.20)', text: '#0B3C49', bd: 'rgba(240,101,74,0.5)' },
};
const PONTOONS = [
  { id: 'A', slots: 'o o r a o o a r o m'.split(' ') },
  { id: 'B', slots: 'a o o a r o o a a r'.split(' ') },
  { id: 'C', slots: 'r o a o o m a o r a'.split(' ') },
  { id: 'D', slots: 'o a r o a o r a o a'.split(' ') },
];

function BerthMock() {
  const all = PONTOONS.flatMap((p) => p.slots);
  const total = all.length;
  const busy = all.filter((s) => s === 'o' || s === 'r').length;
  const occ = Math.round((busy / total) * 100);

  return (
    <div className="glass-strong rounded-[1.5rem] p-4 md:p-6">
      <div className="flex flex-col lg:flex-row gap-5">
        {/* berth grid */}
        <div className="flex-1">
          <div className="flex items-center justify-between mb-4">
            <div className="font-heading text-ink text-xl tracking-tight">Mappa ormeggi</div>
            <span className="font-mono text-[10px] text-ink/40 uppercase tracking-wide">mockup illustrativo</span>
          </div>
          <div className="flex flex-col gap-2.5">
            {PONTOONS.map((p) => (
              <div key={p.id} className="flex items-center gap-2.5">
                <span className="w-5 shrink-0 text-center font-heading text-ink/45 text-sm">{p.id}</span>
                <div className="flex-1 grid grid-cols-10 gap-1.5">
                  {p.slots.map((s, i) => {
                    const st = BERTH_STATES[s];
                    return (
                      <div key={i} title={st.label}
                        className="aspect-square rounded-[5px]"
                        style={{ background: st.cell, border: '1px solid ' + st.bd }}></div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
          {/* legend */}
          <div className="flex flex-wrap gap-x-4 gap-y-2 mt-5">
            {Object.values(BERTH_STATES).map((st) => (
              <span key={st.label} className="flex items-center gap-1.5 text-xs font-body text-ink/60">
                <span className="w-2.5 h-2.5 rounded-full" style={{ background: st.dot }}></span>{st.label}
              </span>
            ))}
          </div>
        </div>

        {/* occupancy panel */}
        <div className="lg:w-56 shrink-0 glass rounded-[1.1rem] p-5 flex flex-col">
          <div className="flex items-center gap-2 text-xs font-body text-teal">
            <span className="w-2 h-2 rounded-full bg-teal animate-pulse"></span> Occupazione in tempo reale
          </div>
          <div className="font-heading text-petrol text-5xl tracking-tight leading-none mt-4">{occ}%</div>
          <div className="text-xs text-ink/55 font-body mt-1">{busy} posti su {total} occupati o riservati</div>
          <div className="h-px bg-ink/10 my-4"></div>
          <div className="flex items-center justify-between text-sm font-body">
            <span className="text-ink/60">Arrivi previsti</span>
            <span className="font-heading text-ink text-lg">7</span>
          </div>
          <div className="flex items-center justify-between text-sm font-body mt-2">
            <span className="text-ink/60">Partenze</span>
            <span className="font-heading text-ink text-lg">4</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Ricerca porto con autocomplete (vista Diportisti) ----------
   Usa lo STESSO dataset della mappa (window.MARINAS); selezionando un porto
   si apre la mappa su quel porto, dove si raccolgono i dati. */
function PortSearch() {
  const [q, setQ] = useStateBM('');
  const [focus, setFocus] = useStateBM(false);
  const data = (window.MARINAS || []);
  const results = useMemoBM(() => {
    const s = q.trim().toLowerCase();
    if (!s) return data.slice(0, 6);
    return data.filter((p) => (p.nome + ' ' + p.citta + ' ' + p.regione).toLowerCase().includes(s)).slice(0, 7);
  }, [q]);

  const open = focus && results.length > 0;
  const linkFor = (p) => 'diportisti.html?porto=' + encodeURIComponent(p.nome) + '#mappa';
  return (
    <div className="glass-strong rounded-[1.5rem] p-4 md:p-6 max-w-xl mx-auto text-left">
      <div className="flex items-center justify-between mb-3">
        <div className="font-heading text-ink text-xl tracking-tight">Cerca un porto</div>
        <span className="font-mono text-[10px] text-ink/40 uppercase tracking-wide">{data.length} porti</span>
      </div>
      <div className="relative">
        <div className="glass rounded-full flex items-center gap-3 px-5 py-3.5">
          <Icon name="globe" className="w-5 h-5 text-teal shrink-0" />
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onFocus={() => setFocus(true)}
            onBlur={() => setTimeout(() => setFocus(false), 150)}
            placeholder="Cerca un porto…  es. Marina di Olbia"
            className="bg-transparent outline-none w-full text-sm font-body text-ink placeholder-ink/40" />
        </div>
        {open ? (
          <div className="absolute left-0 right-0 mt-2 glass-strong rounded-2xl p-2 z-20 shadow-[0_18px_40px_-16px_rgba(11,60,73,0.4)] max-h-72 overflow-y-auto">
            {results.map((p) => (
              <a key={p.nome} href={linkFor(p)}
                className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-white/60 transition">
                <span className={'w-2 h-2 rounded-full shrink-0 ' + (p.hl ? 'bg-coral' : 'bg-seaglass')}></span>
                <span className="min-w-0">
                  <span className="block text-sm font-medium font-body text-ink truncate">{p.nome}</span>
                  <span className="block text-xs font-body text-ink/45">{p.citta} · {p.regione}</span>
                </span>
                <Icon name="arrowUpRight" className="w-4 h-4 text-ink/30 ml-auto shrink-0" />
              </a>
            ))}
          </div>
        ) : null}
      </div>
      <p className="text-xs text-ink/45 font-body mt-3">
        Stessi dati della <a href="diportisti.html#mappa" className="text-teal hover:text-petrol">mappa libera</a>. Scegli un porto e lasciaci il tuo interesse — la prenotazione è in arrivo.
      </p>
    </div>
  );
}

Object.assign(window, { BerthMock, PortSearch });