// ============================================================
//  DASHBOARD ADMIN — KPIs + graphiques
// ============================================================

const Dashboard = () => {
  const { t, members, pendingMembers, opps, openProfile, setPage } = useApp();

  const stats = React.useMemo(() => {
    const byDecade = {};
    const byCountry = {};
    const byDomain = {};
    const byPromo = {};
    members.forEach(m => {
      byDecade[m.decade] = (byDecade[m.decade] || 0) + 1;
      byCountry[m.country] = (byCountry[m.country] || 0) + 1;
      byDomain[m.domain] = (byDomain[m.domain] || 0) + 1;
      byPromo[m.promo] = (byPromo[m.promo] || 0) + 1;
    });
    return {
      total: members.length,
      promos: Object.keys(byPromo).length,
      countries: Object.keys(byCountry).length,
      domains: Object.keys(byDomain).length,
      retired: members.filter(m => m.retired).length,
      entrepreneurs: members.filter(m => m.entrepreneur).length,
      diaspora: members.filter(m => m.diaspora).length,
      mentors: members.filter(m => m.mentor).length,
      incomplete: members.filter(m => !m.complete).length,
      pending: pendingMembers.length,
      jobs: opps.filter(o => o.kind === "jobs" && o.status === "published").length,
      biz: opps.filter(o => o.kind === "biz" && o.status === "published").length,
      training: opps.filter(o => o.kind === "training" && o.status === "published").length,
      byDecade, byCountry, byDomain
    };
  }, [members, pendingMembers, opps]);

  return (
    <div>
      <Section className="py-8 md:py-10">
        <div className="flex items-end justify-between flex-wrap gap-4">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <div className="liturgy-underline w-12"></div>
              <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold">Espace administrateur</div>
            </div>
            <h1 className="font-display text-4xl md:text-5xl font-semibold text-ajc-blueDk">{t.dash.title}</h1>
            <p className="mt-2 text-ajc-mute text-lg">{t.dash.lead}</p>
          </div>
          <div className="flex gap-2 flex-wrap">
            <Btn variant="secondary" icon="upload" size="sm">{t.dash.actions.import}</Btn>
            <Btn variant="secondary" icon="download" size="sm" onClick={() => exportCSV(members)}>{t.dash.actions.export}</Btn>
            <Btn variant="gold" icon="plus" size="sm">{t.dash.actions.add}</Btn>
          </div>
        </div>
      </Section>

      {/* KPIs primaires */}
      <Section className="pb-6">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
          <KpiCard color="blue" icon="users" label={t.dash.kpi.total} value={stats.total}/>
          <KpiCard color="gold" icon="calendar" label={t.dash.kpi.promos} value={stats.promos}/>
          <KpiCard color="green" icon="globe" label={t.dash.kpi.countries} value={stats.countries}/>
          <KpiCard color="red" icon="briefcase" label={t.dash.kpi.domains} value={stats.domains}/>
        </div>
      </Section>

      {/* KPIs secondaires */}
      <Section className="pb-6">
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3">
          <MiniKpi label={t.dash.kpi.retired} value={stats.retired} icon="award"/>
          <MiniKpi label={t.dash.kpi.entrepreneurs} value={stats.entrepreneurs} icon="briefcase"/>
          <MiniKpi label={t.dash.kpi.mentors} value={stats.mentors} icon="heart"/>
          <MiniKpi label={t.dash.kpi.diaspora} value={stats.diaspora} icon="globe"/>
          <MiniKpi label={t.dash.kpi.incomplete} value={stats.incomplete} icon="eyeOff" tone="warn"/>
        </div>
      </Section>

      {/* Graphiques */}
      <Section className="pb-6 grid lg:grid-cols-3 gap-5">
        <ChartCard title={t.dash.chart.decade} className="lg:col-span-2">
          <BarChart data={Object.entries(stats.byDecade).sort((a, b) => a[0] - b[0]).map(([k, v]) => ({ label: k + "s", value: v }))}/>
        </ChartCard>
        <ChartCard title={t.dash.chart.status}>
          <DonutChart data={[
            { label: "Actifs", value: stats.total - stats.retired, color: "#0B2C7A" },
            { label: "Retraités", value: stats.retired, color: "#F5C518" }
          ]}/>
        </ChartCard>
        <ChartCard title={t.dash.chart.country}>
          <RankedList data={Object.entries(stats.byCountry).map(([k, v]) => ({ label: AJC.COUNTRIES.find(c => c.code === k)?.flag + " " + AJC.COUNTRIES.find(c => c.code === k)?.name, value: v })).sort((a, b) => b.value - a.value).slice(0, 6)}/>
        </ChartCard>
        <ChartCard title={t.dash.chart.domain} className="lg:col-span-2">
          <RankedList data={Object.entries(stats.byDomain).map(([k, v]) => ({ label: k, value: v })).sort((a, b) => b.value - a.value).slice(0, 8)}/>
        </ChartCard>
      </Section>

      {/* Opportunités KPI */}
      <Section className="pb-6">
        <div className="grid grid-cols-3 gap-3">
          <KpiCard color="blue" icon="briefcase" label={t.dash.kpi.jobs} value={stats.jobs}/>
          <KpiCard color="gold" icon="handshake" label={t.dash.kpi.biz} value={stats.biz}/>
          <KpiCard color="green" icon="school" label={t.dash.kpi.training} value={stats.training}/>
        </div>
      </Section>

      {/* À valider */}
      <Section className="pb-16">
        <div className="bg-white rounded-2xl border border-ajc-gold/30 shadow-card overflow-hidden">
          <div className="bg-ajc-gold/10 border-b border-ajc-gold/20 px-5 py-3 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Icon name="bell" size={18} className="text-ajc-blueDk"/>
              <h3 className="font-display text-lg font-semibold text-ajc-blueDk">{t.dash.pendingTitle}</h3>
              <Badge tone="gold">{pendingMembers.length}</Badge>
            </div>
          </div>
          <div className="divide-y divide-ajc-blue/5">
            {pendingMembers.map(p => (
              <div key={p.id} className="px-5 py-3 flex items-center gap-4">
                <div className="w-10 h-10 rounded-full bg-ajc-blue/10 flex items-center justify-center text-ajc-blue font-semibold">
                  {p.first[0]}{p.last[0]}
                </div>
                <div className="flex-1">
                  <div className="font-semibold text-ajc-blueDk text-sm">{p.first} {p.last}</div>
                  <div className="text-xs text-ajc-mute">Promo {p.promo} · {p.domain} · {p.city} ({p.country}) · soumis le {p.date}</div>
                </div>
                <div className="flex gap-2">
                  <button className="px-2.5 py-1.5 rounded-lg bg-ajc-green text-white text-xs font-semibold hover:bg-emerald-700">✓ Valider</button>
                  <button className="px-2.5 py-1.5 rounded-lg bg-white border border-ajc-blue/15 text-xs font-semibold text-ajc-mute hover:border-ajc-red hover:text-ajc-red">Rejeter</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Section>
    </div>
  );
};

const KpiCard = ({ color, icon, label, value }) => {
  const colors = {
    blue: "from-ajc-blue to-ajc-blueDk text-white",
    gold: "from-ajc-gold to-ajc-gold2 text-ajc-blueDk",
    green: "from-ajc-green to-emerald-700 text-white",
    red: "from-ajc-red to-red-700 text-white"
  };
  return (
    <div className={"relative rounded-2xl bg-gradient-to-br p-4 md:p-5 overflow-hidden " + colors[color]}>
      <div className="absolute top-0 right-0 w-24 h-24 rounded-full bg-white/10 -translate-y-1/2 translate-x-1/3"></div>
      <Icon name={icon} size={22} className="relative opacity-80"/>
      <div className="relative font-display text-3xl md:text-4xl font-semibold mt-3">{value}</div>
      <div className="relative text-[11px] uppercase tracking-wider opacity-80 mt-1">{label}</div>
    </div>
  );
};

const MiniKpi = ({ label, value, icon, tone = "default" }) => {
  const tones = { default: "bg-white border-ajc-blue/10", warn: "bg-ajc-gold/10 border-ajc-gold/30" };
  return (
    <div className={"rounded-xl border p-3 " + tones[tone]}>
      <div className="flex items-center gap-2 text-ajc-mute">
        <Icon name={icon} size={14}/>
        <div className="text-[10px] uppercase tracking-wider font-semibold">{label}</div>
      </div>
      <div className="font-display text-2xl font-semibold text-ajc-blueDk mt-1">{value}</div>
    </div>
  );
};

const ChartCard = ({ title, className = "", children }) => (
  <div className={"bg-white rounded-2xl border border-ajc-blue/10 p-5 shadow-card " + className}>
    <h3 className="font-display text-lg font-semibold text-ajc-blueDk mb-4">{title}</h3>
    {children}
  </div>
);

const BarChart = ({ data }) => {
  const max = Math.max(...data.map(d => d.value), 1);
  return (
    <div className="space-y-2.5">
      {data.map(d => (
        <div key={d.label}>
          <div className="flex items-center justify-between text-xs mb-1">
            <span className="font-medium text-ajc-blueDk">{d.label}</span>
            <span className="text-ajc-mute font-semibold">{d.value}</span>
          </div>
          <div className="h-2 rounded-full bg-ajc-blue/5 overflow-hidden">
            <div className="h-full bg-gradient-to-r from-ajc-blue to-ajc-blue2 rounded-full transition-all"
              style={{ width: (d.value / max * 100) + "%" }}></div>
          </div>
        </div>
      ))}
    </div>
  );
};

const DonutChart = ({ data }) => {
  const total = data.reduce((s, d) => s + d.value, 0);
  let cumul = 0;
  const segments = data.map(d => {
    const start = cumul / total * 360;
    cumul += d.value;
    const end = cumul / total * 360;
    return { ...d, start, end, pct: (d.value / total * 100).toFixed(0) };
  });

  const polar = (deg, r) => {
    const rad = (deg - 90) * Math.PI / 180;
    return [100 + r * Math.cos(rad), 100 + r * Math.sin(rad)];
  };
  const arc = (start, end, r) => {
    const [x1, y1] = polar(start, r);
    const [x2, y2] = polar(end, r);
    const large = end - start > 180 ? 1 : 0;
    return `M 100 100 L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
  };

  return (
    <div className="flex items-center gap-4">
      <svg viewBox="0 0 200 200" className="w-32 h-32 flex-shrink-0">
        {segments.map((s, i) => <path key={i} d={arc(s.start, s.end, 80)} fill={s.color}/>)}
        <circle cx="100" cy="100" r="48" fill="white"/>
        <text x="100" y="95" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="28" fontWeight="600" fill="#0B2C7A">{total}</text>
        <text x="100" y="115" textAnchor="middle" fontSize="10" fill="#6B7280">total</text>
      </svg>
      <div className="flex-1 space-y-2">
        {segments.map((s, i) => (
          <div key={i} className="flex items-center gap-2 text-sm">
            <div className="w-3 h-3 rounded-sm" style={{ background: s.color }}></div>
            <span className="text-ajc-ink flex-1">{s.label}</span>
            <span className="font-semibold text-ajc-blueDk">{s.value}</span>
            <span className="text-xs text-ajc-mute">({s.pct}%)</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const RankedList = ({ data }) => {
  const max = Math.max(...data.map(d => d.value), 1);
  return (
    <div className="space-y-2">
      {data.map((d, i) => (
        <div key={d.label} className="flex items-center gap-3">
          <div className="text-[10px] font-bold text-ajc-mute w-5">#{i + 1}</div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between mb-1">
              <div className="text-sm font-medium text-ajc-blueDk truncate">{d.label}</div>
              <div className="text-sm font-semibold text-ajc-blue">{d.value}</div>
            </div>
            <div className="h-1.5 rounded-full bg-ajc-blue/5">
              <div className="h-full rounded-full bg-gradient-to-r from-ajc-gold to-ajc-gold2" style={{ width: (d.value / max * 100) + "%" }}></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

function exportCSV(members) {
  const headers = ["Prénom", "Nom", "Promotion", "Pays", "Ville", "Domaine", "Métier", "Statut"];
  const rows = members.map(m => [m.first, m.last, m.promo, m.countryName, m.city, m.domain, m.job, m.status]);
  const csv = [headers, ...rows].map(r => r.map(v => `"${(v || "").toString().replace(/"/g, '""')}"`).join(",")).join("\n");
  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a"); a.href = url; a.download = "trombinoscope-ajc.csv"; a.click();
  URL.revokeObjectURL(url);
}

Object.assign(window, { Dashboard, KpiCard, MiniKpi, ChartCard, BarChart, DonutChart, RankedList });