/* Triage MCP App — modeled after agntux-core/view-tool main-component.tsx. */

const TIconClock = () => (
  <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
    <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.4" />
    <path d="M8 4.5V8l2.2 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);
const TIconCaretDown = () => (
  <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
    <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* heroState lifecycle (used to drive the hero row visually):
   'idle'        : nothing happening
   'hover'       : cursor parked above it (subtle background)
   'pressed'     : the active button is being pressed
   'expanded'    : details panel open
   'resolved'    : row replaced by a green feedback strip */

function ActionRow({ action, heroState, btnRef, detailsBtnRef }) {
  const isHover = heroState === 'hover' || heroState === 'hover-details';
  const isPressed = heroState === 'pressed' || heroState === 'expanded-action-pressed';
  const isExpanded =
    heroState === 'expanded' ||
    heroState === 'expanded-pressed' ||
    heroState === 'expanded-action-pressed';
  const isExpandedPressed = heroState === 'expanded-pressed';
  const isResolved = heroState === 'resolved';

  if (isResolved) {
    return (
      <div className="feedback fade-in">
        <svg viewBox="0 0 16 16" width="16" height="16" fill="none">
          <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <div>
          <strong style={{ fontWeight: 600 }}>Draft prepared.</strong>{' '}
          Review the compose card below, then click Send.
        </div>
      </div>
    );
  }

  return (
    <div className={['action', isHover ? 'hover' : ''].join(' ')}>
      <div className="action-line1">
        <span className="action-title">{action.title}</span>
        <span className={`pill ${action.priority}`}>{action.priority}</span>
        <span className={`badge ${action.reason_class}`}>{action.reason_class}</span>
        {action.due_by ? (
          <span className={`due ${action.overdue ? 'overdue' : ''}`}>
            <TIconClock /> Due {action.due_by}
          </span>
        ) : null}
      </div>
      <div className="action-summary">{action.summary}</div>
      <div className="sa-row">
        {action.suggested_actions.map((sa, idx) => {
          const isPrimary = !!sa.primary;
          const isClick = idx === 0 && isPressed;
          return (
            <button
              key={idx}
              ref={idx === 0 ? btnRef : null}
              className={[
                'sa',
                isPrimary ? 'primary' : '',
                isClick ? 'pulse' : '',
              ].join(' ')}
              type="button"
            >
              {sa.label}
            </button>
          );
        })}
        <button
          ref={detailsBtnRef}
          className={['sa', 'dim', isExpandedPressed ? 'pulse' : ''].join(' ')}
          type="button"
        >
          Details
        </button>
        {action.source ? (
          <span style={{ marginLeft: 'auto', alignSelf: 'center' }} className="source">
            from {action.source}
          </span>
        ) : null}
      </div>
      {isExpanded ? (
        <div className="details-panel fade-in">
          {action.why_matters ? (
            <div>
              <h5>Why this matters</h5>
              <p>{action.why_matters}</p>
            </div>
          ) : null}
          {action.personalization ? (
            <div>
              <h5>Personalization fit</h5>
              <p>{action.personalization}</p>
            </div>
          ) : null}
          {action.related && action.related.length ? (
            <div>
              <h5>Related entities</h5>
              <div className="details-row">
                {action.related.map((r) => (
                  <span className="entity-badge" key={r}>{r}</span>
                ))}
              </div>
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function TriageCard({ data, heroRowId, heroState, heroBtnRef, detailsBtnRef }) {
  return (
    <div className="app-card slide-in">
      <div className="app-card-header">
        <span className="logo">
          <AgntuxLogo height={16} />
        </span>
        <span className="dot-sep">·</span>
        <span style={{ fontWeight: 600 }}>Triage</span>
        <span className="dot-sep">·</span>
        <span className="sub">{data.counts.open} open · updated {data.last_updated_at}</span>
      </div>
      <div className="app-card-body">
        <div className="triage">
          <div className="triage-controls">
            <span className="chip active">All</span>
            <span className="chip">High</span>
            <span className="chip">Medium</span>
            <span className="chip">Low</span>
            <span className="chip-sort" style={{ marginLeft: 'auto' }}>
              Sort: Priority <TIconCaretDown />
            </span>
          </div>
          {data.actions.map((a) => (
            <ActionRow
              key={a.id}
              action={a}
              heroState={a.id === heroRowId ? heroState : 'idle'}
              btnRef={a.id === heroRowId ? heroBtnRef : null}
              detailsBtnRef={a.id === heroRowId ? detailsBtnRef : null}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

window.TriageCard = TriageCard;