// Dashboard view

const EXPORT_SECTIONS = [
  { id: "clinics",    label: "Klinik Hakediş",       desc: "Klinik bazlı kazanç, tahsilat ve bekleyen ödemeler" },
  { id: "patients",   label: "Hasta Özeti",           desc: "Tüm hastaların tedavi ve ödeme bilgileri" },
  { id: "sessions",   label: "Seans Geçmişi",         desc: "Her hastanın tüm seans detayları" },
  { id: "trend",      label: "Gelir Trendi",          desc: "Son 6 aylık aylık hakediş verileri" },
  { id: "procedures", label: "İşlem Dağılımı",        desc: "Tedavi türlerine göre istatistikler" },
  { id: "schedule",   label: "Bugünkü Randevular",    desc: "Günlük randevu listesi" },
];

function ExportModal({ data, onClose }) {
  const [selected, setSelected] = React.useState({ clinics: true, patients: true, sessions: false, trend: true, procedures: true, schedule: false });
  const toggle = (id) => setSelected(s => ({ ...s, [id]: !s[id] }));
  const anySelected = Object.values(selected).some(Boolean);

  const handleExport = () => {
    const XLSX = window.XLSX;
    const findC = (id) => data.CLINICS.find(c => c.id === id);
    const findP = (id) => data.PATIENTS.find(p => p.id === id);
    const wb = XLSX.utils.book_new();

    if (selected.clinics) {
      const rows = [
        ["Klinik", "İlçe", "Anlaşma Tipi", "Pay (%)", "Hakediş (₺)", "Tahsil (₺)", "Bekleyen (₺)"],
        ...data.EARNINGS_BY_CLINIC.map(e => {
          const c = findC(e.clinicId);
          return [c.name, c.district, c.contract, c.share, e.earned, e.paid, e.pending];
        }),
      ];
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [32,22,20,10,16,16,16].map(w => ({ wch: w }));
      XLSX.utils.book_append_sheet(wb, ws, "Klinik Hakediş");
    }

    if (selected.patients) {
      const rows = [
        ["Ad Soyad", "Yaş", "Cinsiyet", "Klinik", "Tedavi", "Durum", "Toplam (₺)", "Tahsil (₺)", "Kalan (₺)", "Notlar"],
        ...data.PATIENTS.map(p => {
          const c = findC(p.clinicId);
          return [p.name, p.age, p.gender === "K" ? "Kadın" : "Erkek", c.name, p.treatment, p.status, p.totalFee, p.paid, p.balance, p.notes || ""];
        }),
      ];
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [22,6,10,24,28,16,14,14,14,40].map(w => ({ wch: w }));
      XLSX.utils.book_append_sheet(wb, ws, "Hasta Özeti");
    }

    if (selected.sessions) {
      const rows = [
        ["Hasta", "Seans #", "Tarih", "İşlem", "Ücret (₺)", "Hakediş (₺)", "Durum"],
      ];
      data.PATIENTS.forEach(p => {
        p.plan.forEach(s => {
          rows.push([p.name, s.session, s.date, s.procedure, s.fee, s.share, s.status]);
        });
      });
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [22,8,12,32,14,14,14].map(w => ({ wch: w }));
      XLSX.utils.book_append_sheet(wb, ws, "Seans Geçmişi");
    }

    if (selected.trend) {
      const rows = [
        ["Ay", "Yıl", "Hakediş (₺)"],
        ...data.INCOME_TREND.map(d => [d.month, d.year, d.income]),
      ];
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [10, 8, 16].map(w => ({ wch: w }));
      XLSX.utils.book_append_sheet(wb, ws, "Gelir Trendi");
    }

    if (selected.procedures) {
      const rows = [
        ["İşlem", "Adet", "Pay (%)"],
        ...data.PROCEDURE_DISTRIBUTION.map(d => [d.name, d.count, d.share]),
      ];
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [20, 8, 10].map(w => ({ wch: w }));
      XLSX.utils.book_append_sheet(wb, ws, "İşlem Dağılımı");
    }

    if (selected.schedule) {
      const rows = [
        ["Saat", "Süre (dk)", "Hasta", "Klinik", "İşlem"],
        ...data.TODAY_APPOINTMENTS.map(a => {
          const p = findP(a.patientId);
          const c = findC(a.clinicId);
          return [a.time, a.duration, p.name, c.name, a.procedure];
        }),
      ];
      const ws = XLSX.utils.aoa_to_sheet(rows);
      ws["!cols"] = [8,10,22,24,32].map(w => ({ wch: w }));
      XLSX.utils.book_append_sheet(wb, ws, "Bugünkü Randevular");
    }

    XLSX.writeFile(wb, `DentSide_Rapor_${new Date().toISOString().slice(0,10)}.xlsx`);
    onClose();
  };

  return (
    <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{maxWidth: 460}}>
        <div className="modal__head">
          <span className="modal__title">Rapor Al</span>
          <button className="icon-btn" onClick={onClose}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div className="modal__body">
          <p style={{fontSize:13,color:"var(--text-mute)",margin:"0 0 4px"}}>Rapora dahil etmek istediğiniz bölümleri seçin:</p>
          {EXPORT_SECTIONS.map(s => (
            <div key={s.id} className="export-section-row" onClick={() => toggle(s.id)}>
              <div className={`export-checkbox ${selected[s.id] ? "is-on" : ""}`}>
                {selected[s.id] && <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"><polyline points="2,6 5,9 10,3"/></svg>}
              </div>
              <div>
                <div className="export-section-label">{s.label}</div>
                <div className="export-section-desc">{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>İptal</button>
          <button className="btn btn--accent" onClick={handleExport} disabled={!anySelected}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5-5 5 5"/><path d="M12 5v12"/></svg>
            Excel İndir
          </button>
        </div>
      </div>
    </div>
  );
}

function Dashboard({ data, onNav, setSelectedPatient, onNewPatient }) {
  const { useT, Card, Tag, StatusPill, Avatar, fmtTRY, fmtDate, daysFromToday } = window.DentUI;
  const I = window.DentIcons;
  const t = useT();
  const [range, setRange] = React.useState("month");
  const [showExport, setShowExport] = React.useState(false);
  const [trendPeriod, setTrendPeriod] = React.useState("6m");

  const totalEarned = data.EARNINGS_BY_CLINIC.reduce((a,b) => a + b.earned, 0);
  const totalPending = data.EARNINGS_BY_CLINIC.reduce((a,b) => a + b.pending, 0);
  const activeTreatments = data.PATIENTS.filter(p => p.status === "Devam ediyor").length;

  const incomeDelta = (() => {
    const t = data.INCOME_TREND;
    if (t.length < 2) return null;
    const last = t[t.length - 1].income, prev = t[t.length - 2].income;
    if (!prev) return null;
    return Math.round((last - prev) / prev * 1000) / 10;
  })();
  const incomeSpark = data.INCOME_TREND.slice(-6).map(d => d.income);

  const greetName = (() => {
    const full = window._dentUser?.user_metadata?.full_name || "";
    return full.split(" ")[0] || "Doktor";
  })();
  const greetWord = (() => {
    const h = new Date().getHours();
    if (h < 12) return "Günaydın";
    if (h < 18) return "İyi günler";
    return "İyi akşamlar";
  })();
  const todayCount = data.TODAY_APPOINTMENTS.length;
  const greetSub = todayCount > 0
    ? `Bugün ${todayCount} randevunuz var. Bu ay hakedişiniz ${new Intl.NumberFormat("tr-TR",{style:"currency",currency:"TRY",maximumFractionDigits:0}).format(totalEarned)}.`
    : totalEarned > 0
      ? `Bu ay hakedişiniz ${new Intl.NumberFormat("tr-TR",{style:"currency",currency:"TRY",maximumFractionDigits:0}).format(totalEarned)}.`
      : "Bugün henüz randevu yok. Sisteminize hoş geldiniz.";

  const CATEGORIES = [
    { name: "İmplant",     color: "#3358F0", keywords: ["implant", "cerrahi"] },
    { name: "Ortodonti",   color: "#7B5BE0", keywords: ["ortodonti", "braket", "plak", "aktivasyon", "lastik", "şeffaf", "sabit"] },
    { name: "Kanal",       color: "#1F9F73", keywords: ["kanal"] },
    { name: "Dolgu",       color: "#F59E64", keywords: ["dolgu", "kompozit"] },
    { name: "Zirkonyum",   color: "#EC6F8E", keywords: ["zirkonyum", "kron", "köprü", "seramik", "simant"] },
    { name: "Beyazlatma",  color: "#06B6D4", keywords: ["beyazlat"] },
    { name: "Çekim",       color: "#F43F5E", keywords: ["çekim"] },
    { name: "Diğer",       color: "#D2D7DF", keywords: [] },
  ];

  const procedureDistribution = React.useMemo(() => {
    const counts = Object.fromEntries(CATEGORIES.map(c => [c.name, 0]));
    data.PATIENTS.forEach(p => {
      p.plan.forEach(s => {
        const proc = s.procedure.toLowerCase();
        const cat = CATEGORIES.find(c => c.keywords.some(k => proc.includes(k)));
        counts[(cat || CATEGORIES[CATEGORIES.length - 1]).name]++;
      });
    });
    const total = Object.values(counts).reduce((a, b) => a + b, 0) || 1;
    return CATEGORIES
      .map(c => ({ name: c.name, color: c.color, count: counts[c.name], share: Math.round((counts[c.name] / total) * 100) }))
      .filter(c => c.count > 0);
  }, [data.PATIENTS]);


  const findP = (id) => data.PATIENTS.find(p => p.id === id);
  const findC = (id) => data.CLINICS.find(c => c.id === id);

  // Chart computations
  const [hoveredPoint, setHoveredPoint] = React.useState(null);
  const trendSlice = React.useMemo(() => {
    const n = trendPeriod === "12m" ? 12 : trendPeriod === "6m" ? 6 : 3;
    return data.INCOME_TREND.slice(-n);
  }, [trendPeriod, data.INCOME_TREND]);
  const hasChartData = trendSlice.length >= 2;
  const maxIncome = hasChartData ? Math.max(...trendSlice.map(x => x.income)) : 1;
  const chartW = 520, chartH = 200, padL = 28, padR = 20, padT = 16, padB = 28;
  const points = hasChartData ? trendSlice.map((d, i) => {
    const x = padL + (i * (chartW - padL - padR)) / (trendSlice.length - 1);
    const y = padT + (chartH - padT - padB) * (1 - d.income / maxIncome);
    return [x, y, d];
  }) : [];
  const pathD = points.length ? points.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(" ") : "";
  const fillD = points.length ? pathD + ` L ${points[points.length-1][0]} ${chartH - padB} L ${points[0][0]} ${chartH - padB} Z` : "";

  return (
    <div className="view view--dashboard">
      <div className="page-head">
        <div>
          <h1 className="page-title">{greetWord}, {greetName}</h1>
          <p className="page-sub">{greetSub}</p>
        </div>
        <div className="page-actions">
          <div className="seg">
            {["week","month","year"].map(r => (
              <button key={r} className={`seg__opt ${range===r?"is-on":""}`} onClick={() => setRange(r)}>
                {t.dash[r]}
              </button>
            ))}
          </div>
          <button className="btn btn--ghost" onClick={() => setShowExport(true)}><I.Export size={15}/>{t.dash.exportRep}</button>
          {showExport && <ExportModal data={data} onClose={() => setShowExport(false)}/>}
          <button className="btn btn--accent" onClick={onNewPatient}><I.Plus size={15}/>{t.dash.addPatient}</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI
          icon={<I.Wallet size={18}/>}
          tint="mint"
          label={t.dash.monthlyEarnings}
          value={fmtTRY(totalEarned + 0)}
          delta={incomeDelta}
          deltaLabel={t.dash.vsLastMonth}
          spark={incomeSpark}
          sparkColor="#1F9F73"
          menuItems={[
            { label:"Finans'a Git", onClick:()=>onNav("finance") },
            { label:"Raporlar'a Git", onClick:()=>onNav("reports") },
          ]}
        />
        <KPI
          icon={<I.Money size={18}/>}
          tint="coral"
          label={t.dash.pendingPayments}
          value={fmtTRY(totalPending)}
          delta={null}
          deltaLabel={null}
          spark={[]}
          sparkColor="#D9663C"
          menuItems={[
            { label:"Finans'a Git", onClick:()=>onNav("finance") },
            { label:"Bekleyenleri Gör", onClick:()=>onNav("finance") },
          ]}
        />
        <KPI
          icon={<I.Calendar size={18}/>}
          tint="blue"
          label={t.dash.todayPatients}
          value={data.TODAY_APPOINTMENTS.length}
          unit="randevu"
          delta={null}
          deltaLabel={null}
          spark={[]}
          sparkColor="#3358F0"
          menuItems={[
            { label:"Takvim'e Git", onClick:()=>onNav("schedule") },
            { label:"Yeni Randevu", onClick:()=>onNav("schedule") },
          ]}
        />
        <KPI
          icon={<I.Tooth size={18}/>}
          tint="violet"
          label={t.dash.activeTreatments}
          value={activeTreatments}
          unit="hasta"
          delta={null}
          deltaLabel={null}
          spark={[]}
          sparkColor="#7B5BE0"
          menuItems={[
            { label:"Tedavilere Git", onClick:()=>onNav("treatments") },
            { label:"Hastalar'a Git", onClick:()=>onNav("patients") },
          ]}
        />
      </div>

      <div className="dash-grid">
        {/* Income trend chart */}
        <Card className="span-7" padding={24}>
          <div className="card-head">
            <div>
              <h3 className="card-title">{t.dash.incomeTrend}</h3>
              <p className="card-sub">Aylık hakediş trendi</p>
            </div>
            <div className="seg seg--sm">
              {[{v:"3m",l:"3 Ay"},{v:"6m",l:"6 Ay"},{v:"12m",l:"Yıl"}].map(opt => (
                <button key={opt.v} className={`seg__opt ${trendPeriod===opt.v?"is-on":""}`} onClick={()=>{ setTrendPeriod(opt.v); setHoveredPoint(null); }}>{opt.l}</button>
              ))}
            </div>
          </div>
          <div className="big-num">
            <span className="big-num__value">{fmtTRY(totalEarned)}</span>
            {incomeDelta !== null && (
              <Tag color={incomeDelta >= 0 ? "green" : "red"} dot>{incomeDelta >= 0 ? "+" : ""}{incomeDelta}%</Tag>
            )}
          </div>

          <div className="chart-wrap">
            {!hasChartData && <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:200,color:"var(--text-mute)",fontSize:13}}>Henüz gelir verisi yok</div>}
            <svg viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" className="chart-svg" style={{display: hasChartData ? "" : "none"}}>
              <defs>
                <linearGradient id="incomeFill" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity=".22"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {/* gridlines */}
              {[0,0.25,0.5,0.75,1].map((g,i) => (
                <line key={i}
                  x1={padL} x2={chartW - padR}
                  y1={padT + (chartH - padT - padB) * g}
                  y2={padT + (chartH - padT - padB) * g}
                  stroke="var(--line)" strokeDasharray="3 4" strokeWidth=".7"/>
              ))}
              <path d={fillD} fill="url(#incomeFill)"/>
              <path d={pathD} fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinejoin="round" strokeLinecap="round"/>
              {points.map((p, i) => {
                const isLast = i === points.length - 1;
                const isHovered = hoveredPoint === i;
                return (
                  <g key={i}>
                    {/* geniş hover alanı */}
                    <circle cx={p[0]} cy={p[1]} r={16} fill="transparent"
                      onMouseEnter={() => setHoveredPoint(i)}
                      onMouseLeave={() => setHoveredPoint(null)}
                      style={{cursor:"pointer"}}/>
                    <circle cx={p[0]} cy={p[1]} r={isLast||isHovered?5:3}
                      fill="#fff" stroke="var(--accent)"
                      strokeWidth={isLast||isHovered?2.5:1.6}/>
                  </g>
                );
              })}
              {/* x labels */}
              {points.map((p, i) => (
                <text key={i} x={p[0]} y={chartH - 8} textAnchor="middle"
                  fill="var(--text-mute)" fontSize="11" fontFamily="Inter">{p[2].month}</text>
              ))}
              {/* hover tooltip */}
              {hoveredPoint !== null && (() => {
                const p = points[hoveredPoint];
                const d = p[2];
                const label = `${d.month} ${d.year}`;
                const val = new Intl.NumberFormat("tr-TR",{style:"currency",currency:"TRY",maximumFractionDigits:0}).format(d.income);
                const tipW = 100, tipH = 38;
                const tx = Math.min(Math.max(p[0] - tipW/2, 4), chartW - tipW - 4);
                const aboveY = p[1] - tipH - 12;
                const ty = aboveY < padT ? p[1] + 12 : aboveY;
                return (
                  <g pointerEvents="none">
                    <rect x={tx} y={ty} width={tipW} height={tipH} rx="7" fill="var(--ink)"/>
                    <text x={tx + tipW/2} y={ty + 13} textAnchor="middle" fill="rgba(255,255,255,0.65)" fontSize="10" fontFamily="Inter">{label}</text>
                    <text x={tx + tipW/2} y={ty + 27} textAnchor="middle" fill="#fff" fontSize="12" fontFamily="JetBrains Mono" fontWeight="600">{val}</text>
                  </g>
                );
              })()}
            </svg>
          </div>
        </Card>

        {/* Procedure distribution */}
        <Card className="span-5" padding={24}>
          <div className="card-head">
            <div>
              <h3 className="card-title">{t.dash.procedureMix}</h3>
              <p className="card-sub">{t.dash.last30}</p>
            </div>
            <button className="icon-btn icon-btn--ghost"><I.More size={16}/></button>
          </div>
          <ProcedureDonut data={procedureDistribution}/>
        </Card>

        {/* Today schedule */}
        <Card className="span-7" padding={24}>
          <div className="card-head">
            <div>
              <h3 className="card-title">{t.dash.todaysSchedule}</h3>
              <p className="card-sub">{data.TODAY_APPOINTMENTS.length} randevu · {new Date().toLocaleDateString("tr-TR",{day:"numeric",month:"long",year:"numeric"})}</p>
            </div>
            <button className="btn btn--ghost btn--sm" onClick={() => onNav("schedule")}>
              {t.dash.viewAll} <I.ArrowRight size={13}/>
            </button>
          </div>
          <div className="schedule-list">
            {data.TODAY_APPOINTMENTS.length === 0 && <p style={{fontSize:13,color:"var(--text-mute)",padding:"12px 0"}}>Bugün için randevu yok.</p>}
            {data.TODAY_APPOINTMENTS.map((a, i) => {
              const p = findP(a.patientId);
              const c = findC(a.clinicId);
              if (!p || !c) return null;
              return (
                <button key={i} className="appt" onClick={() => { setSelectedPatient(p.id); onNav("patients"); }}>
                  <div className="appt__time">
                    <span className="appt__hour">{a.time}</span>
                    <span className="appt__dur">{a.duration} dk</span>
                  </div>
                  <div className="appt__rail" style={{background: c.color}}/>
                  <div className="appt__main">
                    <div className="appt__row">
                      <Avatar name={p.name} size={32} clinicColor={c.color}/>
                      <div>
                        <div className="appt__patient">{p.name}</div>
                        <div className="appt__procedure">{a.procedure}</div>
                      </div>
                    </div>
                    <div className="appt__meta">
                      <span className="muted"><I.Clinic size={12}/> {c.name}</span>
                    </div>
                  </div>
                  <div className="appt__action">
                    <I.ArrowRight size={14}/>
                  </div>
                </button>
              );
            })}
          </div>
        </Card>

        {/* Upcoming controls */}
        <Card className="span-5" padding={24}>
          <div className="card-head">
            <div>
              <h3 className="card-title">{t.dash.upcomingControls}</h3>
              <p className="card-sub">Önümüzdeki 7 gün</p>
            </div>
          </div>
          <div className="ctrl-list">
            {data.UPCOMING_CONTROLS.filter(u => {
              const d = daysFromToday(u.date);
              return d >= 0 && d <= 7;
            }).map((u, i) => {
              const p = findP(u.patientId);
              const c = findC(u.clinicId);
              if (!p || !c) return null;
              const days = daysFromToday(u.date);
              return (
                <div key={i} className="ctrl">
                  <div className="ctrl__date">
                    <span className="ctrl__d">{new Date(u.date).getDate()}</span>
                    <span className="ctrl__m">{["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"][new Date(u.date).getMonth()]}</span>
                  </div>
                  <div className="ctrl__main">
                    <div className="ctrl__name">{p.name}</div>
                    <div className="ctrl__reason">{u.reason} · <span style={{color:c.color}}>●</span> {c.name}</div>
                  </div>
                  <Tag color={days <= 2 ? "amber" : "neutral"} dot>{t.dash.inDays(days)}</Tag>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Clinic receivables */}
        <Card className="span-12" padding={24}>
          <div className="card-head">
            <div>
              <h3 className="card-title">{t.dash.clinicReceivables}</h3>
              <p className="card-sub">Her klinikten gelen aylık hakedişin</p>
            </div>
            <button className="btn btn--ghost btn--sm" onClick={() => onNav("finance")}>{t.dash.viewAll}<I.ArrowRight size={13}/></button>
          </div>
          <div className="rcv-table">
            <div className="rcv-row rcv-row--head">
              <span>{t.dash.clinic}</span>
              <span>Anlaşma</span>
              <span>{t.dash.earned}</span>
              <span>{t.dash.received}</span>
              <span>{t.dash.pending}</span>
              <span></span>
            </div>
            {data.EARNINGS_BY_CLINIC.length === 0 && <p style={{fontSize:13,color:"var(--text-mute)",padding:"12px 0"}}>Henüz klinik eklenmedi.</p>}
            {data.EARNINGS_BY_CLINIC.map((e) => {
              const c = findC(e.clinicId);
              if (!c) return null;
              const pct = e.earned ? Math.round((e.paid / e.earned) * 100) : 0;
              return (
                <div key={c.id} className="rcv-row">
                  <span className="rcv-clinic">
                    <span className="clinic-bullet" style={{background:c.color}}/>
                    <div>
                      <div className="rcv-clinic__name">{c.name}</div>
                      <div className="rcv-clinic__loc">{c.district}</div>
                    </div>
                  </span>
                  <span><Tag color="neutral">%{c.share} · {c.contract}</Tag></span>
                  <span className="num">{fmtTRY(e.earned)}</span>
                  <span className="num num--mute">{fmtTRY(e.paid)}</span>
                  <span className="num" style={{color: e.pending > 0 ? "var(--coral)" : "var(--mint)"}}>
                    {fmtTRY(e.pending)}
                  </span>
                  <span className="rcv-bar">
                    <span className="rcv-bar__track">
                      <span className="rcv-bar__fill" style={{width: `${pct}%`, background: c.color}}/>
                    </span>
                    <span className="rcv-bar__lbl">%{pct}</span>
                  </span>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </div>
  );
}

function KpiMenu({ items }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const I = window.DentIcons;
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, [open]);
  return (
    <div ref={ref} style={{position:"relative"}}>
      <button className="icon-btn icon-btn--ghost kpi__more" onClick={() => setOpen(o => !o)}><I.More size={14}/></button>
      {open && (
        <div className="kpi-menu">
          {items.map((item, i) => (
            <button key={i} className="kpi-menu__item" onClick={() => { item.onClick(); setOpen(false); }}>
              {item.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function KPI({ icon, tint, label, value, unit, delta, deltaLabel, spark, sparkColor, menuItems }) {
  const hasSpark = spark && spark.length >= 2;
  const hasDelta = delta !== null && delta !== undefined;
  const w = 100, h = 32;
  const I = window.DentIcons;

  const pts = hasSpark ? (() => {
    const max = Math.max(...spark), min = Math.min(...spark);
    return spark.map((v, i) => {
      const x = (i * w) / (spark.length - 1);
      const y = h - ((v - min) / (max - min || 1)) * h;
      return `${x},${y}`;
    }).join(" ");
  })() : "";

  const trendUp = hasDelta && delta >= 0;

  return (
    <div className={`kpi kpi--${tint}`}>
      <div className="kpi__head">
        <div className={`kpi__icon kpi__icon--${tint}`}>{icon}</div>
        <span className="kpi__label">{label}</span>
        {menuItems && <KpiMenu items={menuItems}/>}
      </div>
      <div className="kpi__value-row">
        <div>
          <div className="kpi__value">{value}{unit && <span className="kpi__unit">{unit}</span>}</div>
          {hasDelta && (
            <div className={`kpi__delta ${trendUp?"is-up":"is-down"}`}>
              {trendUp ? <I.ArrowUp size={12}/> : <I.TrendDown size={12}/>}
              <span>{trendUp?"+":""}{delta}% {deltaLabel}</span>
            </div>
          )}
        </div>
        {hasSpark && (
          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} className="kpi__spark">
            <polyline points={pts} fill="none" stroke={sparkColor} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        )}
      </div>
    </div>
  );
}

function ProcedureDonut({ data = [] }) {
  const total = data.reduce((a,b)=>a+b.share,0) || 1;
  let acc = 0;
  const R = 70, r = 50, cx = 90, cy = 90;
  const arcs = data.map((d) => {
    const a0 = (acc / total) * Math.PI * 2 - Math.PI/2;
    acc += d.share;
    const a1 = (acc / total) * Math.PI * 2 - Math.PI/2;
    const large = a1 - a0 > Math.PI ? 1 : 0;
    const x0 = cx + Math.cos(a0)*R, y0 = cy + Math.sin(a0)*R;
    const x1 = cx + Math.cos(a1)*R, y1 = cy + Math.sin(a1)*R;
    const xi0 = cx + Math.cos(a0)*r, yi0 = cy + Math.sin(a0)*r;
    const xi1 = cx + Math.cos(a1)*r, yi1 = cy + Math.sin(a1)*r;
    return {
      path: `M ${x0} ${y0} A ${R} ${R} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${r} ${r} 0 ${large} 0 ${xi0} ${yi0} Z`,
      color: d.color,
      label: d.name,
      share: d.share,
      count: d.count,
    };
  });

  return (
    <div className="donut-wrap">
      <svg width="180" height="180" viewBox="0 0 180 180">
        {arcs.map((a, i) => <path key={i} d={a.path} fill={a.color}/>)}
        <text x={cx} y={cy - 6} textAnchor="middle" fontFamily="Inter" fontSize="11" fill="var(--text-mute)">Toplam</text>
        <text x={cx} y={cy + 14} textAnchor="middle" fontFamily="Inter" fontSize="20" fontWeight="700" fill="var(--ink)">{data.reduce((s, d) => s + d.count, 0)}</text>
      </svg>
      <div className="donut-legend">
        {arcs.map((a, i) => (
          <div key={i} className="donut-row">
            <span className="legend__dot" style={{background:a.color}}/>
            <span className="donut-name">{a.label}</span>
            <span className="donut-count">{a.count}</span>
            <span className="donut-pct">%{a.share}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.DentDashboard = Dashboard;