'use client';

import { FiThumbsUp, FiTrendingUp, FiInfo } from 'react-icons/fi';
import { red, yellow, green, hexToRgba } from '../colors';

type CoachingItem = {
  headline: string;
  rationale: string;
  action?: string;
  type?: 'support' | 'coaching';
};

export default function EnterpriseCoaching({
  roleName,
  matchLabel,
  coaching,
}: {
  roleName?: string;
  matchLabel?: string;
  coaching?: { items?: CoachingItem[]; summary?: string } | null;
}) {
  if (!coaching || !Array.isArray(coaching.items) || coaching.items.length === 0) return null;

  const toneTint = (label?: string) => {
    const l = (label || '').toLowerCase();
    const base = (l.includes('optimal') || l.includes('strong'))
      ? green
      : (l.includes('moderate'))
        ? yellow
        : red;
    return hexToRgba(base, 0.10);
  };

  return (
    <div className={'mt-4 p-4 rounded-lg border'} style={{ background: toneTint(matchLabel), borderColor: 'var(--icon-button-secondary)' }}>
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>
            {roleName ? `Role Alignment — ${roleName}` : 'Role Alignment'}
          </div>
          {/* <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
            <FiInfo size={14} />
            <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
                <div style={{ fontWeight: 600 }}>AI-generated</div>
                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>These items reflect alignment evidence and coaching opportunities based on the role requirements.</div>
              </div>
            </div>
          </span> */}
        </div>
      </div>
      <ul className={'space-y-3'}>
        {coaching.items.slice(0, 4).map((it, idx) => {
          const isSupport = (it.type || '').toLowerCase() === 'support';
          return (
            <li key={idx} className={'flex items-start gap-3'} style={{ color: 'var(--text-secondary)' }}>
              <div className={'mt-0.5'} style={{ color: isSupport ? 'var(--text-main)' : 'var(--text-secondary)' }}>
                {isSupport ? <FiThumbsUp size={16} /> : <FiTrendingUp size={16} />}
              </div>
              <div>
                <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{it.headline}</div>
                <div className={'text-sm'}>{it.rationale}</div>
                {it.action ? (
                  <div className={'text-sm'}>
                    <span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Coaching Opportunity:</span> {it.action}
                  </div>
                ) : null}
              </div>
            </li>
          );
        })}
      </ul>
      {coaching.summary ? (
        <div className={'mt-3 text-sm'} style={{ color: 'var(--text-secondary)' }}>{coaching.summary}</div>
      ) : null}
    </div>
  );
}