// Reports & Analytics — recharts. LIGHT.

function ReportsScreen() {
  const R = window.Recharts;
  if (!R) return null;
  const {
    ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
    LineChart, Line, PieChart, Pie, Cell, Legend, AreaChart, Area,
  } = R;

  const tickStyle = { fill: '#7a7c92', fontSize: 11 };
  const tooltipStyle = {
    background: 'white', border: '1px solid #e6e8ec', borderRadius: 8, fontSize: 12,
    boxShadow: '0 8px 24px -8px rgba(15,15,40,0.12)',
  };

  return (
    <Page id="reports">
      <div className="flex items-end justify-between mb-5">
        <div>
          <div className="text-[11px] uppercase tracking-[0.18em] text-ink-500 mb-1.5 flex items-center gap-2 font-medium">
            <Icon.Bar size={12} /> Reportes & Analítica
          </div>
          <h1 className="text-2xl font-semibold tracking-tight text-ink-900">Salud de la operación</h1>
          <p className="text-sm text-ink-500 mt-1">SLA, conversión, costo por contratación y precisión de SOFIA por canal y cliente.</p>
        </div>
        <div className="flex items-center gap-2">
          <Tabs value="90d" onChange={() => {}} tabs={[
            { id: '7d', label: '7d' }, { id: '30d', label: '30d' }, { id: '90d', label: '90d' },
          ]} />
          <Button variant="default" icon={<Icon.Download size={14} />}>Exportar</Button>
        </div>
      </div>

      <div className="grid grid-cols-4 gap-4 mb-5">
        <KpiCard label="Costo por hire" value="$521" sub="−30% vs. Q4 2025" icon={<Icon.Wallet size={14} />} trend={{ dir: 'down', value: '−$61' }} accent="radial-gradient(circle, #10b981, transparent 70%)" />
        <KpiCard label="Time-to-hire" value="16.8d" sub="meta: 21d" icon={<Icon.Clock size={14} />} trend={{ dir: 'down', value: '−4.2d' }} accent="radial-gradient(circle, #4f46e5, transparent 70%)" />
        <KpiCard label="Precisión SOFIA" value="94%" sub="vs. operador humano" icon={<Icon.Brain size={14} />} trend={{ dir: 'up', value: '+16%' }} accent="radial-gradient(circle, #a855f7, transparent 70%)" />
        <KpiCard label="NPS cliente" value="68" sub="Acme, Andes, Vertex top-tier" icon={<Icon.Star size={14} />} trend={{ dir: 'up', value: '+9' }} accent="radial-gradient(circle, #d97706, transparent 70%)" />
      </div>

      <div className="grid grid-cols-12 gap-5">
        {/* Source pie */}
        <Card className="col-span-5 p-5">
          <div className="mb-3">
            <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">Origen de candidatos</div>
            <h3 className="text-base font-semibold text-ink-900">Volumen por canal</h3>
          </div>
          <div className="h-[260px]">
            <ResponsiveContainer>
              <PieChart>
                <Pie data={DATA.SOURCE_DATA} dataKey="value" nameKey="name" cx="50%" cy="50%"
                     innerRadius={60} outerRadius={100} paddingAngle={2}>
                  {DATA.SOURCE_DATA.map((d, i) => <Cell key={i} fill={d.fill} stroke="white" strokeWidth={2} />)}
                </Pie>
                <Tooltip contentStyle={tooltipStyle} />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-2 space-y-1.5">
            {DATA.SOURCE_DATA.map((d) => (
              <div key={d.name} className="flex items-center justify-between text-xs">
                <div className="flex items-center gap-2">
                  <span className="h-2 w-2 rounded-full" style={{ background: d.fill }} />
                  <span className="text-ink-700">{d.name}</span>
                </div>
                <span className="tabular text-ink-900 font-semibold">{d.value}</span>
              </div>
            ))}
          </div>
        </Card>

        {/* Time-to-hire */}
        <Card className="col-span-7 p-5">
          <div className="mb-3">
            <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">Velocidad operativa</div>
            <h3 className="text-base font-semibold text-ink-900">Time-to-hire por cliente (días)</h3>
          </div>
          <div className="h-[300px]">
            <ResponsiveContainer>
              <BarChart data={DATA.TIME_TO_HIRE} margin={{ top: 10, right: 10, bottom: 4, left: -20 }}>
                <CartesianGrid stroke="#eef0f3" vertical={false} />
                <XAxis dataKey="client" tick={tickStyle} axisLine={{ stroke: '#e6e8ec' }} tickLine={false} />
                <YAxis tick={tickStyle} axisLine={false} tickLine={false} />
                <Tooltip contentStyle={tooltipStyle} cursor={{ fill: 'rgba(79,70,229,0.06)' }} />
                <Bar dataKey="days" radius={[6, 6, 0, 0]}>
                  {DATA.TIME_TO_HIRE.map((d, i) => (
                    <Cell key={i} fill={d.days <= 15 ? '#10b981' : d.days <= 22 ? '#4f46e5' : '#d97706'} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* SOFIA accuracy */}
        <Card className="col-span-7 p-5">
          <div className="mb-3">
            <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">Calidad de SOFIA</div>
            <h3 className="text-base font-semibold text-ink-900">Precisión de AI Screening vs. operador (7 semanas)</h3>
          </div>
          <div className="h-[260px]">
            <ResponsiveContainer>
              <AreaChart data={DATA.SCREENING_ACCURACY} margin={{ top: 10, right: 10, bottom: 4, left: -20 }}>
                <defs>
                  <linearGradient id="accGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#4f46e5" stopOpacity="0.35" />
                    <stop offset="100%" stopColor="#4f46e5" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <CartesianGrid stroke="#eef0f3" vertical={false} />
                <XAxis dataKey="w" tick={tickStyle} axisLine={{ stroke: '#e6e8ec' }} tickLine={false} />
                <YAxis tick={tickStyle} axisLine={false} tickLine={false} domain={[60, 100]} />
                <Tooltip contentStyle={tooltipStyle} />
                <Area dataKey="accuracy" stroke="#4f46e5" strokeWidth={2.5} fill="url(#accGrad)" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* Cost per hire */}
        <Card className="col-span-5 p-5">
          <div className="mb-3">
            <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">Eficiencia</div>
            <h3 className="text-base font-semibold text-ink-900">Costo por contratación (USD)</h3>
          </div>
          <div className="h-[260px]">
            <ResponsiveContainer>
              <LineChart data={DATA.COST_PER_HIRE} margin={{ top: 10, right: 10, bottom: 4, left: -10 }}>
                <CartesianGrid stroke="#eef0f3" vertical={false} />
                <XAxis dataKey="m" tick={tickStyle} axisLine={{ stroke: '#e6e8ec' }} tickLine={false} />
                <YAxis tick={tickStyle} axisLine={false} tickLine={false} />
                <Tooltip contentStyle={tooltipStyle} />
                <Line dataKey="usd" stroke="#d97706" strokeWidth={2.5} dot={{ r: 4, fill: '#d97706' }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* Funnel re-used */}
        <Card className="col-span-12 p-5">
          <div className="mb-3 flex items-center justify-between">
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">Conversión global</div>
              <h3 className="text-base font-semibold text-ink-900">Funnel · todos los clientes</h3>
            </div>
            <Pill tone="emerald" icon={<Icon.TrendUp size={11} />}>+0.4% vs. periodo anterior</Pill>
          </div>
          <div className="grid grid-cols-6 gap-3">
            {DATA.FUNNEL.map((f) => (
              <div key={f.stage} className="p-3 rounded-lg border border-line bg-ink-50">
                <div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.16em] text-ink-500 font-medium">
                  <span className="h-2 w-2 rounded-full" style={{ background: f.color }} />
                  {f.stage}
                </div>
                <div className="text-xl font-semibold tabular text-ink-900 mt-1.5">{f.count.toLocaleString()}</div>
                <div className="text-[11px] text-ink-500 tabular mt-0.5">{f.conv}% del total</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </Page>
  );
}

window.ReportsScreen = ReportsScreen;