/* ProvBadge — 수치 옆에 출처·신뢰도 뱃지를 표시.
   ProvCard  — 페르소나 카드 헤더 등에 종합 신뢰도 등급 표시.
   ProvHover — 뱃지 호버 시 자세한 출처 카드 노출.
*/

const { useState: useProvState } = React;

function ProvBadge({ source, tier: tierOverride, inline = true, title }) {
  const src = (window.Provenance?.SOURCES || {})[source];
  if (!src) return null;
  const tier = tierOverride || src.tier;
  const tone = window.Provenance.TIER_TONE[tier] || 'mute';
  const [hover, setHover] = useProvState(false);

  return (
    <span className={'prov-badge ' + (inline ? 'prov-inline' : '')}
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
          data-tone={tone}>
      <span className="prov-tier">{tier}</span>
      {hover && (
        <span className="prov-card">
          <strong>{src.label}</strong>
          <span className="prov-detail">{src.detail}</span>
          <span className="prov-meta">
            <span><span className="prov-meta-l">시점</span>{src.asOf}</span>
            <span><span className="prov-meta-l">신뢰도</span>{src.confidence}%</span>
            <span><span className="prov-meta-l">등급</span>{tier}</span>
          </span>
          {title && <span className="prov-context">{title}</span>}
        </span>
      )}
      <style>{`
        .prov-badge {
          display: inline-flex; align-items: center; gap: 3px;
          font-family: var(--font-mono); font-size: 9px; font-weight: 700;
          padding: 1px 5px;
          background: rgba(255,240,220,0.04);
          border: 1px solid var(--border-strong);
          color: var(--text-mute);
          cursor: help;
          line-height: 1.4;
          position: relative;
          letter-spacing: 0.03em;
        }
        .prov-badge.prov-inline { margin-left: 4px; vertical-align: middle; }
        .prov-badge[data-tone="plant"]  { color: var(--plant);  border-color: oklch(0.74 0.13 145 / 0.40); background: oklch(0.74 0.13 145 / 0.06); }
        .prov-badge[data-tone="cyan"]   { color: var(--cyan);   border-color: oklch(0.78 0.12 220 / 0.38); background: oklch(0.78 0.12 220 / 0.06); }
        .prov-badge[data-tone="signal"] { color: var(--signal); border-color: oklch(0.80 0.14 72  / 0.38); background: oklch(0.80 0.14 72  / 0.06); }
        .prov-badge[data-tone="alert"]  { color: var(--alert);  border-color: oklch(0.68 0.21 22  / 0.38); background: oklch(0.68 0.21 22  / 0.06); }
        .prov-tier { font-family: var(--font-mono); font-weight: 700; }
        .prov-card {
          position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
          background: oklch(0.10 0.02 240 / 0.96);
          border: 1px solid rgba(255,240,220,0.18);
          padding: 8px 10px;
          min-width: 220px;
          display: flex; flex-direction: column; gap: 4px;
          font-family: var(--font-sans);
          font-size: 11px;
          color: var(--text);
          z-index: 1000;
          box-shadow: 0 12px 24px rgba(0,0,0,0.5);
          pointer-events: none;
          letter-spacing: 0;
          white-space: normal;
          text-align: left;
          font-weight: 400;
        }
        .prov-card strong { font-size: 12px; font-weight: 700; color: var(--text); }
        .prov-detail { font-size: 10px; color: var(--text-dim); }
        .prov-meta {
          display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
          margin-top: 4px;
          padding-top: 6px;
          border-top: 1px dashed rgba(255,240,220,0.12);
        }
        .prov-meta > span { display: flex; flex-direction: column; }
        .prov-meta-l { font-size: 8px; color: var(--text-mute); margin-bottom: 1px; }
        .prov-context {
          margin-top: 4px;
          padding-top: 4px;
          border-top: 1px dashed rgba(255,240,220,0.12);
          font-size: 9px;
          color: var(--text-mute);
          font-family: var(--font-mono);
        }
      `}</style>
    </span>
  );
}

function ProvSummary({ values, compact }) {
  const agg = window.Provenance?.aggregate(values);
  if (!agg) return null;
  const tone = ['A', 'A-'].includes(agg.grade) ? 'plant'
             : ['B+', 'B'].includes(agg.grade) ? 'cyan'
             : ['C+', 'C'].includes(agg.grade) ? 'signal' : 'alert';
  return (
    <div className={'prov-summary ' + (compact ? 'prov-summary-compact' : '')}>
      <div className="prov-summary-grade" data-tone={tone}>{agg.grade}</div>
      <div className="prov-summary-body">
        <strong>데이터 신뢰도 {agg.grade}</strong>
        <span className="prov-summary-meta">
          평균 신뢰점수 {agg.avgScore}/100 · 출처 {agg.total}건
        </span>
        <div className="prov-summary-counts">
          {Object.entries(agg.counts).filter(([_, n]) => n > 0).map(([tier, n]) => {
            const t = window.Provenance.TIER_TONE[tier] || 'mute';
            return (
              <span key={tier} className="prov-summary-chip" data-tone={t}>
                {tier} <strong>{n}</strong>
              </span>
            );
          })}
        </div>
      </div>
      <style>{`
        .prov-summary {
          display: flex; align-items: center; gap: 12px;
          padding: 10px 12px;
          background: linear-gradient(120deg, oklch(0.74 0.13 145 / 0.06), transparent 60%);
          border: 1px solid rgba(255,240,220,0.10);
          border-left: 2px solid var(--plant);
        }
        .prov-summary.prov-summary-compact { padding: 6px 10px; gap: 8px; }
        .prov-summary-grade {
          width: 44px; height: 44px;
          display: grid; place-items: center;
          font-family: var(--font-mono);
          font-size: 20px;
          font-weight: 700;
          border: 2px solid;
        }
        .prov-summary.prov-summary-compact .prov-summary-grade {
          width: 32px; height: 32px; font-size: 14px;
        }
        .prov-summary-grade[data-tone="plant"]  { color: var(--plant);  border-color: var(--plant); }
        .prov-summary-grade[data-tone="cyan"]   { color: var(--cyan);   border-color: var(--cyan); }
        .prov-summary-grade[data-tone="signal"] { color: var(--signal); border-color: var(--signal); }
        .prov-summary-grade[data-tone="alert"]  { color: var(--alert);  border-color: var(--alert); }
        .prov-summary-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
        .prov-summary-body strong { font-size: 12px; font-weight: 600; }
        .prov-summary-meta { font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); }
        .prov-summary-counts { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
        .prov-summary-chip {
          display: inline-flex; align-items: center; gap: 3px;
          padding: 1px 5px;
          font-family: var(--font-mono); font-size: 9px;
          border: 1px solid var(--border-strong);
          color: var(--text-mute);
          background: rgba(0,0,0,0.2);
        }
        .prov-summary-chip[data-tone="plant"]  { color: var(--plant);  border-color: oklch(0.74 0.13 145 / 0.4); }
        .prov-summary-chip[data-tone="cyan"]   { color: var(--cyan);   border-color: oklch(0.78 0.12 220 / 0.4); }
        .prov-summary-chip[data-tone="signal"] { color: var(--signal); border-color: oklch(0.80 0.14 72  / 0.4); }
        .prov-summary-chip[data-tone="alert"]  { color: var(--alert);  border-color: oklch(0.68 0.21 22  / 0.4); }
      `}</style>
    </div>
  );
}

/* Helper — 페르소나의 모든 측정값에 출처를 부착해 ProvSummary용 배열 반환 */
function personaProvenance(persona) {
  if (!persona?.result) return [];
  const P = window.Provenance;
  return [
    P.value(persona.result.finalReach,        'datalab_search'),
    P.value(persona.result.ctr,               'sim_heuristic'),
    P.value(persona.result.conv,              'sim_heuristic'),
    P.value(persona.result.cpm,               'sim_heuristic'),
    P.value(persona.result.validity,          'composite'),
    P.value(persona.result.conversionFitness, 'composite'),
    P.value(persona.result.fitnessParts?.gender || 0, 'datalab_shopping'),
    P.value(persona.result.fitnessParts?.age || 0,    'kosis'),
    P.value(persona.result.fitnessParts?.device || 0, 'datalab_shopping'),
    P.value(persona.result.deviceDist?.mobile || 0,   'datalab_shopping'),
    P.value(persona.result.ageDist || [],     'kosis'),
    P.value(persona.result.skew,              'datalab_shopping'),
  ];
}

Object.assign(window, { ProvBadge, ProvSummary, personaProvenance });