// Дашборд ДАПР — KPI, карта Приморья, воронка

const DaprDashboard = () => {
  const { DAPR_KPI } = window.LAB;
  return (
    <div className="page page-wide">
      <div className="row-between" style={{marginBottom:8, alignItems:'flex-start'}}>
        <div>
          <div className="eyebrow eyebrow-wine">Министерство профобразования · Приморский край</div>
          <h1 className="h1" style={{marginTop:8, marginBottom:6}}>Лаборатория стажировок</h1>
          <div className="lede" style={{maxWidth:680}}>Региональный взгляд на программу. Без персональных данных — только агрегаты по командам, наставникам, рабочим местам и пилотам.</div>
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/>PDF-отчёт</button>
          <button className="btn btn-ghost btn-sm"><Icon name="share" size={14}/>Поделиться</button>
        </div>
      </div>

      <div style={{display:'flex', gap:8, marginTop:14, marginBottom:24}}>
        <span className="badge"><span className="dot dot-success"/>Данные на сегодня · 04.05.2026</span>
        <span className="badge">Обновляется автоматически</span>
      </div>

      <div className="grid-4" style={{marginBottom:24}}>
        {DAPR_KPI.map((k, i) => (
          <div key={i} className={`kpi kpi-glow-${k.glow}`}>
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-value tabular">{k.value}{k.suffix && <span className="kpi-suffix">{k.suffix}</span>}</div>
            <div className="kpi-trend">{k.trend}</div>
            <Sparkline color={k.glow==='wine'?'var(--wine-500)':k.glow==='amber'?'var(--amber-500)':k.glow==='emerald'?'var(--success-500)':'var(--ink-700)'} />
          </div>
        ))}
      </div>

      <div className="grid-12" style={{marginBottom:24}}>
        <div className="span-7">
          <div className="card card-pad-lg">
            <div className="row-between" style={{marginBottom:16}}>
              <div>
                <div className="eyebrow">География программы</div>
                <div className="h4" style={{marginTop:6}}>15 компаний по 6 городам края</div>
              </div>
              <div className="row-tight" style={{fontSize:11.5, color:'var(--ink-600)'}}>
                <span className="row-tight"><span className="dot dot-success"/>в графике</span>
                <span className="row-tight"><span className="dot dot-warn"/>отстаёт</span>
              </div>
            </div>
            <PrimoryeMap/>
          </div>
        </div>

        <div className="span-5">
          <div className="card card-pad-lg" style={{marginBottom:20}}>
            <div className="eyebrow">Воронка · от заявки до постоянного найма</div>
            <div className="h4" style={{marginTop:6, marginBottom:18}}>Текущий набор</div>
            <Funnel/>
          </div>

          <div className="card card-pad-lg">
            <div className="eyebrow">Структура отраслей</div>
            <div className="h4" style={{marginTop:6, marginBottom:14}}>Где сосредоточен пилот</div>
            <div className="stack-3">
              {[
                {n:'Производство и металлообработка', v:5, c:'var(--wine-600)'},
                {n:'IT и телеком', v:3, c:'var(--amber-500)'},
                {n:'Рыболовство · АПК', v:3, c:'var(--success-500)'},
                {n:'Логистика · транспорт', v:2, c:'var(--info-500)'},
                {n:'Образование · НИОКР', v:2, c:'var(--ink-700)'},
              ].map((s, i) => (
                <div key={i}>
                  <div className="row-between" style={{marginBottom:4, fontSize:13}}>
                    <span>{s.n}</span>
                    <b className="tabular">{s.v}</b>
                  </div>
                  <div style={{height:8, borderRadius:99, background:'var(--ink-150)', overflow:'hidden'}}>
                    <div style={{width:`${s.v/15*100}%`, height:'100%', background:s.c, borderRadius:99}}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="grid-12">
        <div className="span-8">
          <div className="card card-pad-lg">
            <div className="row-between" style={{marginBottom:16}}>
              <div>
                <div className="eyebrow">Динамика обученных наставников</div>
                <div className="h4" style={{marginTop:6}}>+32 за период программы</div>
              </div>
              <span className="badge badge-success">+12 за апрель</span>
            </div>
            <BigChart/>
          </div>
        </div>
        <div className="span-4">
          <div className="card card-pad-lg" style={{height:'100%'}}>
            <div className="eyebrow">Качественные сигналы</div>
            <div className="h4" style={{marginTop:6, marginBottom:14}}>Что говорят участники</div>
            <div className="stack-4">
              {[
                {q:'«Раньше думали, стажёры — это лишняя нагрузка. Школа поменяла оптику».', who:'HR, Восток-Сталь'},
                {q:'«Конструктор проекта снял 3 недели бумажной работы».', who:'Руководитель, ДНС'},
                {q:'«Pulse от наставника — впервые знаю, как реально идёт у каждого».', who:'Куратор ЦОПП'},
              ].map((s,i) => (
                <div key={i} style={{borderLeft:'2px solid var(--amber-500)', paddingLeft:14}}>
                  <div style={{fontSize:13.5, fontStyle:'italic', color:'var(--ink-800)', lineHeight:1.5}}>{s.q}</div>
                  <div style={{fontSize:11.5, color:'var(--ink-600)', marginTop:6}}>— {s.who}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Sparkline = ({ color }) => (
  <svg className="spark" viewBox="0 0 120 32" style={{width:'100%', height:32, marginTop:14}}>
    <defs>
      <linearGradient id={`g-${color.replace(/[^a-z]/g,'')}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={color} stopOpacity="0.25"/>
        <stop offset="100%" stopColor={color} stopOpacity="0"/>
      </linearGradient>
    </defs>
    <path d="M0,28 C15,24 25,18 40,16 C55,14 65,22 80,18 C95,14 105,8 120,6 L120,32 L0,32 Z" fill={`url(#g-${color.replace(/[^a-z]/g,'')})`}/>
    <path d="M0,28 C15,24 25,18 40,16 C55,14 65,22 80,18 C95,14 105,8 120,6" stroke={color} strokeWidth="1.5" fill="none"/>
  </svg>
);

const Funnel = () => {
  const STAGES = [
    {l:'Заявки от компаний', v:48, max:48, c:'var(--ink-700)'},
    {l:'Прошли в программу', v:15, max:48, c:'var(--wine-700)'},
    {l:'Спроектировали места', v:41, max:48, c:'var(--wine-500)', note:'2.7 на компанию'},
    {l:'Защитили проект', v:13, max:48, c:'var(--amber-600)', forecast:true},
    {l:'Запустили пилот', v:38, max:48, c:'var(--amber-500)', forecast:true, note:'мест, по 41 проекту'},
    {l:'Прогноз постоянного найма', v:22, max:48, c:'var(--success-500)', forecast:true},
  ];
  return (
    <div className="stack-3">
      {STAGES.map((s, i) => (
        <div key={i}>
          <div className="row-between" style={{marginBottom:4}}>
            <span style={{fontSize:13, fontWeight: s.forecast?500:600, color: s.forecast?'var(--ink-700)':'var(--ink-900)'}}>
              {s.l}{s.forecast && <span style={{color:'var(--ink-500)', fontSize:11.5, marginLeft:6}}>прогноз</span>}
            </span>
            <span className="tabular" style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:14}}>{s.v}</span>
          </div>
          <div style={{height:10, borderRadius:99, background:'var(--ink-150)', overflow:'hidden'}}>
            <div style={{width:`${s.v/s.max*100}%`, height:'100%', background:s.c, borderRadius:99, opacity: s.forecast?0.7:1, backgroundImage: s.forecast?'repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.18) 6px 8px)':'none'}}/>
          </div>
          {s.note && <div style={{fontSize:11, color:'var(--ink-500)', marginTop:3}}>{s.note}</div>}
        </div>
      ))}
    </div>
  );
};

const BigChart = () => {
  const POINTS = [
    {m:'фев', v:0}, {m:'мар', v:4}, {m:'апр', v:20}, {m:'1 мая', v:24}, {m:'сейчас', v:32}, {m:'июнь', v:42, forecast:true}, {m:'июль', v:56, forecast:true},
  ];
  const max = 56;
  const W = 600, H = 220;
  const pts = POINTS.map((p, i) => ({x: 30 + (i/(POINTS.length-1))*(W-60), y: H-20 - (p.v/max)*(H-50), ...p}));
  const path = pts.map((p,i) => `${i===0?'M':'L'}${p.x},${p.y}`).join(' ');
  const splitIdx = POINTS.findIndex(p => p.forecast);
  const realPath = pts.slice(0,splitIdx).map((p,i)=>`${i===0?'M':'L'}${p.x},${p.y}`).join(' ');
  const forePath = pts.slice(splitIdx-1).map((p,i)=>`${i===0?'M':'L'}${p.x},${p.y}`).join(' ');
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%', height:H}}>
      <defs>
        <linearGradient id="bigArea" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--wine-500)" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="var(--wine-500)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,14,28,42,56].map(g => {
        const y = H-20 - (g/max)*(H-50);
        return <g key={g}>
          <line x1="30" y1={y} x2={W-30} y2={y} stroke="var(--ink-200)" strokeDasharray="2 4"/>
          <text x="2" y={y+3} fontSize="10" fill="var(--ink-500)">{g}</text>
        </g>;
      })}
      {pts.map((p,i) => (
        <text key={i} x={p.x} y={H-4} fontSize="10" fill="var(--ink-600)" textAnchor="middle">{p.m}</text>
      ))}
      <path d={`${realPath} L${pts[splitIdx-1].x},${H-20} L${pts[0].x},${H-20} Z`} fill="url(#bigArea)"/>
      <path d={realPath} stroke="var(--wine-600)" strokeWidth="2.5" fill="none"/>
      <path d={forePath} stroke="var(--amber-600)" strokeWidth="2.5" fill="none" strokeDasharray="5 4"/>
      {pts.map((p,i) => (
        <circle key={i} cx={p.x} cy={p.y} r="4" fill="#fff" stroke={p.forecast?'var(--amber-600)':'var(--wine-600)'} strokeWidth="2"/>
      ))}
      <text x={pts[4].x} y={pts[4].y - 12} fontSize="11" fontWeight="700" fill="var(--wine-700)" textAnchor="middle">32</text>
    </svg>
  );
};

const PrimoryeMap = () => {
  const PINS = [
    {x:35, y:65, n:5,  city:'Владивосток', s:'green'},
    {x:42, y:58, n:3,  city:'Артём', s:'green'},
    {x:55, y:48, n:1,  city:'Уссурийск', s:'yellow'},
    {x:48, y:72, n:2,  city:'Большой Камень', s:'green'},
    {x:60, y:80, n:2,  city:'Находка', s:'green'},
    {x:72, y:30, n:2,  city:'Спасск-Дальний', s:'red'},
  ];
  const color = s => s==='green'?'var(--success-500)':s==='yellow'?'var(--warn-500)':'var(--danger-500)';
  return (
    <div style={{position:'relative', height:340, borderRadius:'var(--r-lg)', overflow:'hidden', background:'linear-gradient(135deg, #fbf3ee, #f1e8e2)'}}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
        {/* Stylised Primorye outline */}
        <path d="M20,20 Q15,30 18,42 Q12,52 22,60 Q28,72 38,76 Q44,84 52,86 Q62,90 70,82 Q78,72 82,58 Q88,46 84,34 Q80,22 70,18 Q58,12 46,16 Q32,14 20,20 Z"
          fill="rgba(138,24,56,0.06)" stroke="var(--wine-300)" strokeWidth="0.4" strokeDasharray="0.8 0.6"/>
      </svg>
      {PINS.map((p,i) => (
        <div key={i} style={{position:'absolute', left:`${p.x}%`, top:`${p.y}%`, transform:'translate(-50%,-100%)', textAlign:'center'}}>
          <div style={{
            display:'inline-flex', flexDirection:'column', alignItems:'center', gap:4,
          }}>
            <div style={{
              minWidth:32, height:32, padding:'0 9px', borderRadius:'50%',
              background:'#fff', border:`2px solid ${color(p.s)}`,
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              fontFamily:'var(--font-display)', fontWeight:700, fontSize:13,
              color:'var(--ink-900)', boxShadow:'0 4px 14px rgba(42,6,18,0.2)',
            }}>{p.n}</div>
            <div style={{
              fontSize:10.5, fontWeight:600, color:'var(--ink-800)',
              background:'#fff', padding:'2px 6px', borderRadius:4, border:'1px solid var(--ink-200)',
            }}>{p.city}</div>
          </div>
        </div>
      ))}
      <div style={{position:'absolute', bottom:14, left:14, fontSize:11, color:'var(--ink-600)'}}>
        Всего <b style={{color:'var(--ink-900)'}}>15 команд</b> в 6 городах · контуры схематичны
      </div>
    </div>
  );
};

Object.assign(window, { DaprDashboard });