/* ========================================================================
   SIGNAL CARD — one signal as a standalone card with toolbar (Chat,
   Save split, Run Plays split, done/dismiss/share). Port of
   renderSignalCard + wireSignalSaveSplits (08-detail.js).
   ======================================================================== */

function ActionSplit({ mainIcon, mainLabel, mainActive, onMain, items, triggerLabel }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (ref.current && ref.current.contains(e.target)) return;
      setOpen(false);
    };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [open]);
  return (
    <div className="dv-action-split" ref={ref}>
      <button className={cx('dv-action-split-main', mainActive && 'active')} type="button" onClick={onMain}>
        <Icon name={mainIcon} size={14} /> {mainLabel}
      </button>
      <div className="dv-action-split-divider"></div>
      <button
        className="dv-action-split-trigger" type="button" aria-label={triggerLabel || 'More options'}
        onClick={(e) => {e.preventDefault();e.stopPropagation();setOpen((o) => !o);}}>
        <Icon name="chevron-down" size={14} /></button>
      {open ?
      <div className="dv-action-split-menu">
          {items.map(([icon, label], i) =>
        <button className="btn-split-item" type="button" key={i} onClick={() => setOpen(false)}>
              <Icon name={icon} size={14} /> {label}
            </button>
        )}
        </div> :
      null}
    </div>);

}

function SignalContactChip({ c, account, rich }) {
  const a = account || {};
  return (
    <div className="dv-contact-chip">
      <div className="dv-contact-id">
        <div className="dv-contact-name-row">
          <span
            className="dv-contact-name"
            onClick={() => detailLinkClick('contacts', contactDetailKey(a.accountId, c.email || c.name))}>
            {c.name}</span>
          {rich && c.pct != null ? <span className="dv-contact-pct">{c.pct}%</span> : null}
        </div>
        <div className="dv-contact-title">
          {c.title || ''}{c.title && a.name ? ' · ' : ''}
          <span
            className="dv-contact-account"
            onClick={() => detailLinkClick('accounts', accountDetailKey(a.accountId))}>
            {a.name || ''}</span>
        </div>
        <a className="dv-contact-email" href={`mailto:${c.email || ''}`}>{c.email || ''}</a>
        <div className="dv-contact-phone">{c.phone || ''}</div>
      </div>
      <div className="dv-contact-actions">
        <button className="dv-contact-action" type="button" aria-label={`Call ${c.name}`}><Icon name="phone" size={14} /></button>
        <button className="dv-contact-action" type="button" aria-label={`Email ${c.name}`}><Icon name="mail" size={14} /></button>
        <button className="dv-contact-action" type="button" aria-label={`Draft about ${c.name}`}><Icon name="pen-line" size={14} /></button>
      </div>
    </div>);

}

/* Profile-match badge with a hover popover that reveals the signal's
   topics — the specific topics that triggered this Profile's match. */
function ProfileBadge({ profile }) {
  const [open, setOpen] = React.useState(false);
  const topics = profile.topics || [];
  const isThematic = profile.tier === 'thematic';
  const colorClass = `dv-tag--profile-${(profile.colorIdx || 0) % 10}`;
  return (
    <span
      className="dv-profile-badge-wrap"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}>
      
      <span className={`dv-signal-tag dv-tag--profile ${colorClass}`}>
        <Icon name={isThematic ? 'target' : 'crosshair'} size={11} />{profile.name}
        <Icon name="circle-help" size={12} className="dv-profile-help" />
      </span>
      {open && topics.length ?
      <span className="dv-profile-pop" role="tooltip">
          <span className="dv-profile-pop-head">
            Matches {topics.length} {topics.length === 1 ? 'Criterion' : 'Criteria'}
          </span>
          <span className="dv-profile-pop-list">
            {topics.map((t, i) =>
          <span key={i} className="dv-profile-pop-crit">
                <Icon name="check" size={20} className="dv-profile-pop-check" />
                <span className="dv-profile-pop-crit-text">{t}</span>
              </span>
          )}
          </span>
        </span> :
      null}
    </span>);

}

/* "Uploaded <date>" with a help affordance — explains the date is when
   the source document was uploaded to the database and processed. */
function UploadedDate({ date }) {
  const [open, setOpen] = React.useState(false);
  return (
    <span
      className="dv-signal-date-found dv-uploaded"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}>
      Uploaded {formatFoundDate(date)}
      <Icon name="circle-help" size={12} className="dv-uploaded-help" />
      {open ?
      <span className="dv-uploaded-pop" role="tooltip">
          The date this document was uploaded to the database and processed.
        </span> :
      null}
    </span>);

}

/* Stacked-deck badge — when 3+ Profiles match, collapse them into one
   "deck": color slivers of the trailing Profiles peek on the left of the
   named lead pill, with a +N count. Hover opens a popover listing every
   matched Profile and its triggering topics in a two-column grid. */
function ProfileDeck({ profiles }) {
  const [open, setOpen] = React.useState(false);
  const lead = profiles[0];
  const slivers = profiles.slice(1, 4);
  const ci = (p) => `dv-tag--profile-${(p.colorIdx || 0) % 10}`;
  const icon = (p) => p.tier === 'thematic' ? 'target' : 'crosshair';
  return (
    <span
      className="dv-profile-deck dv-profile-badge-wrap"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}>
      
      <span className="dv-deck-pills">
        {slivers.map((p, i) =>
        <span key={i} className={`dv-deck-sliver ${ci(p)}`} style={{ zIndex: i }}></span>
        )}
        <span className={`dv-signal-tag dv-tag--profile dv-deck-lead ${ci(lead)}`}>
          <Icon name={icon(lead)} size={11} />{lead.name}
          <span className="dv-deck-count">+{profiles.length - 1}</span>
          <Icon name="circle-help" size={12} className="dv-profile-help dv-deck-help" />
        </span>
      </span>
      {open ?
      <span className="dv-profile-pop dv-deck-pop" role="tooltip">
          <span className="dv-profile-pop-head">Matches {profiles.length} Profiles</span>
          <span className="dv-deck-pop-rows">
            {profiles.map((p, i) =>
          <span className="dv-deck-pop-item" key={i}>
                <span className={`dv-signal-tag dv-tag--profile dv-deck-pop-badge ${ci(p)}`}>
                  <Icon name={icon(p)} size={11} />{p.name}
                </span>
                <span className="dv-deck-pop-row-topics">
                  {p.topics.map((t, j) =>
              <span className="dv-profile-pop-crit" key={j}>
                      <Icon name="check" size={16} className="dv-profile-pop-check" />
                      <span className="dv-profile-pop-crit-text">{t}</span>
                    </span>
              )}
                </span>
              </span>
          )}
          </span>
        </span> :
      null}
    </span>);

}

function SignalCard({ s, sourceAccount, rich }) {
  useAppState();
  const a = sourceAccount || s.account || {};
  let profiles = matchingProfilesFor(s, a);
  // In the Opportunities feed, the badges shown are scoped to the Profiles
  // currently selected in the top-left Profile selector.
  if (state.page === 'opportunities' || state.page === 'saved-opportunities') {
    const subs = state.inbox.profileSubs;
    if (subs && subs.size) profiles = profiles.filter(p => subs.has(p.name));
  }
  const acctIdForKey = sourceAccount && sourceAccount.accountId || s.account && s.account.accountId || '';
  const sigDetailKey = acctIdForKey + '::' + (s.name || s.sigType) + '::' + (s.date || s.daysAgo);
  const isDone = state.inbox.doneKeys.has(sigDetailKey);
  const isDismissed = state.inbox.dismissedKeys.has(sigDetailKey);
  const isSaved = state.inbox.savedKeys.has(sigDetailKey);
  const contacts = rich ? topContactsForSignal(s, a) : [];
  return (
    <article className={cx('dv-signal-card', rich && 'dv-signal-card--rich')}>
      <div className="dv-signal-head">
        <div className="dv-signal-head-text">
          <button
            className="dv-signal-title" type="button"
            onClick={() => detailLinkClick('signals', sigDetailKey)} style={{ fontSize: "18px", fontWeight: "500" }}>
            {s.name || s.sigType}</button>
          {profiles.length ?
          <div className="dv-signal-tags">
              {profiles.length >= 3 ?
              <ProfileDeck profiles={profiles} /> :
              profiles.map((p) => <ProfileBadge key={p.name} profile={p} />)}
            </div> :
          null}
        </div>
        <div className="dv-signal-dates">
          {formatSignalDate(s.date) ?
          <span className="dv-signal-date-doc">{formatSignalDate(s.date)}</span> :

          <span className="dv-signal-date-doc">{fmtDaysAgo(s.daysAgo)}</span>
          }
          {signalFoundDate(s) ?
          <UploadedDate date={signalFoundDate(s)} /> :
          null}
        </div>
      </div>
      {s.text ?
      <div className="dv-signal-body">
          <div className="dv-signal-synopsis">{s.text}</div>
        </div> :
      null}
      {contacts.length ?
      <div className="dv-signal-contacts">
          {contacts.map((c, i) => <SignalContactChip c={c} account={a} rich key={i} />)}
        </div> :
      null}
      <div className="dv-signal-actions">
        <button className="dv-action-btn" type="button">
          <Icon name="sparkles" size={14} /> Chat about Signal
        </button>
        <ActionSplit
          mainIcon="star"
          mainLabel={isSaved ? 'Saved' : 'Save Opportunity'}
          mainActive={isSaved}
          onMain={() => handleSignalAction('save', sigDetailKey)}
          items={[
          ['arrow-down-to-line', 'Save to Worksheet'],
          ['brand-salesforce', 'Save to Salesforce'],
          ['brand-hubspot', 'Save to HubSpot'],
          ['file-down', 'Save to CSV']]
          }
          triggerLabel="More save options" />
        
        <ActionSplit
          mainIcon="play"
          mainLabel="Run Plays"
          onMain={() => {}}
          items={[
          ['mail', 'Outreach sequence'],
          ['sparkles', 'Enrich contacts'],
          ['book-open', 'Account research brief']]
          }
          triggerLabel="More play options" />
        
        <span className="dv-actions-spacer"></span>
        {rich ?
        <React.Fragment>
            <button
            className={cx('dv-icon-btn', isDone && 'active')} type="button"
            aria-label={isDone ? 'Marked done' : 'Mark as done'} title="Mark as done"
            onClick={() => handleSignalAction('done', sigDetailKey)}>
            <Icon name="check" size={14} /></button>
            <button
            className={cx('dv-icon-btn', isDismissed && 'active')} type="button"
            aria-label={isDismissed ? 'Dismissed' : 'Not relevant'} title="Not relevant"
            onClick={() => handleSignalAction('dismiss', sigDetailKey)}>
            <Icon name="thumbs-down" size={14} /></button>
          </React.Fragment> :
        null}
        <button className="dv-icon-btn" type="button" aria-label="Share"><Icon name="share-2" size={14} /></button>
      </div>
    </article>);

}

Object.assign(window, { SignalCard, ActionSplit, SignalContactChip, ProfileBadge });