/* global React */
const { Fragment } = React;

// Quotan product mockup: a "computo metrico" view with line items + price column
function QuotanMock({ compact = false }) {
  const rows = [
    ['01.A.04.001', 'Demolizione tramezzature in mattoni forati', 'm²', '24,5', '18,40', '450,80'],
    ['01.A.04.002', 'Rimozione pavimento in piastrelle', 'm²', '38,2', '12,90', '492,78'],
    ['02.B.01.015', 'Tracce per impianti su muratura', 'm', '46,0', '8,75', '402,50'],
    ['03.A.02.108', 'Massetto autolivellante 5 cm', 'm²', '38,2', '32,60', '1.245,32'],
    ['03.B.01.044', 'Pavimento gres porcellanato 60×60', 'm²', '38,2', '78,50', '2.998,70'],
    ['04.A.01.220', 'Tinteggiatura idropittura traspirante', 'm²', '142,8', '11,20', '1.599,36'],
    ['05.A.02.011', 'Punto luce o presa, completo', 'cad', '24', '62,00', '1.488,00'],
  ];
  return (
    <div className="mock" style={{ width: '100%' }}>
      <div className="mock-bar">
        <span className="dot" style={{ background: '#FF5F57' }}></span>
        <span className="dot" style={{ background: '#FEBC2E' }}></span>
        <span className="dot" style={{ background: '#28C840' }}></span>
        <span className="url">app.quotan.it / preventivo · ristrutturazione appartamento — Via Battisti 12</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '220px 1fr', minHeight: compact ? 360 : 460 }}>
        {!compact && (
          <aside style={{ borderRight: '1px solid var(--line-light)', background: '#FAFAFA', padding: '18px 14px', fontSize: 13 }}>
            <div className="mono" style={{ fontSize: 11, color: '#9A9A9A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>Preventivo</div>
            <div style={{ fontWeight: 700, marginBottom: 4 }}>PRV-0044</div>
            <div style={{ color: '#6A6A6A', marginBottom: 22 }}>Apr 27 · Bozza</div>
            <div className="mono" style={{ fontSize: 11, color: '#9A9A9A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>Sezioni</div>
            {[
              ['Demolizioni', '01', true],
              ['Murature', '02', false],
              ['Pavimenti', '03', false],
              ['Finiture', '04', false],
              ['Impianti', '05', false],
            ].map(([name, code, active]) => (
              <div key={code} style={{
                display: 'flex', justifyContent: 'space-between', padding: '8px 10px',
                background: active ? '#FFF5EE' : 'transparent',
                color: active ? '#F97316' : '#1C1C1E',
                borderLeft: active ? '2px solid #F97316' : '2px solid transparent',
                fontWeight: active ? 600 : 500,
                marginLeft: -14, paddingLeft: 12, fontSize: 13,
              }}>
                <span>{name}</span>
                <span className="mono" style={{ opacity: 0.6, fontSize: 11 }}>{code}</span>
              </div>
            ))}
            <div style={{ marginTop: 28, padding: 14, background: '#1C1C1E', color: 'white', borderRadius: 4 }}>
              <div className="mono" style={{ fontSize: 10, color: '#A0A0A0', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Totale lavori</div>
              <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: '-0.02em' }}>€ 44.218,40</div>
              <div style={{ fontSize: 11, color: '#A0A0A0', marginTop: 4 }}>16 voci · margine 18%</div>
            </div>
          </aside>
        )}
        <div style={{ padding: compact ? 14 : '18px 22px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Demolizioni e rimozioni</div>
              <div className="mono" style={{ fontSize: 11, color: '#8A8A8A', marginTop: 2 }}>Cap. 01 · 7 voci</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <span className="mono" style={{ fontSize: 10, padding: '6px 8px', background: '#E8F7EE', color: '#1A8A4A', borderRadius: 3, fontWeight: 600 }}>● PREZZARIO VENETO</span>
              <span className="mono" style={{ fontSize: 10, padding: '6px 8px', background: '#FFF5EE', color: '#F97316', borderRadius: 3, fontWeight: 600 }}>● TUO LISTINO</span>
            </div>
          </div>
          <div style={{ borderTop: '1px solid var(--line-light)' }}>
            <div className="mono" style={{
              display: 'grid', gridTemplateColumns: '1fr 1.6fr 0.5fr 0.7fr 0.8fr 0.9fr', gap: 10,
              fontSize: 10, padding: '10px 0', color: '#9A9A9A', textTransform: 'uppercase', letterSpacing: '0.1em',
              borderBottom: '1px solid var(--line-light)',
            }}>
              <span>Codice</span><span>Voce</span><span>U.M.</span><span>Q.tà</span><span>P. unit.</span><span style={{ textAlign: 'right' }}>Totale €</span>
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr 1.6fr 0.5fr 0.7fr 0.8fr 0.9fr', gap: 10,
                fontSize: 12, padding: '12px 0', borderBottom: '1px solid var(--line-light)',
                alignItems: 'center',
              }}>
                <span className="mono" style={{ color: '#8A8A8A' }}>{r[0]}</span>
                <span style={{ color: '#1C1C1E' }}>{r[1]}</span>
                <span className="mono" style={{ color: '#6A6A6A' }}>{r[2]}</span>
                <span className="mono">{r[3]}</span>
                <span className="mono">{r[4]}</span>
                <span className="mono" style={{ textAlign: 'right', fontWeight: 700 }}>{r[5]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// Excel "vintage" mockup
function ExcelMock() {
  const cols = ['A', 'B', 'C', 'D', 'E', 'F'];
  const rows = [
    ['demolizione muri', 'mq', '24', '?', '=C2*D2', 'circa 400?'],
    ['piastrelle bagno', 'mq', '12', '60', '=C3*D3', '720'],
    ['intonaco', '', '~80', '15', '=C4*D4', ''],
    ['massetto', 'mq', '38', '30', '=C5*D5', ''],
    ['idraulico', 'a corpo', '1', '2500', '2500', ''],
    ['imbianco', 'mq', '140', '8', '=C7*D7', ''],
    ['imprevisti', '', '', '', '500?', ''],
    ['', '', '', '', '', ''],
    ['TOTALE', '', '', '', '=SUM(E2:E8)', ''],
  ];
  return (
    <div style={{
      background: '#F2F2EC',
      border: '1px solid #B8B8B0',
      boxShadow: '0 30px 80px -20px rgba(0,0,0,0.6), 0 8px 24px -8px rgba(0,0,0,0.4)',
      fontFamily: 'Calibri, "Segoe UI", system-ui, sans-serif',
      width: '100%',
      transform: 'rotate(-1.2deg)',
    }}>
      {/* fake titlebar */}
      <div style={{
        height: 26, background: '#1F6E43', color: 'white',
        display: 'flex', alignItems: 'center', padding: '0 10px',
        fontSize: 12, fontWeight: 600, letterSpacing: '0.02em',
      }}>
        <span style={{ opacity: 0.95 }}>preventivo bianchi 2025 - FINALE - usa questo - Microsoft Excel</span>
      </div>
      {/* fake ribbon */}
      <div style={{ height: 22, background: '#E8E8E0', borderBottom: '1px solid #C8C8B8', display: 'flex', gap: 10, padding: '4px 10px', fontSize: 11, color: '#3a3a3a' }}>
        <span>File</span><span>Home</span><span>Inserisci</span><span>Layout</span><span>Formule</span><span>Dati</span>
      </div>
      {/* header row */}
      <div style={{ display: 'grid', gridTemplateColumns: '32px repeat(6, 1fr)', background: '#D8D8C8', borderBottom: '1px solid #B8B8A8' }}>
        <div style={{ borderRight: '1px solid #B8B8A8' }}></div>
        {cols.map(c => (
          <div key={c} style={{ padding: '4px 6px', fontSize: 11, color: '#3a3a3a', borderRight: '1px solid #B8B8A8', textAlign: 'center' }}>{c}</div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '32px repeat(6, 1fr)', borderBottom: '1px solid #C8C8B8', background: '#E0E0D2' }}>
        <div style={{ padding: '3px 6px', fontSize: 11, textAlign: 'center', color: '#3a3a3a', borderRight: '1px solid #B8B8A8' }}>1</div>
        {['voce', 'um', 'q', 'p.un', 'tot', 'note'].map(h => (
          <div key={h} style={{ padding: '3px 6px', fontSize: 11, fontWeight: 700, color: '#1a1a1a', borderRight: '1px solid #C8C8B8' }}>{h}</div>
        ))}
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px repeat(6, 1fr)', borderBottom: '1px solid #DDDDD0', background: i === rows.length - 1 ? '#FFF8C4' : (i % 2 ? '#FAFAF2' : '#F2F2EC') }}>
          <div style={{ padding: '4px 6px', fontSize: 11, textAlign: 'center', color: '#5a5a5a', borderRight: '1px solid #C8C8B8', background: '#E0E0D2' }}>{i + 2}</div>
          {r.map((cell, j) => (
            <div key={j} style={{
              padding: '4px 6px',
              fontSize: 11.5,
              color: cell.toString().startsWith('=') ? '#444' : (i === rows.length - 1 ? '#1a1a1a' : '#222'),
              fontWeight: i === rows.length - 1 ? 700 : 400,
              borderRight: '1px solid #DDDDD0',
              fontFamily: cell.toString().startsWith('=') ? '"Lucida Console", monospace' : 'inherit',
              minHeight: 22,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{cell}</div>
          ))}
        </div>
      ))}
      <div style={{ height: 18, background: '#1F6E43', color: 'white', fontSize: 10, padding: '3px 10px', display: 'flex', justifyContent: 'space-between' }}>
        <span>Foglio1 / Foglio2 / Foglio3</span>
        <span>NUM · MAIUSC · 100%</span>
      </div>
    </div>
  );
}

// PDF preview mockup (small floating card in hero)
function PdfMiniMock() {
  return (
    <div style={{
      background: 'white', color: '#1C1C1E', borderRadius: 4,
      padding: 14, width: 200,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6), 0 8px 16px -4px rgba(0,0,0,0.4)',
      border: '1px solid rgba(0,0,0,0.08)',
      fontSize: 9,
    }}>
      <div className="mono" style={{ fontSize: 8, color: '#9A9A9A', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 6 }}>Preventivo · PDF</div>
      <div style={{ fontWeight: 800, fontSize: 11, marginBottom: 4 }}>Ristrutturazione</div>
      <div style={{ fontSize: 9, color: '#6A6A6A', marginBottom: 10 }}>Bianchi Costruzioni S.r.l.</div>
      {[1,2,3,4,5].map(i => (
        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', borderBottom: '1px dashed #E5E5E5' }}>
          <span style={{ background: '#E8E8E8', height: 5, width: 80 + (i*5)%30, alignSelf: 'center' }}></span>
          <span className="mono" style={{ fontSize: 8, color: '#1C1C1E', fontWeight: 600 }}>€ {(i*820+340).toLocaleString('it-IT')},00</span>
        </div>
      ))}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, paddingTop: 6, borderTop: '2px solid #1C1C1E', fontWeight: 800 }}>
        <span style={{ fontSize: 10 }}>TOT.</span>
        <span className="mono" style={{ fontSize: 11, color: '#F97316' }}>€ 44.218,40</span>
      </div>
    </div>
  );
}

Object.assign(window, { QuotanMock, ExcelMock, PdfMiniMock });