// export.jsx — Oversigt & udskrift: hvem sidder hvor
function ExportView({ project }) {
  const TYPES = window.PlaniqData.PROJECT_TYPES;
  const DIET = window.PlaniqData.DIET_TYPES;
  const type = TYPES.find(t => t.id === project.type) || TYPES[4];
  const seatGuest = (tid, idx) => project.guests.find(g => g.seat && g.seat.tableId === tid && g.seat.index === idx);
  const tableGuests = (tid) => project.guests.filter(g => g.seat && g.seat.tableId === tid)
    .sort((a, b) => a.seat.index - b.seat.index);
  const unplaced = project.guests.filter(g => !g.seat);
  const dietTally = (tid) => { const t = {}; tableGuests(tid).forEach(g => g.diet.forEach(d => t[d] = (t[d] || 0) + 1)); return t; };
  const groupColor = (id) => (project.groups.find(g => g.id === id) || {}).color || 1;
  const heads = (g) => 1 + (g.plusOne ? 1 : 0);
  const totalHeads = project.guests.reduce((s, g) => s + heads(g), 0);

  return (
    <div className="scroll" style={{ height: '100%', background: 'var(--bg)' }}>
      <div className="row" style={{ padding: '18px 28px', borderBottom: '1px solid var(--line)', background: 'var(--surface)', justifyContent: 'space-between', position: 'sticky', top: 0, zIndex: 5 }} data-noprint>
        <div>
          <h2 style={{ fontSize: 21 }}>Oversigt & udskrift</h2>
          <p className="muted" style={{ fontSize: 14.5 }}>Udskriftsvenlig liste over hvem der sidder hvor.</p>
        </div>
        <div className="row gap-2">
          <button className="btn" onClick={() => window.print()}><Icon name="print" size={19} /> Udskriv</button>
          <button className="btn btn-primary" onClick={() => window.print()}><Icon name="download" size={19} /> Gem som PDF</button>
        </div>
      </div>

      <div id="print-area" style={{ maxWidth: 900, margin: '0 auto', padding: '32px 28px 80px' }}>
        {/* header */}
        <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 26, paddingBottom: 20, borderBottom: '2px solid var(--line)' }}>
          <div>
            <div className="row gap-2" style={{ marginBottom: 6 }}><Icon name={type.icon} size={24} color="var(--accent-deep)" /><span className="chip" style={{ background: 'var(--surface-2)' }}>{type.label}</span></div>
            <h1 style={{ fontSize: 34, marginBottom: 6 }}>{project.name}</h1>
            <p className="muted" style={{ fontSize: 16, fontWeight: 700 }}>{fmtDate(project.date)}{project.venue ? ' · ' + project.venue : ''}</p>
          </div>
          <div className="col" style={{ alignItems: 'flex-end', gap: 4 }}>
            <Logo size={26} />
            <p className="faint" style={{ fontSize: 13.5, fontWeight: 800, marginTop: 6 }}>{project.guests.length} gæster · {totalHeads} kuverter</p>
            <p className="faint" style={{ fontSize: 13.5, fontWeight: 800 }}>{project.tables.length} borde</p>
          </div>
        </div>

        {/* tables grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 18 }}>
          {project.tables.map(t => {
            const gs = tableGuests(t.id);
            const dt = dietTally(t.id);
            const dk = Object.keys(dt);
            return (
              <div key={t.id} className="card" style={{ padding: '16px 18px', breakInside: 'avoid' }}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 10, alignItems: 'flex-start' }}>
                  <h3 style={{ fontSize: 18, lineHeight: 1.15 }}>{t.label}</h3>
                  <span className="chip" style={{ background: 'var(--surface-2)' }}>{gs.length}/{t.seats}</span>
                </div>
                {gs.length === 0 ? <p className="faint" style={{ fontSize: 14.5, fontWeight: 700, padding: '8px 0' }}>Ingen placeret endnu</p> : (
                  <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
                    {gs.map((g, i) => (
                      <li key={g.id} className="row gap-2" style={{ fontSize: 15 }}>
                        <span style={{ width: 22, fontWeight: 800, color: 'var(--ink-faint)', fontSize: 13 }}>{i + 1}.</span>
                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: `var(--grp-${groupColor(g.group)})`, flex: 'none' }}></span>
                        <span style={{ fontWeight: 700 }}>{g.name}</span>
                        {g.child && <Icon name="baby" size={13} color="var(--ink-faint)" />}
                        {g.plusOne && <span className="faint" style={{ fontSize: 13, fontWeight: 800 }}>+1</span>}
                        {g.diet.length > 0 && <span className="row gap-2" style={{ color: 'var(--sage-deep)', fontSize: 12, fontWeight: 800 }}>{g.diet.map(d => DIET.find(x => x.id === d)?.short).join(', ')}</span>}
                      </li>
                    ))}
                  </ol>
                )}
                {dk.length > 0 && (
                  <div className="row gap-2" style={{ marginTop: 12, paddingTop: 10, borderTop: '1px dashed var(--line)', flexWrap: 'wrap' }}>
                    {dk.map(d => <span key={d} className="chip" style={{ height: 24, background: 'var(--sage-tint)', color: 'var(--sage-deep)', border: 'none', fontSize: 12 }}><Icon name="leaf" size={12} />{DIET.find(x => x.id === d)?.label} {dt[d]}</span>)}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* unplaced */}
        {unplaced.length > 0 && (
          <div className="card" style={{ padding: '16px 18px', marginTop: 18, background: 'var(--honey-soft)', border: 'none', breakInside: 'avoid' }}>
            <h3 style={{ fontSize: 17, marginBottom: 10 }}>Ikke placeret ({unplaced.length})</h3>
            <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
              {unplaced.map(g => <span key={g.id} className="chip" style={{ background: 'var(--surface)' }}><span className={"dot gc-" + groupColor(g.group)}></span>{g.name}</span>)}
            </div>
          </div>
        )}

        {project.tables.length === 0 && (
          <div className="col center" style={{ padding: '60px', textAlign: 'center', gap: 12 }}>
            <Icon name="list" size={40} color="var(--ink-faint)" />
            <p className="muted" style={{ fontSize: 17 }}>Ingen borde endnu — opret en bordplan først.</p>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ExportView });