// Chat widget + Notifications panel

const ChatWidget = ({ open, onClose }) => {
  const { CHAT_CHANNELS, CHAT_MESSAGES, STAFF, ME_ADMIN, SUPPLIERS } = window.SaifData;
  const allUsers = [...STAFF, ME_ADMIN];
  const [tab, setTab] = React.useState('internal');
  const [active, setActive] = React.useState(null);
  const [draft, setDraft] = React.useState('');
  const [extraMsgs, setExtraMsgs] = React.useState({});

  const channels = CHAT_CHANNELS.filter(c => c.kind === tab);
  const channel = active ? CHAT_CHANNELS.find(c => c.id === active) : null;
  const baseMsgs = active && CHAT_MESSAGES[active] ? CHAT_MESSAGES[active] : [];
  const msgs = [...baseMsgs, ...(extraMsgs[active] || [])];

  const send = () => {
    if (!draft.trim() || !active) return;
    setExtraMsgs(m => ({ ...m, [active]: [...(m[active] || []), { id: Date.now(), user: 'me_admin', text: draft, time: 'now' }] }));
    setDraft('');
  };

  const userById = (id) => {
    if (id.startsWith('s')) {
      const s = SUPPLIERS.find(x => x.id === id);
      return s ? { name: s.contact, initials: s.contact.split(' ').map(n => n[0]).join(''), tone: s.tone } : { name: 'External', initials: '?', tone: 'var(--text-dim)' };
    }
    return allUsers.find(u => u.id === id) || { name: 'You', initials: 'HS', tone: 'oklch(0.72 0.13 65)' };
  };

  if (!open) return null;
  return (
    <div className="chat-panel">
      <div className="chat-header">
        {!active ? (
          <>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Messages</div>
            <button className="icon-btn" style={{ color: 'rgba(255,255,255,0.7)' }} onClick={onClose}><Icon name="x"/></button>
          </>
        ) : (
          <>
            <button className="icon-btn" style={{ color: 'rgba(255,255,255,0.7)' }} onClick={() => setActive(null)}><Icon name="chevronLeft"/></button>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{channel.kind === 'internal' ? '#' : ''}{channel.name}</div>
              <div style={{ fontSize: 11, opacity: 0.6 }}>{channel.members} members</div>
            </div>
            <button className="icon-btn" style={{ color: 'rgba(255,255,255,0.7)', marginLeft: 'auto' }} onClick={onClose}><Icon name="x"/></button>
          </>
        )}
      </div>
      {!active && (
        <>
          <div className="chat-tabs">
            <button className="chat-tab" data-active={tab === 'internal'} onClick={() => setTab('internal')}>Internal staff</button>
            <button className="chat-tab" data-active={tab === 'supplier'} onClick={() => setTab('supplier')}>Suppliers</button>
          </div>
          <div className="chat-channels">
            {channels.map(c => (
              <div key={c.id} className="chat-channel" onClick={() => setActive(c.id)}>
                <div className="chat-channel-icon">{c.kind === 'internal' ? '#' : c.name[0]}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="chat-channel-name">{c.kind === 'internal' ? '#' + c.name : c.name}</div>
                  <div className="chat-channel-last">{c.last}</div>
                </div>
                <div className="chat-channel-meta">
                  <div>{c.time}</div>
                  {c.unread > 0 && <span className="chat-unread">{c.unread}</span>}
                </div>
              </div>
            ))}
          </div>
        </>
      )}
      {active && (
        <>
          <div className="chat-thread">
            {msgs.map(m => {
              const u = userById(m.user);
              return (
                <div key={m.id} className={`chat-msg ${m.external ? 'external' : ''}`}>
                  <Avatar size="md" name={u.name} initials={u.initials} tone={u.tone}/>
                  <div className="chat-msg-body">
                    <div className="chat-msg-head">
                      <span className="chat-msg-name">{u.name}</span>
                      <span className="chat-msg-time">{m.time}</span>
                    </div>
                    <div className="chat-msg-text">{m.text}</div>
                  </div>
                </div>
              );
            })}
            {msgs.length === 0 && <div style={{ textAlign: 'center', color: 'var(--text-mute)', fontSize: 12, padding: 24 }}>Start the conversation</div>}
          </div>
          <div className="chat-input-bar">
            <input placeholder={`Message ${channel.kind === 'internal' ? '#' + channel.name : channel.name}…`} value={draft} onChange={e => setDraft(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()}/>
            <button className="btn btn-primary" onClick={send}><Icon name="send" size={13}/></button>
          </div>
        </>
      )}
    </div>
  );
};

const NotifPanel = ({ open, onClose }) => {
  const { NOTIFICATIONS } = window.SaifData;
  if (!open) return null;
  return (
    <>
      <div style={{ position: 'fixed', inset: 0, zIndex: 75 }} onClick={onClose}></div>
      <div className="notif-panel">
        <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontWeight: 600, fontSize: 14 }}>Notifications</div>
          <button className="btn btn-ghost btn-sm">Mark all read</button>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {NOTIFICATIONS.map(n => (
            <div key={n.id} style={{ display: 'flex', gap: 12, padding: '12px 16px', borderBottom: '1px solid var(--line-2)', background: n.unread ? 'oklch(0.97 0.02 65)' : 'transparent', cursor: 'pointer' }}>
              <div style={{ width: 30, height: 30, borderRadius: 7, background: n.kind === 'mention' ? 'var(--accent-soft)' : n.kind === 'task' ? 'var(--blue-soft)' : n.kind === 'doc' ? 'var(--red-soft)' : 'var(--green-soft)', color: n.kind === 'mention' ? 'var(--accent-ink)' : n.kind === 'task' ? 'var(--blue)' : n.kind === 'doc' ? 'var(--red)' : 'var(--green)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name={n.kind === 'mention' ? 'comment' : n.kind === 'task' ? 'inbox' : n.kind === 'doc' ? 'alert' : 'check'} size={14}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, lineHeight: 1.45 }}>{n.text}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{n.time}</div>
              </div>
              {n.unread && <span className="badge-dot" style={{ background: 'var(--accent)', alignSelf: 'center' }}></span>}
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

Object.assign(window, { ChatWidget, NotifPanel });