// compose.jsx — compose popup (bottom-right) and fullscreen variant

function Compose({ theme, mode, onClose, onSend, accounts, defaultFrom, defaultTo, defaultSubject, defaultBody }) {
  const [from, setFrom] = React.useState(defaultFrom || accounts[0].id);
  const [to, setTo] = React.useState(defaultTo || '');
  const [subject, setSubject] = React.useState(defaultSubject || '');
  const [body, setBody] = React.useState(defaultBody || '');
  const [sending, setSending] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [full, setFull] = React.useState(mode === 'full');

  const send = () => {
    setSending(true);
    setTimeout(() => {
      setSent(true);
      setTimeout(() => { onSend?.(); onClose(); }, 900);
    }, 600);
  };

  if (sent) {
    return (
      <div style={composeShell(theme, full)}>
        <div style={{
          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: theme.mono, color: theme.good, fontSize: 12,
          gap: 8,
        }}>
          <span>✓</span>
          <span>message sent</span>
        </div>
      </div>
    );
  }

  return (
    <div style={composeShell(theme, full)}>
      {/* header */}
      <div style={{
        padding: '8px 12px',
        borderBottom: `1px solid ${theme.border}`,
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: theme.mono, fontSize: 11,
        color: theme.textDim,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        background: theme.bg2,
      }}>
        <span style={{ color: theme.accent }}>✎</span>
        <span>{sending ? 'sending…' : 'new message'}</span>
        <span style={{ flex: 1 }} />
        <button
          onClick={() => setFull(!full)}
          style={{ all: 'unset', cursor: 'pointer', padding: '2px 6px', color: theme.textDim }}
          title="Toggle full"
        >{full ? '▭' : '▢'}</button>
        <button
          onClick={onClose}
          style={{ all: 'unset', cursor: 'pointer', padding: '2px 6px', color: theme.textDim }}
        >×</button>
      </div>

      {/* from */}
      <FieldRow theme={theme} label="from">
        <select
          value={from}
          onChange={(e) => setFrom(e.target.value)}
          style={{
            all: 'unset', cursor: 'pointer',
            fontFamily: theme.mono, fontSize: 12,
            color: theme.text, flex: 1,
          }}
        >
          {accounts.map(a => (
            <option key={a.id} value={a.id} style={{ background: theme.bg2, color: theme.text }}>
              {a.email}
            </option>
          ))}
        </select>
      </FieldRow>
      <FieldRow theme={theme} label="to">
        <input
          value={to}
          onChange={(e) => setTo(e.target.value)}
          placeholder="recipient@example.com"
          style={fieldInput(theme)}
        />
      </FieldRow>
      <FieldRow theme={theme} label="subj">
        <input
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          placeholder="—"
          style={fieldInput(theme)}
        />
      </FieldRow>

      {/* body */}
      <textarea
        value={body}
        onChange={(e) => setBody(e.target.value)}
        placeholder="// write your message…"
        style={{
          all: 'unset',
          flex: 1,
          padding: '12px 14px',
          fontFamily: theme.mono, fontSize: 13, lineHeight: 1.6,
          color: theme.text,
          resize: 'none',
          boxSizing: 'border-box',
          width: '100%',
          overflowY: 'auto',
        }}
      />

      {/* footer */}
      <div style={{
        padding: '8px 12px',
        borderTop: `1px solid ${theme.border}`,
        display: 'flex', alignItems: 'center', gap: 8,
        background: theme.bg2,
      }}>
        <span style={{
          fontFamily: theme.mono, fontSize: 10, color: theme.textFaint,
        }}>
          {body.length} chars · {body.split(/\s+/).filter(Boolean).length} words
        </span>
        <span style={{ flex: 1 }} />
        <ActionButton theme={theme} onClick={onClose}>discard</ActionButton>
        <ActionButton theme={theme} onClick={send} accent>send ↗</ActionButton>
      </div>
    </div>
  );
}

function composeShell(theme, full) {
  if (full) {
    return {
      position: 'absolute', inset: 32,
      top: 64,
      background: theme.bg,
      border: `1px solid ${theme.border2}`,
      display: 'flex', flexDirection: 'column',
      boxShadow: theme.shadow,
      zIndex: 20,
      fontFamily: theme.mono,
    };
  }
  return {
    position: 'absolute',
    right: 20, bottom: 20,
    width: 480, height: 420,
    background: theme.bg,
    border: `1px solid ${theme.border2}`,
    display: 'flex', flexDirection: 'column',
    boxShadow: theme.shadow,
    zIndex: 20,
    fontFamily: theme.mono,
  };
}

function FieldRow({ theme, label, children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '6px 14px',
      borderBottom: `1px solid ${theme.border}`,
    }}>
      <span style={{
        fontFamily: theme.mono, fontSize: 10, color: theme.textFaint,
        letterSpacing: '0.1em', textTransform: 'uppercase',
        width: 32, flexShrink: 0,
      }}>{label}</span>
      {children}
    </div>
  );
}

function fieldInput(theme) {
  return {
    all: 'unset',
    flex: 1,
    fontFamily: theme.mono, fontSize: 12,
    color: theme.text,
  };
}

Object.assign(window, { Compose });