// inb-analytics.jsx — Inbox analytics sub-tab

const InbDonut = ({ data }) => {
  const colors = ['#0d9488', '#2563eb', '#f59e0b', '#9333ea', '#94a3b8'];
  let acc = 0;
  const total = data.reduce((s, d) => s + d.value, 0);
  const gradient = data.map((d, i) => {
    const a = acc;
    acc += (d.value / total) * 100;
    return `${colors[i % colors.length]} ${a}% ${acc}%`;
  }).join(', ');
  return (
    <div className="inb-donut-wrap">
      <div className="inb-donut" style={{ background: `conic-gradient(${gradient})` }}></div>
      <div className="inb-donut-legend">
        {data.map((d, i) => <span key={d.name}><i style={{ background: colors[i % colors.length] }}></i>{d.name} {d.value}%</span>)}
      </div>
    </div>
  );
};

const InbTrend = ({ trends }) => {
  const w = 620, h = 180, pad = 28;
  const line = (arr, max, color) => {
    const pts = arr.map((v, i) => `${pad + i * ((w - pad * 2) / (arr.length - 1))},${h - pad - (v / max) * (h - pad * 2)}`).join(' ');
    return <polyline points={pts} fill="none" stroke={color} strokeWidth="2.4" />;
  };
  return (
    <svg className="inb-trend" viewBox={`0 0 ${w} ${h}`}>
      {[0,1,2].map((i) => <line key={i} x1={pad} x2={w-pad} y1={pad + i * 50} y2={pad + i * 50} />)}
      {line(trends.response, 60, '#f59e0b')}
      {line(trends.compliance, 100, '#0d9488')}
      {line(trends.resolved, 30, '#2563eb')}
    </svg>
  );
};

const InbAnalytics = ({ lang }) => {
  const data = window.INB.ANALYTICS;
  return (
    <div className="inb-analytics-page">
      <div className="inb-kpi-grid">
        {data.kpis.map(([label, value, delta, tone]) => (
          <div className="inb-kpi-card" key={label}>
            <span>{label}</span>
            <b>{value}</b>
            <em className={tone}>{delta}</em>
          </div>
        ))}
      </div>

      <div className="inb-analytics-grid">
        <section className="inb-ana-card wide">
          <h3>Managers</h3>
          <table className="inb-table">
            <thead><tr><th>Manager</th><th>Conv.</th><th>First response</th><th>Compliance</th><th>Conversion</th></tr></thead>
            <tbody>
              {data.managers.map((m) => (
                <tr key={m.name}>
                  <td><span className={`inb-status-dot ${m.tone}`}></span>{m.name}</td>
                  <td>{m.conversations}</td>
                  <td>{m.first}</td>
                  <td><span className={`inb-pill ${m.tone}`}>{m.compliance}%</span></td>
                  <td>{m.conversion}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="inb-ana-card">
          <h3>Channels</h3>
          <div className="inb-stack-bars">
            {data.channels.map((c) => <div key={c.name}><span>{c.name}</span><b style={{ width: `${c.value}%` }}></b><em>{c.value}%</em></div>)}
          </div>
        </section>

        <section className="inb-ana-card">
          <h3>Types</h3>
          <InbDonut data={data.types} />
        </section>

        <section className="inb-ana-card wide">
          <h3>Top topics</h3>
          <div className="inb-topics">
            {data.topics.map(([topic, value, warn]) => <div key={topic} className={warn ? 'warn' : ''}><span>{topic}</span><b><i style={{ width: `${value}%` }}></i></b><em>{warn ? 'нужно фиксить' : value}</em></div>)}
          </div>
        </section>

        <section className="inb-ana-card">
          <h3>Standards violations</h3>
          <div className="inb-violations">
            {data.violations.map(([name, value]) => <div key={name}><span>{name}</span><b>{value}</b></div>)}
          </div>
        </section>

        <section className="inb-ana-card wide">
          <div className="inb-card-head">
            <h3>Trends</h3>
            <p>Response · Compliance · Resolved/day</p>
          </div>
          <InbTrend trends={data.trends} />
        </section>
      </div>
    </div>
  );
};

window.InbAnalytics = InbAnalytics;
window.InbDonut = InbDonut;
window.InbTrend = InbTrend;