/* === Family 03 · Tubetti trasparenti (rich) === */

function FamilyTubetti({ family, navigate, highlightSku }) {
  const [material, setMaterial] = React.useState('flat'); // flat | pvc | eva
  const [pack, setPack] = React.useState('MASTER'); // MASTER | MINI
  const [colore, setColore] = React.useState('BLUE'); // BLUE | CRISTAL
  const [shore, setShore] = React.useState('70'); // 70 | 83 | 89

  // When highlightSku is set, pre-select the configurator to match the product
  React.useEffect(() => {
    if (!highlightSku) return;
    const all = window.PRODUCTS_DATA || [];
    const p = all.find(x => x.sku === highlightSku);
    if (p && p.kind === 'tubetto') {
      if (p.sub) setMaterial(p.sub);
      if (p.shore) setShore(p.shore);
      if (p.colore) setColore(p.colore);
      if (p.pack) setPack(p.pack);
    }
  }, [highlightSku]);

  useHighlightScroll(highlightSku);

  // EVA is only Shore 89 / CRISTAL — clamp values
  React.useEffect(() => {
    if (material === 'eva') {
      if (shore !== '89') setShore('89');
      if (colore !== 'CRISTAL') setColore('CRISTAL');
    } else {
      if (shore === '89') setShore('70');
    }
  }, [material]);

  const rows = getProducts(p =>
    p.kind === 'tubetto' &&
    p.sub === material &&
    p.pack === pack &&
    p.colore === colore &&
    p.shore === shore
  );

  // Group by sezione cavo
  const grouped = [0,1,2,3,4,5,6].map(s => ({
    label: `Sezione cavo ${s} · Ø max ${[0,3,6,9,12,15,18][s]} mm`,
    rows: rows.filter(r => r.sez === String(s))
  })).filter(g => g.rows.length > 0);

  const sections = [
    { n: 0, dMax: 0,  img: 'products/03-tubetti/tubetti_sezione_0.png' },
    { n: 1, dMax: 3,  img: 'products/03-tubetti/tubetti_sezione_1.png' },
    { n: 2, dMax: 6,  img: 'products/03-tubetti/tubetti_sezione_2.png' },
    { n: 3, dMax: 9,  img: 'products/03-tubetti/tubetti_sezione_3.png' },
    { n: 4, dMax: 12, img: 'products/03-tubetti/tubetti_sezione_4.png' },
    { n: 5, dMax: 15, img: 'products/03-tubetti/tubetti_sezione_5.png' },
    { n: 6, dMax: 18, img: 'products/03-tubetti/tubetti_sezione_6.png' },
  ];

  const tableColumns = [
    { key: "sku", label: "Codice", cls: "code" },
    { key: "tipo", label: "Tipo" },
    { key: "shore", label: "Shore" },
    { key: "colore", label: "Colore" },
    { key: "pack", label: "Pack" },
    { key: "sez", label: "Sez." },
    { key: "ltag", label: "L. tag" },
    { key: "largh", label: "Largh." },
    { key: "qta", label: "Q.tà" },
    { key: "cembre", label: "Comp. Cembre" },
  ];

  const matLabel = {
    flat: 'FLAT — PVC 0,5 mm',
    pvc: '2 MM — PVC',
    eva: '2 MM — HF EVA Green Flex ML-50',
  }[material];

  const titleConfig = `${matLabel} · Shore ${shore} · ${colore} · ${pack}`;

  return (
    <>
      <FamilyHero family={family} navigate={navigate} />

      {/* === CONFIGURATORE === */}
      <section className="section">
        <div className="container">
          <div className="grid-2-narrative tight" style={{ alignItems: "start", marginBottom: 56 }}>
            <div>
              <Eyebrow>Cinque variabili per <span className="accent">configurare il tuo tubetto</span></Eyebrow>
              <h2 className="h1" style={{ marginTop: 18 }}>Configura il tuo tubetto.</h2>
              <HRule />
              <p className="lead">Sistema, materiale, durezza, colore e quantità per pack — applicati alle 7 sezioni standard 0 → 6.</p>
            </div>
            <div style={{ display: "grid", gap: 14 }}>
              {[
                { label: "Sistema",   value: "FLAT 0,5 · 2 mm" },
                { label: "Materiale", value: "PVC VØ U.V. · HF EVA" },
                { label: "Durezza",   value: "Shore 70 morbido · 83 rigido · 89 HF Gummy" },
                { label: "Colore",    value: "Cristal · Blue" },
                { label: "Pack",      value: "Master · Mini" },
                { label: "Lunghezze", value: "10 · 12 · 15 · 20 · 30 · 40 mm" },
              ].map((r, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, padding: "12px 0", borderBottom: i < 5 ? "1px solid var(--c-line-2)" : "none" }}>
                  <div style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, alignSelf: "center" }}>{r.label}</div>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>

          {/* === GALLERIA SEZIONI === */}
          <div style={{ marginTop: 32 }}>
            <Eyebrow>Galleria — <span className="accent">le sette grandezze</span></Eyebrow>
            <h3 style={{ fontSize: 22, fontWeight: 700, marginTop: 6, marginBottom: 24, letterSpacing: "-0.01em" }}>Sezioni 0 → 6 · lunghezze standard 10 / 12 / 15 / 20 / 30 / 40 mm</h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 12 }}>
              {sections.map(s => (
                <div key={s.n} style={{ background: "var(--c-tile)", borderRadius: 6, padding: 16, textAlign: "center" }}>
                  <div style={{ aspectRatio: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <img src={`assets/${s.img}`} alt={`Sezione ${s.n}`} style={{ width: "100%", height: "100%", objectFit: "contain" }} />
                  </div>
                  <div style={{ marginTop: 12, fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Sez. {s.n}</div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: "var(--c-ink)", marginTop: 4 }}>Ø {s.dMax} mm</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* === LISTINI === */}
      <section className="section tile">
        <div className="container">
          <Eyebrow>Listini di dettaglio — <span className="accent">{rows.length} SKU per variante</span></Eyebrow>
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 32 }}>Scegli la variante per vedere il listino.</h2>

          <div style={{ display: "grid", gap: 16, padding: 24, background: "var(--c-paper)", borderRadius: 8, border: "1px solid var(--c-line)", marginBottom: 32 }}>
            <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Materiale</span>
              <Segmented value={material} onChange={setMaterial} options={[
                { value: 'flat', label: 'FLAT 0,5 mm · PVC' },
                { value: 'pvc',  label: '2 mm · PVC' },
                { value: 'eva',  label: '2 mm · HF EVA' },
              ]} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Durezza</span>
              <Segmented value={shore} onChange={setShore} options={
                material === 'eva'
                  ? [{ value: '89', label: 'Shore 89 · HF Gummy' }]
                  : [{ value: '70', label: 'Shore 70 · morbido' }, { value: '83', label: 'Shore 83 · rigido' }]
              } />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Colore</span>
              <Segmented value={colore} onChange={setColore} options={
                material === 'eva'
                  ? [{ value: 'CRISTAL', label: 'Cristal' }]
                  : [{ value: 'BLUE', label: 'Blue' }, { value: 'CRISTAL', label: 'Cristal' }]
              } />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--c-mute)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Pack</span>
              <Segmented value={pack} onChange={setPack} options={[
                { value: 'MASTER', label: 'Master · industrial' },
                { value: 'MINI',   label: 'Mini · dispenser' },
              ]} />
            </div>
          </div>

          <GroupedTable
            eyebrow={pack === 'MASTER' ? "Tag holders · industrial version" : "Tag holders · reduced in dispenser version"}
            title={titleConfig}
            subtitle={`${rows.length} SKU · 42 codici totali per variante completa.`}
            columns={tableColumns}
            groups={grouped}
            highlightSku={highlightSku}
            footer={DISCLAIMER}
          />
        </div>
      </section>

      <FamilyCallout navigate={navigate} />
    </>
  );
}

Object.assign(window, { FamilyTubetti });