// settings.jsx — Projektindstillinger + grupper
const { useState: useStateS } = React;
const GROUP_COLORS = [1, 2, 3, 4, 5, 6];

function Settings({ project, mut, onDeleteProject }) {
  const TYPES = window.PlaniqData.PROJECT_TYPES;
  const [confirmDel, setConfirmDel] = useStateS(false);
  const [newGroup, setNewGroup] = useStateS('');
  const [confirmGroup, setConfirmGroup] = useStateS(null); // gruppe der skal slettes (med gæster)

  return (
    <div className="scroll" style={{ height: '100%', padding: '28px', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 680, margin: '0 auto' }}>
        <h2 style={{ fontSize: 26, marginBottom: 18 }}>Indstillinger</h2>

        {/* basics */}
        <div className="card" style={{ padding: 24, marginBottom: 20 }}>
          <h3 style={{ fontSize: 18, marginBottom: 16 }}>Om festen</h3>
          <div className="col gap-4">
            <div className="field"><label>Coverbillede</label>
              <CoverPicker value={project.coverImage} onChange={(img) => mut.updateProject({ coverImage: img })} /></div>
            <div className="field"><label>Navn</label>
              <input className="input" value={project.name} onChange={e => mut.updateProject({ name: e.target.value })} /></div>
            <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
              <div className="field" style={{ flex: 1, minWidth: 200 }}><label>Dato</label>
                <input className="input" type="date" value={project.date} onChange={e => mut.updateProject({ date: e.target.value })} /></div>
              <div className="field" style={{ flex: 1, minWidth: 200 }}><label>Sted</label>
                <input className="input" placeholder="fx Forsamlingshuset" value={project.venue || ''} onChange={e => mut.updateProject({ venue: e.target.value })} /></div>
            </div>
            <div className="field"><label>Type</label>
              <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
                {TYPES.map(t => (
                  <button key={t.id} onClick={() => mut.updateProject({ type: t.id })} className="row gap-2" style={{
                    height: 44, padding: '0 16px', borderRadius: 999, fontWeight: 800, fontSize: 15,
                    border: `1.5px solid ${project.type === t.id ? 'var(--accent)' : 'var(--line)'}`,
                    background: project.type === t.id ? 'var(--accent-tint)' : 'var(--surface)', color: 'var(--ink)',
                  }}><Icon name={t.icon} size={18} />{t.label}</button>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* groups */}
        <div className="card" style={{ padding: 24, marginBottom: 20 }}>
          <h3 style={{ fontSize: 18, marginBottom: 4 }}>Grupper</h3>
          <p className="muted" style={{ fontSize: 15, marginBottom: 16 }}>Inddel gæsterne — fx familie, venner eller brudens og gommens side.</p>
          <div className="col gap-2" style={{ marginBottom: 16 }}>
            {project.groups.map(g => (
              <div key={g.id} className="row gap-3" style={{ padding: '8px 8px 8px 12px', background: 'var(--surface-2)', borderRadius: 14 }}>
                <div className="row gap-2">
                  {GROUP_COLORS.map(c => (
                    <button key={c} onClick={() => mut.updateGroup(g.id, { color: c })} style={{ width: 22, height: 22, borderRadius: '50%', background: `var(--grp-${c})`, border: g.color === c ? '3px solid var(--ink)' : '2px solid #fff', boxShadow: g.color === c ? 'none' : 'var(--shadow-sm)' }} />
                  ))}
                </div>
                <input className="input" value={g.name} onChange={e => mut.updateGroup(g.id, { name: e.target.value })} style={{ flex: 1, minHeight: 42, background: 'var(--surface)' }} />
                <span className="chip" style={{ background: 'var(--surface)' }}>{project.guests.filter(x => x.group === g.id).length}</span>
                <button className="btn btn-icon btn-sm btn-ghost" style={{ color: 'var(--warn)' }}
                  onClick={() => setConfirmGroup(g)}><Icon name="trash" size={17} /></button>
              </div>
            ))}
          </div>
          <div className="row gap-2">
            <input className="input" placeholder="Ny gruppe…" value={newGroup} onChange={e => setNewGroup(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && newGroup.trim()) { mut.addGroup(newGroup.trim()); setNewGroup(''); } }} />
            <button className="btn btn-sage" disabled={!newGroup.trim()} onClick={() => { mut.addGroup(newGroup.trim()); setNewGroup(''); }}><Icon name="plus" size={18} /> Tilføj</button>
          </div>
        </div>

        {/* danger */}
        <div className="card" style={{ padding: 24, border: '1.5px solid var(--warn-soft)' }}>
          <h3 style={{ fontSize: 18, marginBottom: 4 }}>Slet projekt</h3>
          <p className="muted" style={{ fontSize: 15, marginBottom: 16 }}>Sletter festen, gæstelisten og bordplanen permanent.</p>
          <button className="btn" style={{ color: 'var(--warn)', borderColor: 'var(--warn-soft)' }} onClick={() => setConfirmDel(true)}><Icon name="trash" size={18} /> Slet "{project.name}"</button>
        </div>
      </div>
      {confirmDel && <Confirm title={`Slet "${project.name}"?`} body="Alt i projektet slettes for altid." danger confirmLabel="Slet projekt" onConfirm={onDeleteProject} onClose={() => setConfirmDel(false)} />}
      {confirmGroup && (() => {
        const guestsInGroup = project.guests.filter(x => x.group === confirmGroup.id).length;
        const isLast = project.groups.length === 1;
        const body = isLast
          ? (guestsInGroup > 0
              ? `Det er den sidste gruppe — dens ${guestsInGroup} ${guestsInGroup === 1 ? 'gæst' : 'gæster'} slettes også. Du skal oprette en ny gruppe, før du kan tilføje gæster igen.`
              : 'Det er den sidste gruppe. Du skal oprette en ny gruppe, før du kan tilføje gæster igen.')
          : (guestsInGroup > 0
              ? `${guestsInGroup} ${guestsInGroup === 1 ? 'gæst' : 'gæster'} i gruppen flyttes til en anden gruppe.`
              : 'Gruppen fjernes fra projektet.');
        return <Confirm title={`Slet "${confirmGroup.name}"?`} danger confirmLabel="Slet gruppe"
          body={body}
          onConfirm={() => mut.removeGroup(confirmGroup.id)} onClose={() => setConfirmGroup(null)} />;
      })()}
    </div>
  );
}

Object.assign(window, { Settings });