// projectview.jsx — projekt-shell med faner + Tweaks-panel
const { useState: useStatePV } = React;

function ProjectView({ project, tab, setTab, mut, tweaks, onBack, onDeleteProject }) {
  const TYPES = window.PlaniqData.PROJECT_TYPES;
  const type = TYPES.find(t => t.id === project.type) || TYPES[4];
  const placed = project.guests.filter(g => g.seat).length;

  const TABS = [
    { id: 'guests', label: 'Gæsteliste', icon: 'users' },
    { id: 'plan', label: 'Bordplan', icon: 'table' },
    { id: 'export', label: 'Oversigt', icon: 'list' },
    { id: 'settings', label: 'Indstillinger', icon: 'settings' },
  ];

  return (
    <div className="app">
      {/* header */}
      <header className="row pv-header" style={{ padding: '10px 18px', borderBottom: '1px solid var(--line)', background: 'var(--surface)', gap: 14, flex: 'none' }} data-noprint>
        <button className="btn btn-icon btn-ghost" onClick={onBack}><Icon name="back" size={22} /></button>
        <div className="row gap-3" style={{ minWidth: 0 }}>
          {project.coverImage
            ? <img src={project.coverImage} alt="" style={{ width: 40, height: 40, borderRadius: 12, objectFit: 'cover', flex: 'none' }} />
            : <span style={{ width: 40, height: 40, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: `var(--grp-${project.cover || 1})` }}><Icon name={type.icon} size={22} color="#fff" /></span>}
          <div className="col" style={{ minWidth: 0 }}>
            <h2 style={{ fontSize: 19, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{project.name}</h2>
            <span className="muted pv-sub" style={{ fontSize: 13, fontWeight: 700 }}>{fmtDate(project.date)}{project.venue ? ' · ' + project.venue : ''}</span>
          </div>
        </div>

        <div className="spring"></div>

        {/* tab nav */}
        <nav className="row" style={{ background: 'var(--surface-2)', borderRadius: 999, padding: 4, gap: 2, border: '1.5px solid var(--line)' }}>
          {TABS.map(t => {
            const on = tab === t.id;
            return (
              <button key={t.id} onClick={() => setTab(t.id)} className="row gap-2" style={{
                minHeight: 42, padding: '0 16px', borderRadius: 999, fontFamily: 'var(--font-disp)', fontWeight: 500, fontSize: 15,
                background: on ? 'var(--surface)' : 'transparent', color: on ? 'var(--ink)' : 'var(--ink-soft)',
                boxShadow: on ? 'var(--shadow-sm)' : 'none', transition: 'all .16s var(--ease)',
              }}>
                <Icon name={t.icon} size={18} /> <span className="tab-label">{t.label}</span>
              </button>
            );
          })}
        </nav>
      </header>

      {/* body */}
      <div style={{ flex: 1, minHeight: 0 }}>
        {tab === 'guests' && <GuestList project={project} addGuest={mut.addGuest} updateGuest={mut.updateGuest} removeGuest={mut.removeGuest} addRule={mut.addRule} removeRule={mut.removeRule} addGroup={mut.addGroup} goToSettings={() => setTab('settings')} />}
        {tab === 'plan' && <TablePlan project={project} mut={mut} tweaks={tweaks} />}
        {tab === 'export' && <ExportView project={project} />}
        {tab === 'settings' && <Settings project={project} mut={mut} onDeleteProject={onDeleteProject} />}
      </div>
    </div>
  );
}

/* ---- Tweaks panel ---- */
function Tweaks({ tw, setTweak }) {
  const TABLE_OPTS = [
    { value: 'round', label: 'Runde borde' },
    { value: 'long', label: 'Langborde' },
    { value: 'square', label: 'Firkantede borde' },
    { value: 'horseshoe', label: 'Hestesko' },
  ];
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Bordplan" />
      <TweakSelect label="Standard bordform" value={tw.defaultTable}
        options={TABLE_OPTS}
        onChange={(v) => setTweak('defaultTable', v)} />
      <TweakSection label="Udseende" />
      <TweakColor label="Accentfarve" value={tw.accent}
        options={['#d07c54', '#c98aa6', '#88997a', '#c79a52', '#7e9bb0']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSlider label="Rundede hjørner" value={tw.radius} min={8} max={30} step={2} unit="px"
        onChange={(v) => setTweak('radius', v)} />
    </TweaksPanel>
  );
}

Object.assign(window, { ProjectView, Tweaks });