/* global React, Icon, fmtTime, speakerColor, speakerLabel */
const { useState, useMemo, useRef, useEffect } = React;

/* color from scam_signal */
const signalColor = (sig) => {
  // 0 -> safe green, 0.5 -> warn amber, 1 -> danger red
  if (sig < 0.3) return "oklch(0.62 0.14 155)";
  if (sig < 0.5) return "oklch(0.70 0.14 110)";
  if (sig < 0.7) return "oklch(0.75 0.14 75)";
  if (sig < 0.85) return "oklch(0.70 0.16 45)";
  return "oklch(0.62 0.18 25)";
};

function VerdictCard({ summary, meta }) {
  const isSafe = summary.verdict !== "likely_scam";
  return (
    <div className={`verdict card ${isSafe ? "safe" : ""}`}>
      <div className="verdict-grid">
        <div className="verdict-main">
          <div className="verdict-eyebrow">{summary.risk_tier} risk · {summary.stage} stage</div>
          <h1 className="verdict-title">
            {isSafe ? "Safe call" : <>This call is a <em>scam</em>.</>}
          </h1>
          <p className="verdict-narrative">
            A caller posing as a fraud-watch agent built urgency, requested credentials, and showed <b>scripted delivery patterns</b>. The pattern matches a textbook <b>{summary.scam_type}</b> at the <b>{summary.stage}</b> stage.
          </p>
        </div>
        <div className="verdict-stats">
          <div className="vstat">
            <div className="vstat-label">Severity</div>
            <div className="vstat-val">{summary.final_score}<span className="pct-sm">/100</span></div>
          </div>
          <div className="vstat">
            <div className="vstat-label">Probability</div>
            <div className="vstat-val">{Math.round(summary.scam_probability * 100)}<span className="pct-sm">%</span></div>
          </div>
          <div className="vstat">
            <div className="vstat-label">Confidence</div>
            <div className="vstat-val">{Math.round(summary.confidence * 100)}<span className="pct-sm">%</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ Timeline ============ */
function Timeline({ timeline, duration, activeId, onSelect, onHover, currentTime = 0 }) {
  const [hover, setHover] = useState(null);
  const wrapRef = useRef(null);

  return (
    <div className="card section">
      <div className="section-head">
        <div className="section-title">
          <span className="num">02</span>
          Risk timeline
        </div>
        <div className="section-sub">{timeline.length} segments · {timeline.filter(s=>s.is_flagged).length} flagged</div>
      </div>

      <div className="tl-wrap" ref={wrapRef} style={{position: "relative"}}>
        <div className="tl-axis-labels">
          <span>0:00</span>
          <span>{fmtTime(duration / 4)}</span>
          <span>{fmtTime(duration / 2)}</span>
          <span>{fmtTime(duration * 3 / 4)}</span>
          <span>{fmtTime(duration)}</span>
        </div>

        <div className="tl-track">
          {currentTime > 0 && (
            <div className="tl-playhead" style={{left: `${(currentTime / duration) * 100}%`}}/>
          )}
          {timeline.map((seg) => {
            const w = ((seg.end - seg.start) / duration) * 100;
            return (
              <div
                key={seg.id}
                className={`tl-seg ${activeId === seg.id ? "active" : ""}`}
                style={{
                  width: `${w}%`,
                  background: signalColor(seg.scam_signal),
                  opacity: 0.55 + seg.scam_signal * 0.45,
                }}
                onClick={() => onSelect(seg.id)}
                onMouseEnter={(e) => {
                  setHover({ seg, x: e.currentTarget.offsetLeft + e.currentTarget.offsetWidth / 2 });
                  onHover && onHover(seg.id);
                }}
                onMouseLeave={() => { setHover(null); onHover && onHover(null); }}
              >
                {seg.is_flagged && <span className="flag"></span>}
              </div>
            );
          })}
        </div>

        {hover && (
          <div className="tl-tooltip" style={{
            left: Math.min(Math.max(hover.x, 130), (wrapRef.current?.offsetWidth || 800) - 130),
            top: 70,
            transform: "translateX(-50%)",
          }}>
            <div className="tt-time">{fmtTime(hover.seg.start)} – {fmtTime(hover.seg.end)} · {speakerLabel(hover.seg.speaker)}</div>
            <div style={{color:"var(--text-1)", fontSize: 12.5, lineHeight: 1.45, marginBottom: 8}}>
              {hover.seg.text.length > 90 ? hover.seg.text.slice(0, 88) + "…" : hover.seg.text}
            </div>
            <div className="tt-row"><span className="tt-label">Intent</span><span className="tt-val">{hover.seg.intent}</span></div>
            <div className="tt-row"><span className="tt-label">Tactic</span><span className="tt-val">{hover.seg.tactic}</span></div>
            <div className="tt-row">
              <span className="tt-label">Signal</span>
              <span className="tt-val mono" style={{color: signalColor(hover.seg.scam_signal)}}>{(hover.seg.scam_signal * 100).toFixed(0)}%</span>
            </div>
          </div>
        )}

        <div className="tl-legend">
          <span>Click any segment to inspect transcript</span>
          <div className="tl-legend-grad">
            <span style={{color:"var(--text-4)"}}>safe</span>
            <span className="grad"></span>
            <span style={{color:"var(--text-4)"}}>scam</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ Risk graph ============ */
function RiskGraph({ timeline, duration, activeId, onSelect }) {
  const W = 720, H = 160, P = { l: 28, r: 12, t: 14, b: 22 };
  const w = W - P.l - P.r, h = H - P.t - P.b;

  const points = timeline.map((s) => {
    const t = (s.start + s.end) / 2;
    const x = P.l + (t / duration) * w;
    const y = P.t + (1 - s.scam_signal) * h;
    return { ...s, x, y };
  });

  const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" ");
  const areaPath = `${linePath} L ${points[points.length-1].x.toFixed(1)} ${P.t + h} L ${points[0].x.toFixed(1)} ${P.t + h} Z`;
  const yThresh = P.t + (1 - 0.6) * h;

  const ticks = 5;
  const xLabels = Array.from({length: ticks}, (_, i) => ({
    t: (duration * i) / (ticks - 1),
    x: P.l + (i / (ticks - 1)) * w,
  }));

  return (
    <div className="card section">
      <div className="section-head">
        <div className="section-title">
          <span className="num">03</span>
          Risk escalation
        </div>
        <div className="section-sub">scam_signal over time · threshold 0.60</div>
      </div>
      <div className="risk-graph">
        <svg className="risk-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
          <defs>
            <linearGradient id="riskGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.72 0.16 280 / 0.35)"/>
              <stop offset="100%" stopColor="oklch(0.72 0.16 280 / 0)"/>
            </linearGradient>
          </defs>
          {/* grid */}
          <g className="risk-grid">
            {[0, 0.25, 0.5, 0.75, 1].map((v) => {
              const y = P.t + (1 - v) * h;
              return <line key={v} x1={P.l} x2={W - P.r} y1={y} y2={y}/>;
            })}
          </g>
          {/* y axis labels */}
          <g className="risk-yaxis">
            {[0, 0.5, 1].map((v) => {
              const y = P.t + (1 - v) * h;
              return <text key={v} x={P.l - 6} y={y + 3} textAnchor="end">{v.toFixed(1)}</text>;
            })}
          </g>
          {/* x axis labels */}
          <g className="risk-yaxis">
            {xLabels.map((l, i) => (
              <text key={i} x={l.x} y={H - 6} textAnchor="middle">{fmtTime(l.t)}</text>
            ))}
          </g>
          {/* threshold */}
          <line className="risk-thresh-line" x1={P.l} x2={W - P.r} y1={yThresh} y2={yThresh}/>
          <text x={W - P.r - 4} y={yThresh - 4} textAnchor="end" fontSize="9" fontFamily="var(--font-mono)" fill="var(--danger)" opacity="0.7">flag · 0.6</text>
          {/* area + line */}
          <path d={areaPath} className="risk-area"/>
          <path d={linePath} className="risk-line"/>
          {/* points */}
          {points.map((p) => (
            <circle
              key={p.id}
              cx={p.x} cy={p.y}
              r={activeId === p.id ? 5 : 3}
              className={`risk-dot ${p.is_flagged ? "flagged" : ""} ${activeId === p.id ? "active" : ""}`}
              onClick={() => onSelect(p.id)}
            >
              <title>{`${fmtTime(p.start)} · ${(p.scam_signal*100).toFixed(0)}% — ${p.tactic}`}</title>
            </circle>
          ))}
        </svg>
      </div>
      <div className="risk-legend">
        <div className="key"><span className="ln"></span> scam_signal</div>
        <div className="key"><span className="ln thresh"></span> flag threshold</div>
      </div>
    </div>
  );
}

window.VerdictCard = VerdictCard;
window.Timeline = Timeline;
window.RiskGraph = RiskGraph;
window.signalColor = signalColor;