// New project modal with auto-generated project number

const { useState: useStateModal, useEffect: useEffectModal } = React;

const NewProjectModal = ({ onClose }) => {
  const [klantId, setKlantId] = useStateModal('hak');
  const [naam, setNaam] = useStateModal('');
  const [prio, setPrio] = useStateModal('gemiddeld');
  const [labels, setLabels] = useStateModal(['HAK']);
  const [sauzen, setSauzen] = useStateModal(['']);
  const [generated] = useStateModal(() => {
    // Auto-generate: P-YY-NNNN
    const year = 26;
    const nextNr = 426; // mock: next one after P-26-0425
    return `P-${year}-${String(nextNr).padStart(4, '0')}`;
  });

  return (
    <>
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0, background: 'rgba(20,14,10,0.4)', zIndex: 50,
      }} />
      <div style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 560, maxHeight: '88vh', background: 'var(--paper)',
        border: '1px solid var(--line)', borderRadius: 14, zIndex: 51,
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 24px 80px rgba(0,0,0,0.18)', overflow: 'hidden',
      }}>
        <div style={{ padding: '18px 22px 14px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div>
            <div style={{ fontSize: 10, color: 'var(--ink-3)', fontWeight: 600, letterSpacing: 0.4 }}>NIEUWE AANVRAAG</div>
            <h3 style={{ fontSize: 18, fontWeight: 650, letterSpacing: -0.3, margin: 0, marginTop: 2 }}>Project aanmaken</h3>
          </div>
          <span style={{ flex: 1 }} />
          <button onClick={onClose} style={{
            width: 32, height: 32, border: 'none', background: 'var(--surface-1)',
            borderRadius: 8, cursor: 'pointer', color: 'var(--ink-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.Icon name="x" size={16} /></button>
        </div>

        <div style={{ overflowY: 'auto', padding: '18px 22px' }}>
          {/* Project number — auto */}
          <div style={{
            padding: 14, background: 'linear-gradient(120deg, oklch(0.97 0.03 60), oklch(0.96 0.04 40))',
            border: '1px solid oklch(0.88 0.05 55)', borderRadius: 10, marginBottom: 18,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, background: 'oklch(0.60 0.18 30)',
              color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <window.Icon name="sparkle" size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600, letterSpacing: 0.4 }}>PROJECTNUMMER · AUTOMATISCH</div>
              <div style={{ fontSize: 20, fontWeight: 700, fontFamily: 'var(--mono)', color: 'var(--ink-1)', letterSpacing: -0.2, marginTop: 2 }}>{generated}</div>
            </div>
            <button style={{
              fontSize: 11, padding: '5px 10px', background: 'var(--paper)',
              border: '1px solid var(--line)', borderRadius: 6, cursor: 'pointer',
              fontWeight: 600, color: 'var(--ink-2)',
            }}>Overschrijven</button>
          </div>

          <Field label="Klant">
            <select value={klantId} onChange={e => setKlantId(e.target.value)} style={inputStyle}>
              {window.KLANTEN.map(k => <option key={k.id} value={k.id}>{k.naam}</option>)}
            </select>
          </Field>

          <Field label="Projectnaam">
            <input value={naam} onChange={e => setNaam(e.target.value)} placeholder="bijv. Appelmoes lijn 2026" style={inputStyle} />
          </Field>

          <Field label="Prioriteit">
            <div style={{ display: 'flex', gap: 6 }}>
              {Object.entries(window.PRIORITY).map(([id, v]) => (
                <button key={id} onClick={() => setPrio(id)} style={{
                  flex: 1, padding: '8px 10px', fontSize: 12, fontWeight: 600,
                  background: prio === id ? v.bg : 'var(--paper)',
                  color: prio === id ? v.fg : 'var(--ink-2)',
                  border: prio === id ? `1px solid ${v.fg}` : '1px solid var(--line)',
                  borderRadius: 7, cursor: 'pointer',
                }}>{v.label}</button>
              ))}
            </div>
          </Field>

          <Field label="Labels" hint="Onbeperkt labels mogelijk — geen limiet van 25">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, padding: 8, border: '1px solid var(--line)', borderRadius: 8, minHeight: 42 }}>
              {labels.map((l, i) => (
                <span key={i} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  padding: '3px 8px', background: 'var(--surface-1)',
                  borderRadius: 4, fontSize: 11.5, fontWeight: 550,
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: window.klantById(klantId).kleur }} />
                  {l}
                  <button onClick={() => setLabels(labels.filter((_, idx) => idx !== i))} style={{
                    border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--ink-3)', padding: 0, marginLeft: 2,
                  }}>×</button>
                </span>
              ))}
              <input placeholder="+ toevoegen" onKeyDown={e => {
                if (e.key === 'Enter' && e.target.value.trim()) {
                  setLabels([...labels, e.target.value.trim()]);
                  e.target.value = '';
                }
              }} style={{ border: 'none', outline: 'none', fontSize: 12, flex: 1, minWidth: 100, background: 'transparent' }} />
            </div>
          </Field>

          <Field label="Sauzen in dit project" hint="Elke saus kan eigen voortgang hebben">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {sauzen.map((s, i) => (
                <div key={i} style={{ display: 'flex', gap: 6 }}>
                  <input value={s} onChange={e => {
                    const next = [...sauzen]; next[i] = e.target.value; setSauzen(next);
                  }} placeholder={`Saus ${i+1}`} style={inputStyle} />
                  {sauzen.length > 1 && (
                    <button onClick={() => setSauzen(sauzen.filter((_, idx) => idx !== i))} style={{
                      width: 36, border: '1px solid var(--line)', background: 'var(--paper)',
                      borderRadius: 7, color: 'var(--ink-3)', cursor: 'pointer',
                    }}>×</button>
                  )}
                </div>
              ))}
              <button onClick={() => setSauzen([...sauzen, ''])} style={{
                padding: '7px 10px', background: 'transparent', border: '1px dashed var(--line)',
                borderRadius: 7, color: 'var(--ink-3)', fontSize: 12, cursor: 'pointer',
              }}>+ Saus toevoegen</button>
            </div>
          </Field>
        </div>

        <div style={{ padding: '14px 22px', borderTop: '1px solid var(--line)', display: 'flex', gap: 8, justifyContent: 'flex-end', background: 'var(--surface-1)' }}>
          <button onClick={onClose} style={{
            padding: '9px 16px', background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 8, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', color: 'var(--ink-2)',
          }}>Annuleren</button>
          <button onClick={onClose} style={{
            padding: '9px 16px', background: 'var(--ink-1)', border: 'none',
            borderRadius: 8, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', color: 'var(--paper)',
          }}>Aanmaken & planning genereren</button>
        </div>
      </div>
    </>
  );
};

const inputStyle = {
  width: '100%', padding: '8px 10px', fontSize: 13,
  border: '1px solid var(--line)', borderRadius: 7,
  background: 'var(--paper)', color: 'var(--ink-1)',
  fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
};

const Field = ({ label, hint, children }) => (
  <div style={{ marginBottom: 14 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
      <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-2)', letterSpacing: 0.2 }}>{label.toUpperCase()}</label>
      {hint && <span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{hint}</span>}
    </div>
    {children}
  </div>
);

window.NewProjectModal = NewProjectModal;