// Broadcasts.jsx — Compose owner-to-staff messages + view ack log.

// Format an ISO timestamp as a friendly "sent" label for the table.
const formatSentAt = (iso) => {
  const d = new Date(iso);
  const now = new Date();
  const sameDay = d.toDateString() === now.toDateString();
  const yest = new Date(now); yest.setDate(now.getDate() - 1);
  const isYest = d.toDateString() === yest.toDateString();
  const time = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
  if (sameDay) return 'Today, ' + time;
  if (isYest) return 'Yesterday, ' + time;
  const days = Math.round((now - d) / 86400000);
  if (days < 7) return days + ' days ago';
  return d.toLocaleDateString();
};

const rowToBroadcast = (r) => ({
  id: r.id,
  body: r.body,
  sentAt: formatSentAt(r.created_at),
  createdAt: r.created_at,
  recipients: (window.SAMPLE_STAFF || []).map(s => s.id),
  acks: [],
});

// Items, onSend, and onDelete are owned by App.jsx so the Supabase channel
// stays alive across page navigation. This component is presentational.
const Broadcasts = ({ items = [], onSend, onDelete }) => {
  const [composing, setComposing] = useState(false);
  const [selected, setSelected] = useState(null);
  const [toast, setToast] = useState('');

  const send = async (draft) => {
    const everyone = (window.SAMPLE_STAFF || []).map(s => s.id);
    setComposing(false);
    const { error } = await onSend(draft.body);
    if (error) { setToast('Send failed: ' + error.message); return; }
    setToast('Broadcast sent to ' + everyone.length + ' people');
  };

  const remove = async (id) => {
    setSelected(null);
    const { error } = await onDelete(id);
    if (error) { setToast('Remove failed: ' + error.message); return; }
    setToast('Broadcast removed');
  };

  return (
    <div className="portal-page-wide" style={{ maxWidth: 1280 }}>
      <div className="portal-page-header">
        <div>
          <h1 className="portal-page-title">Broadcasts</h1>
          <div className="portal-page-subtitle">Owner-to-staff messages — staff acknowledge on the iPad before clocking in.</div>
        </div>
        <PBtn variant="primary" icon="plus" onClick={() => setComposing(true)}>New broadcast</PBtn>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>{items.length} message{items.length === 1 ? '' : 's'}</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: selected ? '1fr 380px' : '1fr', gap: 18 }}>
        <div className="portal-card">
          <table className="portal-table">
            <thead>
              <tr>
                <th style={{ width: 140 }}>Sent</th>
                <th>Message</th>
                <th style={{ width: 160 }}>Acknowledged</th>
                <th style={{ width: 60 }}></th>
              </tr>
            </thead>
            <tbody>
              {items.map(b => (
                <tr key={b.id} onClick={() => setSelected(b)} style={{ cursor: 'pointer', background: selected?.id === b.id ? 'var(--bg-sunken)' : undefined }}>
                  <td style={{ fontSize: 12, color: 'var(--fg-2)', fontVariantNumeric: 'tabular-nums', verticalAlign: 'top', paddingTop: 12 }}>{b.sentAt}</td>
                  <td style={{ fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.4, paddingTop: 11, paddingBottom: 11, maxWidth: 0 }}>
                    <div style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                      {b.body}
                    </div>
                  </td>
                  <td style={{ verticalAlign: 'top', paddingTop: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <PAvatarStack ids={b.acks} size={20} />
                      <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{b.acks.length}/{b.recipients.length}</span>
                    </div>
                  </td>
                  <td style={{ verticalAlign: 'top', paddingTop: 12 }}>
                    <div className="row-actions">
                      <button onClick={e => { e.stopPropagation(); remove(b.id); }} title="Delete"><PIcon name="trash" size={13} /></button>
                    </div>
                  </td>
                </tr>
              ))}
              {items.length === 0 && (
                <tr><td colSpan={4} style={{ padding: 40, textAlign: 'center', color: 'var(--fg-3)', fontSize: 13 }}>No broadcasts yet.</td></tr>
              )}
            </tbody>
          </table>
        </div>

        {selected && <BroadcastDetail b={selected} onClose={() => setSelected(null)} />}
      </div>

      {composing && <BroadcastComposer onClose={() => setComposing(false)} onSend={send} />}
      <PToast message={toast} open={!!toast} onClose={() => setToast('')} />
    </div>
  );
};

const BroadcastDetail = ({ b, onClose }) => {
  const recipients = b.recipients.map(id => window.SAMPLE_STAFF.find(s => s.id === id)).filter(Boolean);
  return (
    <div className="portal-card" style={{ padding: 0, alignSelf: 'start' }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{b.sentAt}</div>
        <button onClick={onClose} style={{ width: 26, height: 26, borderRadius: 6, color: 'var(--fg-3)' }}><PIcon name="x" size={14} /></button>
      </div>
      <div style={{ padding: '14px 18px', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-1)' }}>{b.body}</div>
      <div style={{ padding: '14px 18px', borderTop: '1px solid var(--border-2)' }}>
        <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 10 }}>
          Acknowledgements ({b.acks.length}/{b.recipients.length})
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {recipients.map(s => {
            const ackd = b.acks.includes(s.id);
            return (
              <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <PAvatar staff={s} size={22} />
                <span style={{ fontSize: 12.5, flex: 1 }}>{s.name}</span>
                {ackd ? (
                  <span style={{ fontSize: 11, color: '#1F6E3D', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                    <PIcon name="check" size={11} strokeWidth={2.5} /> Acknowledged
                  </span>
                ) : (
                  <span style={{ fontSize: 11, color: '#8A6A1F' }}>Pending</span>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

const BroadcastComposer = ({ onClose, onSend }) => {
  const [body, setBody] = useState('');
  const canSend = body.trim().length > 0;
  const everyoneCount = window.SAMPLE_STAFF.length;

  return (
    <PModal open onClose={onClose} title="New broadcast" width={560}>
      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <Label>Message</Label>
          <textarea
            className="portal-input"
            placeholder="What does the team need to know?"
            value={body} onChange={e => setBody(e.target.value)}
            rows={6} autoFocus
          />
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 12px', borderRadius: 8,
          background: 'var(--bg-sunken)',
          fontSize: 12.5, color: 'var(--fg-2)',
        }}>
          <PIcon name="users" size={14} color="var(--fg-2)" />
          Sends to all {everyoneCount} staff. They acknowledge on the iPad before clocking in.
        </div>
      </div>
      <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border-2)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
        <PBtn variant="ghost" onClick={onClose}>Cancel</PBtn>
        <PBtn variant="primary" disabled={!canSend} onClick={() => onSend({ body: body.trim() })}>Send broadcast</PBtn>
      </div>
    </PModal>
  );
};

const Label = ({ children }) => (
  <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 6 }}>{children}</div>
);

window.Broadcasts = Broadcasts;