// AnalyticsScreen + LineChart

const LineChart = ({ points, color = '#C8102E', height = 80 }) => {
  if (!points || points.length < 2) return <div className="chart-empty">Veri yok</div>;
  const max = Math.max(...points.map(p => p.value));
  const min = Math.min(...points.map(p => p.value));
  const range = max - min || 1;
  const w = 100 / (points.length - 1);
  const id = `grad-${color.replace('#','')}`;
  const pathD = points.map((p, i) => {
    const x = i * w;
    const y = 100 - ((p.value - min) / range) * 80 - 10;
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`;
  }).join(' ');
  const lastY = 100 - ((points[points.length-1].value - min) / range) * 80 - 10;
  const lastX = (points.length - 1) * w;
  return (
    <div className="chart-svg-wrap" style={{ height }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="chart-svg" style={{ width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={color} stopOpacity="0.28"/>
            <stop offset="1" stopColor={color} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={`${pathD} L ${(points.length-1)*w} 100 L 0 100 Z`} fill={`url(#${id})`}/>
        <path d={pathD} stroke={color} strokeWidth="1.5" fill="none" vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx={lastX} cy={lastY} r="2.4" fill={color} vectorEffect="non-scaling-stroke"/>
        <circle cx={lastX} cy={lastY} r="4.8" fill={color} fillOpacity="0.18" vectorEffect="non-scaling-stroke"/>
      </svg>
      <div className="chart-x-axis">
        {points.map(p => <span key={p.period}>{p.period}</span>)}
      </div>
    </div>
  );
};

const AnalyticsScreen = ({ onSendChat }) => {
  const [filter, setFilter] = React.useState('all');
  const charts = CHART_DATA.filter(c => filter === 'all' ? true : c.category === filter);
  const counts = ANALYTICS_CATEGORIES.map(c => ({
    ...c,
    n: c.id === 'all' ? CHART_DATA.length : CHART_DATA.filter(x => x.category === c.id).length,
  }));

  return (
    <div className="fade-in analytics-screen">
      <div className="team-v3-head">
        <div>
          <h1 className="team-v3-title">Analiz</h1>
          <div className="team-v3-meta">
            <span>{CHART_DATA.length} metric</span>
            <span className="dot-sep">·</span>
            <span>son güncelleme 12 dk önce</span>
          </div>
        </div>
      </div>

      <div className="team-v3-filters" style={{ marginBottom: 22 }}>
        {counts.map(c => (
          <button key={c.id} className={`team-v3-pill ${filter === c.id ? 'active' : ''}`} onClick={() => setFilter(c.id)}>
            {c.label}<span className="team-v3-pill-count">{c.n}</span>
          </button>
        ))}
      </div>

      <div className="chart-grid">
        {charts.map((c, i) => {
          const last = c.points[c.points.length - 1].value;
          const trendUp = c.delta?.startsWith('+');
          return (
            <div key={c.key} className="chart-card" style={{ animationDelay: `${i * 60}ms` }}>
              <div className="chart-label">{c.label}</div>
              <div className="chart-value">{c.latestLabel}<span className={`chart-trend-arrow ${trendUp ? 'up' : 'down'}`}>{trendUp ? '↑' : '↓'}</span></div>
              <div className={`chart-trend ${trendUp ? 'up' : 'down'}`}>{c.delta} {c.deltaPeriod}</div>
              <LineChart points={c.points} color={c.color} height={88}/>
            </div>
          );
        })}
        <div className="chart-placeholder" style={{ animationDelay: `${charts.length * 60}ms` }}>
          <Icon name="plus" size={20}/>
          <span>Yeni metric eklendiğinde<br/>burada otomatik açılacak</span>
        </div>
      </div>

      <div className="files-section-h" style={{ marginTop: 36 }}>💡 Son Analizler</div>

      <div className="insights-feed">
        {INSIGHTS.map((ins, i) => (
          <div key={ins.id} className="insight-card" style={{ animationDelay: `${i * 70}ms` }}>
            <div className="insight-meta">
              {ins.when} · <span className="insight-file">{ins.file}</span>
            </div>
            {ins.pending ? (
              <div className="file-insp-pending" style={{ marginTop: 8 }}>
                <span className="mm-pulse"></span>Veri çekiliyor…
              </div>
            ) : (
              <>
                <div className="insight-summary">{ins.summary}</div>
                {ins.highlights?.length > 0 && (
                  <ul className="insight-highlights">
                    {ins.highlights.map((h, j) => <li key={j}>{h}</li>)}
                  </ul>
                )}
                <div className="insight-actions">
                  <button className="btn-ghost insight-btn">Detayları aç →</button>
                  <button
                    className="insight-btn primary"
                    onClick={() => onSendChat(`"${ins.summary}" hakkında ne düşünüyorsun? Bu trend kalıcı mı, ne yapmalıyım?`)}
                  >
                    <Icon name="chat" size={13}/>CoS ile Konuş
                  </button>
                </div>
              </>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

window.LineChart = LineChart;
window.AnalyticsScreen = AnalyticsScreen;