// dashboard.jsx — Mine projekter
const { useState: useStateD } = React;

function Dashboard({ projects, user, onOpen, onCreate, onDuplicate, onDelete, onRename, onSetCover, onLogout }) {
  const [menu, setMenu] = useStateD(null);     // project id
  const [creating, setCreating] = useStateD(false);
  const [confirm, setConfirm] = useStateD(null); // project to delete
  const [renaming, setRenaming] = useStateD(null);
  const [editingCover, setEditingCover] = useStateD(null); // project whose cover is being changed
  const TYPES = window.PlaniqData.PROJECT_TYPES;
  const typeOf = (id) => TYPES.find(t => t.id === id) || TYPES[4];

  return (
    <div className="scroll" style={{ height: '100%', background: 'var(--bg)' }}
         onPointerDown={() => setMenu(null)}>
      <header className="row db-header" style={{ padding: '20px 36px', borderBottom: '1px solid var(--line)', background: 'var(--surface)', position: 'sticky', top: 0, zIndex: 10, justifyContent: 'space-between' }}>
        <Logo size={30} />
        <div className="row gap-3">
          <div className="chip db-user" style={{ height: 40, background: 'var(--surface-2)', paddingLeft: 6 }}>
            <Avatar name={user} size={28} group={2} /> {user}
          </div>
          <button className="btn btn-sm btn-ghost" onClick={onLogout}>Log ud</button>
        </div>
      </header>

      <main className="db-main" style={{ maxWidth: 1140, margin: '0 auto', padding: '38px 36px 80px' }}>
        <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <h1 className="db-title" style={{ fontSize: 38, marginBottom: 6 }}>Mine projekter</h1>
            <p className="muted" style={{ fontSize: 17 }}>{projects.length} {projects.length === 1 ? 'plan' : 'planer'} · alt gemmes automatisk</p>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => setCreating(true)}>
            <Icon name="plus" size={20} /> Opret nyt projekt
          </button>
        </div>

        <div className="db-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 22 }}>
          {projects.map((p, i) => {
            const t = typeOf(p.type);
            const placed = p.guests.filter(g => g.seat).length;
            return (
              <div key={p.id} className="card anim-up" style={{ overflow: 'hidden', animationDelay: `${i * .05}s`, cursor: 'pointer', position: 'relative' }}
                   onClick={() => onOpen(p.id)}>
                {/* cover */}
                <div style={{ height: 118, position: 'relative', background: `linear-gradient(135deg, var(--grp-${p.cover}) 0%, color-mix(in oklab, var(--grp-${p.cover}), white 30%) 100%)` }}>
                  {p.coverImage
                    ? <img src={p.coverImage} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <>
                        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px)', backgroundSize: '20px 20px' }}></div>
                        <span style={{ position: 'absolute', top: 14, left: 16 }}><Icon name={t.icon} size={36} color="rgba(255,255,255,.95)" /></span>
                      </>}
                  <button className="btn btn-icon btn-sm" style={{ position: 'absolute', top: 12, right: 12, background: 'rgba(255,255,255,.92)', border: 'none' }}
                    onClick={(e) => { e.stopPropagation(); setMenu(menu === p.id ? null : p.id); }}>
                    <Icon name="dots" size={20} />
                  </button>
                  {menu === p.id && (
                    <div className="card anim-pop" style={{ position: 'absolute', top: 52, right: 12, zIndex: 20, padding: 7, width: 180, borderRadius: 16 }}
                         onClick={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                      {[
                        { ic: 'edit', label: 'Omdøb', fn: () => { setRenaming(p); setMenu(null); } },
                        { ic: 'image', label: 'Coverbillede', fn: () => { setEditingCover(p); setMenu(null); } },
                        { ic: 'copy', label: 'Dublér', fn: () => { onDuplicate(p.id); setMenu(null); } },
                        { ic: 'trash', label: 'Slet', fn: () => { setConfirm(p); setMenu(null); }, danger: true },
                      ].map(m => (
                        <button key={m.label} className="row gap-3" onClick={m.fn} style={{ width: '100%', padding: '11px 12px', borderRadius: 11, fontSize: 16, fontWeight: 700, color: m.danger ? 'var(--warn)' : 'var(--ink)', justifyContent: 'flex-start' }}
                          onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                          <Icon name={m.ic} size={19} /> {m.label}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
                {/* body */}
                <div style={{ padding: '18px 20px 20px' }}>
                  <h3 style={{ fontSize: 21, marginBottom: 6 }}>{p.name}</h3>
                  <div className="row gap-3" style={{ color: 'var(--ink-soft)', fontSize: 15, fontWeight: 700, marginBottom: 16, flexWrap: 'wrap' }}>
                    <span className="row gap-2"><Icon name="cal" size={17} /> {fmtDate(p.date)}</span>
                    <span className="row gap-2"><Icon name="users" size={17} /> {p.guests.length} gæster</span>
                  </div>
                  <div className="row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
                    <span className="chip" style={{ background: 'var(--surface-2)' }}>{t.label}</span>
                    {p.guests.length > 0 ? (
                      <span style={{ fontSize: 14, fontWeight: 800, color: placed === p.guests.length ? 'var(--sage-deep)' : 'var(--ink-faint)' }}>
                        {placed}/{p.guests.length} placeret
                      </span>
                    ) : <span className="faint" style={{ fontSize: 14, fontWeight: 700 }}>Tom – kom i gang</span>}
                  </div>
                </div>
              </div>
            );
          })}

          {/* new project tile */}
          <button className="card" onClick={() => setCreating(true)} style={{
            border: '2px dashed var(--line-2)', background: 'transparent', boxShadow: 'none',
            minHeight: 240, display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)',
          }}>
            <div style={{ width: 60, height: 60, borderRadius: 20, background: 'var(--surface)', display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-sm)' }}>
              <Icon name="plus" size={28} color="var(--accent)" />
            </div>
            <span style={{ fontFamily: 'var(--font-disp)', fontWeight: 500, fontSize: 18 }}>Opret nyt projekt</span>
          </button>
        </div>
      </main>

      {creating && <NewProjectModal onClose={() => setCreating(false)} onCreate={(d) => { onCreate(d); setCreating(false); }} />}
      {renaming && <RenameModal project={renaming} onClose={() => setRenaming(null)} onSave={(name) => { onRename(renaming.id, name); setRenaming(null); }} />}
      {editingCover && <CoverModal project={editingCover} onClose={() => setEditingCover(null)} onSave={(img) => { onSetCover(editingCover.id, img); setEditingCover(null); }} />}
      {confirm && <Confirm title={`Slet "${confirm.name}"?`} body="Gæsteliste og bordplan slettes for altid. Det kan ikke fortrydes." danger confirmLabel="Slet projekt" onConfirm={() => onDelete(confirm.id)} onClose={() => setConfirm(null)} />}
    </div>
  );
}

function NewProjectModal({ onClose, onCreate }) {
  const TYPES = window.PlaniqData.PROJECT_TYPES;
  const [name, setName] = useStateD('');
  const [type, setType] = useStateD('barnedaab');
  const [date, setDate] = useStateD('');
  const [coverImage, setCoverImage] = useStateD(null);
  return (
    <Modal onClose={onClose} maxWidth={500}>
      <h2 style={{ marginBottom: 20 }}>Nyt projekt</h2>
      <div className="col gap-4">
        <div className="field"><label>Coverbillede <span className="faint" style={{ fontWeight: 700 }}>(valgfrit)</span></label>
          <CoverPicker value={coverImage} onChange={setCoverImage} height={130} /></div>
        <div className="field"><label>Hvad fejrer I?</label>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
            {TYPES.map(t => (
              <button key={t.id} onClick={() => setType(t.id)} style={{
                padding: '14px 8px', borderRadius: 16, border: `2px solid ${type === t.id ? 'var(--accent)' : 'var(--line)'}`,
                background: type === t.id ? 'var(--accent-tint)' : 'var(--surface)', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center',
                transition: 'all .14s var(--ease)',
              }}>
                <Icon name={t.icon} size={26} color={type === t.id ? 'var(--accent-deep)' : 'var(--ink-soft)'} />
                <span style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)' }}>{t.label}</span>
              </button>
            ))}
          </div>
        </div>
        <div className="field"><label>Navn på festen</label>
          <input className="input" autoFocus placeholder="fx Sommerfest 2026" value={name} onChange={e => setName(e.target.value)} /></div>
        <div className="field"><label>Dato</label>
          <input className="input" type="date" value={date} onChange={e => setDate(e.target.value)} /></div>
      </div>
      <div className="row gap-3" style={{ justifyContent: 'flex-end', marginTop: 26 }}>
        <button className="btn btn-ghost" onClick={onClose}>Annullér</button>
        <button className="btn btn-primary" disabled={!name.trim()} onClick={() => onCreate({ name: name.trim(), type, date, coverImage })}>
          Opret projekt <Icon name="chevR" size={18} />
        </button>
      </div>
    </Modal>
  );
}

function RenameModal({ project, onClose, onSave }) {
  const [name, setName] = useStateD(project.name);
  return (
    <Modal onClose={onClose} maxWidth={420}>
      <h2 style={{ marginBottom: 18 }}>Omdøb projekt</h2>
      <div className="field"><label>Navn</label>
        <input className="input" autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && name.trim()) onSave(name.trim()); }} /></div>
      <div className="row gap-3" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
        <button className="btn btn-ghost" onClick={onClose}>Annullér</button>
        <button className="btn btn-sage" disabled={!name.trim()} onClick={() => onSave(name.trim())}>Gem</button>
      </div>
    </Modal>
  );
}

function CoverModal({ project, onClose, onSave }) {
  const [img, setImg] = useStateD(project.coverImage || null);
  return (
    <Modal onClose={onClose} maxWidth={460}>
      <h2 style={{ marginBottom: 6 }}>Coverbillede</h2>
      <p className="muted" style={{ fontSize: 15, marginBottom: 18 }}>Vælg et billede til "{project.name}".</p>
      <CoverPicker value={img} onChange={setImg} height={150} />
      <div className="row gap-3" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
        <button className="btn btn-ghost" onClick={onClose}>Annullér</button>
        <button className="btn btn-sage" onClick={() => onSave(img)}>Gem</button>
      </div>
    </Modal>
  );
}

Object.assign(window, { Dashboard });