function Finance({ data, transfers = [], onUpdateTransfers }) {
  const { Card, Tag, fmtTRY } = window.DentUI;
  const I = window.DentIcons;
  const [period, setPeriod] = React.useState("all");
  const [showFilter, setShowFilter] = React.useState(false);
  const [clinicFilter, setClinicFilter] = React.useState("all");
  const [statusFilter, setStatusFilter] = React.useState("all");

  // Klinik → Hekim transfer takibi
  const [addingForClinic, setAddingForClinic] = React.useState(null);
  const [txForm, setTxForm] = React.useState({ amount: "", date: new Date().toISOString().slice(0, 10), note: "" });
  const setTx = (k, v) => setTxForm(f => ({ ...f, [k]: v }));

  const handleTransferSave = (e) => {
    e.preventDefault();
    const amount = parseFloat(txForm.amount) || 0;
    if (!amount) return;
    onUpdateTransfers(prev => [...prev, { id: Date.now(), clinicId: addingForClinic, amount, date: txForm.date, note: txForm.note }]);
    setAddingForClinic(null);
    setTxForm({ amount: "", date: new Date().toISOString().slice(0, 10), note: "" });
  };

  const transferredFor = (clinicId) => transfers.filter(t => t.clinicId === clinicId).reduce((a, t) => a + t.amount, 0);

  // Build real transactions: completed sessions + direct payments
  const allTransactions = React.useMemo(() => {
    const txs = [];
    data.PATIENTS.forEach(p => {
      const c = data.CLINICS.find(cc => cc.id === p.clinicId);
      if (!c) return;

      // 1) Tamamlanan seanslar
      const done = (p.plan || []).filter(s => s.status === "Tamamlandı" && s.fee > 0)
        .sort((a, b) => (a.date || "").localeCompare(b.date || ""));
      let remaining = p.paid || 0;
      done.forEach(s => {
        const isPaid = remaining >= s.fee;
        remaining = Math.max(0, remaining - s.fee);
        txs.push({ date: s.date || "", patient: p.name, procedure: s.procedure, clinic: c, fee: s.fee, share: s.share || 0, isPaid, type: "session" });
      });

      // 2) Ödemeler sekmesindeki doğrudan ödemeler
      (p.payments || []).forEach(pay => {
        txs.push({
          date: pay.date || "",
          patient: p.name,
          procedure: pay.method || "Ödeme",
          clinic: c,
          fee: pay.amount || 0,
          share: Math.round((pay.amount || 0) * (c.share || 50) / 100),
          isPaid: pay.status === "Tahsil edildi",
          type: "payment",
        });
      });
    });
    return txs.sort((a, b) => (b.date || "").localeCompare(a.date || ""));
  }, [data.PATIENTS, data.CLINICS]);

  // Period filter
  const NOW_MONTH = "2026-05";
  const NOW_YEAR = "2026";
  let filtered = allTransactions;
  if (period === "month") filtered = filtered.filter(tx => tx.date.startsWith(NOW_MONTH));
  else if (period === "year") filtered = filtered.filter(tx => tx.date.startsWith(NOW_YEAR));
  if (clinicFilter !== "all") filtered = filtered.filter(tx => tx.clinic.id === clinicFilter);
  if (statusFilter === "paid") filtered = filtered.filter(tx => tx.isPaid);
  if (statusFilter === "pending") filtered = filtered.filter(tx => !tx.isPaid);

  // Clinic stats from real data
  const clinicStats = data.CLINICS.map(c => {
    const pts = data.PATIENTS.filter(p => p.clinicId === c.id);
    const totalFee = pts.reduce((a, p) => a + (p.totalFee || 0), 0);
    const totalPaid = pts.reduce((a, p) => a + (p.paid || 0), 0);
    const pending = Math.max(0, totalFee - totalPaid);
    const earned = pts.reduce((a, p) => {
      const s = p.plan.filter(ss => ss.status === "Tamamlandı").reduce((x, ss) => x + (ss.share || 0), 0);
      return a + (s > 0 ? s : Math.round((p.paid || 0) * (c.share || 50) / 100));
    }, 0);
    return { clinic: c, totalFee, paid: totalPaid, pending, earned };
  });

  const totalHakedis = clinicStats.reduce((a, cs) => a + cs.earned, 0);
  const totalPaid = clinicStats.reduce((a, cs) => a + cs.paid, 0);
  const totalFee = clinicStats.reduce((a, cs) => a + cs.totalFee, 0);
  const totalPending = clinicStats.reduce((a, cs) => a + cs.pending, 0);
  const totalTransferred = data.CLINICS.reduce((a, c) => a + transferredFor(c.id), 0);
  const totalClinicPending = Math.max(0, totalHakedis - totalTransferred);

  const handleExcelExport = () => {
    const XLSX = window.XLSX;
    const wb = XLSX.utils.book_new();
    const date = new Date().toLocaleDateString("tr-TR");

    // Sayfa 1: Özet
    const ws1 = XLSX.utils.aoa_to_sheet([
      ["DentSide — Finans & Hakediş Raporu"],
      ["Tarih:", date],
      [],
      ["GENEL ÖZET"],
      ["Toplam Hasta Tutarı (₺)", totalFee],
      ["Tahsil Edilen (₺)", totalPaid],
      ["Bekleyen Alacak (₺)", totalPending],
      ["Toplam Hekim Hakedişi (₺)", totalHakedis],
      [],
      ["KLİNİK BAZLI ÖZET"],
      ["Klinik", "Anlaşma", "Pay", "Toplam Tutar (₺)", "Tahsil (₺)", "Kalan (₺)", "Hekim Hakedişi (₺)"],
      ...clinicStats.map(cs => {
        const c = cs.clinic;
        const pay = c.contract === "Sabit" ? `₺${c.fixedAmount||0} sabit` : c.contract === "Sabit + Yüzdelik" ? `₺${c.fixedAmount||0}+%${c.share}` : `%${c.share}`;
        return [c.name, c.contract || "Yüzdelik", pay, cs.totalFee, cs.paid, cs.pending, cs.earned];
      }),
    ]);
    ws1["!cols"] = [32,18,16,18,16,14,20].map(w=>({wch:w}));
    XLSX.utils.book_append_sheet(wb, ws1, "Özet");

    // Sayfa 2: Klinik Karşılaştırma (grafik verisi)
    const ws2 = XLSX.utils.aoa_to_sheet([
      ["Klinik Karşılaştırma — Grafik Verisi"],
      ["Klinik", "Toplam Tutar (₺)", "Tahsil (₺)", "Kalan (₺)", "Hakediş (₺)"],
      ...clinicStats.map(cs => [cs.clinic.name, cs.totalFee, cs.paid, cs.pending, cs.earned]),
    ]);
    ws2["!cols"] = [28,18,16,14,16].map(w=>({wch:w}));
    XLSX.utils.book_append_sheet(wb, ws2, "Klinik Karşılaştırma");

    // Sayfa 3: Tüm işlem hareketleri
    const ws3 = XLSX.utils.aoa_to_sheet([
      ["Tarih","Hasta","İşlem","Klinik","Ücret (₺)","Hakediş (₺)","Durum"],
      ...allTransactions.map(tx=>[tx.date, tx.patient, tx.procedure, tx.clinic.name, tx.fee, tx.share, tx.isPaid?"Tahsil":"Bekliyor"]),
    ]);
    ws3["!cols"] = [12,22,28,24,14,14,12].map(w=>({wch:w}));
    XLSX.utils.book_append_sheet(wb, ws3, "İşlem Hareketleri");

    // Sayfa 4: Klinik → Hekim transferleri
    const ws4 = XLSX.utils.aoa_to_sheet([
      ["Klinik", "Tarih", "Tutar (₺)", "Not", "Toplam Hakediş (₺)", "Bekleyen (₺)"],
      ...clinicStats.map(cs => {
        const tr = transferredFor(cs.clinic.id);
        const pending = Math.max(0, cs.earned - tr);
        const clinicTxs = transfers.filter(t => t.clinicId === cs.clinic.id);
        if (clinicTxs.length === 0) return [[cs.clinic.name, "—", 0, "Transfer yok", cs.earned, pending]];
        return clinicTxs.map((t, i) => [
          i === 0 ? cs.clinic.name : "",
          t.date, t.amount, t.note || "",
          i === 0 ? cs.earned : "",
          i === 0 ? pending : "",
        ]);
      }).flat(),
    ]);
    ws4["!cols"] = [28, 12, 14, 24, 18, 14].map(w => ({ wch: w }));
    XLSX.utils.book_append_sheet(wb, ws4, "Hakediş Transferleri");

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

  const handleTxExport = () => {
    const XLSX = window.XLSX;
    const ws = XLSX.utils.aoa_to_sheet([
      ["Tarih","Hasta","İşlem","Klinik","Ücret (₺)","Hakediş (₺)","Durum"],
      ...filtered.map(tx=>[tx.date, tx.patient, tx.procedure, tx.clinic.name, tx.fee, tx.share, tx.isPaid?"Tahsil":"Bekliyor"]),
    ]);
    ws["!cols"] = [12,22,28,24,14,14,12].map(w=>({wch:w}));
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "İşlemler");
    XLSX.writeFile(wb, `DentSide_Islemler_${new Date().toISOString().slice(0,10)}.xlsx`);
  };

  const tahsilatOrani = totalFee > 0 ? Math.round((totalPaid/totalFee)*100) : 0;

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">Finans & Hakediş</h1>
          <p className="page-sub">Klinik bazlı alacaklar ve hekim geliri · {data.PATIENTS.length} hasta</p>
        </div>
        <div className="page-actions">
          <button className="btn btn--ghost" onClick={handleExcelExport}><I.Export size={15}/>Excel (3 sayfa)</button>
        </div>
      </div>

      <div className="fin-totals">
        <FinCard tint="mint" label="Toplam hekim hakedişi" value={fmtTRY(totalHakedis)} sub="Tamamlanan seansların hekim payı" icon={<I.Wallet size={18}/>}/>
        <FinCard tint="blue" label="Klinik Alacak" value={fmtTRY(totalClinicPending)} sub={totalClinicPending === 0 ? "Tüm hakediş alındı ✓" : `${data.CLINICS.filter(c => Math.max(0, (clinicStats.find(cs=>cs.clinic.id===c.id)?.earned||0) - transferredFor(c.id)) > 0).length} klinikten bekleniyor`} icon={<I.Clock size={18}/>}/>
        <FinCard tint="coral" label="Hasta bakiye alacağı" value={fmtTRY(totalPending)} sub={`%${tahsilatOrani} tahsilat oranı · ${data.CLINICS.length} klinik`} icon={<I.Check size={18}/>}/>
      </div>

      <Card padding={0}>
        <div className="card-head" style={{padding:"22px 24px 14px"}}>
          <div>
            <h3 className="card-title">Klinik → Hekim ödemeleri</h3>
            <p className="card-sub">Kliniğin hekime aktardığı hakediş transferleri</p>
          </div>
        </div>
        <div style={{padding:"0 24px 20px",display:"flex",flexDirection:"column",gap:12}}>
          {clinicStats.map(cs => {
            const c = cs.clinic;
            const transferred = transferredFor(c.id);
            const pending = Math.max(0, cs.earned - transferred);
            const isAdding = addingForClinic === c.id;
            const clinicTransfers = transfers.filter(t => t.clinicId === c.id);
            return (
              <div key={c.id} style={{border:"1px solid var(--line)",borderRadius:10,overflow:"hidden"}}>
                <div style={{display:"flex",alignItems:"center",gap:12,padding:"12px 16px",background:"var(--surface)"}}>
                  <span style={{width:9,height:9,borderRadius:"50%",background:c.color,flexShrink:0}}/>
                  <span style={{fontWeight:600,flex:1}}>{c.name}</span>
                  <div style={{display:"flex",gap:20,fontSize:13,alignItems:"center"}}>
                    <div style={{textAlign:"right"}}>
                      <div style={{fontSize:11,color:"var(--text-mute)"}}>Toplam hakediş</div>
                      <div className="num" style={{fontWeight:600}}>{fmtTRY(cs.earned)}</div>
                    </div>
                    <div style={{textAlign:"right"}}>
                      <div style={{fontSize:11,color:"var(--text-mute)"}}>Alınan</div>
                      <div className="num" style={{fontWeight:600,color:"var(--mint)"}}>{fmtTRY(transferred)}</div>
                    </div>
                    <div style={{textAlign:"right",minWidth:90}}>
                      <div style={{fontSize:11,color:"var(--text-mute)"}}>Bekleyen</div>
                      <div className="num" style={{fontWeight:700,color:pending>0?"var(--coral)":"var(--mint)"}}>{fmtTRY(pending)}</div>
                    </div>
                    {pending > 0 && !isAdding && (
                      <button className="btn btn--accent btn--sm" onClick={() => { setAddingForClinic(c.id); setTxForm({ amount: String(pending), date: new Date().toISOString().slice(0,10), note: "" }); }}>
                        Tahsil ettim
                      </button>
                    )}
                    {pending === 0 && <span style={{fontSize:12,color:"var(--mint)",fontWeight:600}}>✓ Güncel</span>}
                  </div>
                </div>

                {isAdding && (
                  <form onSubmit={handleTransferSave} style={{padding:"12px 16px",background:"var(--surface-2)",borderTop:"1px solid var(--line)",display:"flex",gap:10,alignItems:"flex-end",flexWrap:"wrap"}}>
                    <div className="form-field" style={{margin:0,flex:"0 0 120px"}}>
                      <label style={{fontSize:11}}>Tarih</label>
                      <input type="date" value={txForm.date} onChange={e => setTx("date", e.target.value)} required style={{padding:"4px 8px",fontSize:13}}/>
                    </div>
                    <div className="form-field" style={{margin:0,flex:"0 0 130px"}}>
                      <label style={{fontSize:11}}>Tutar (₺)</label>
                      <input type="number" min="1" value={txForm.amount} onChange={e => setTx("amount", e.target.value)} required style={{padding:"4px 8px",fontSize:13}}/>
                    </div>
                    <div className="form-field" style={{margin:0,flex:1,minWidth:140}}>
                      <label style={{fontSize:11}}>Not (isteğe bağlı)</label>
                      <input value={txForm.note} onChange={e => setTx("note", e.target.value)} placeholder="Banka transferi, nakit…" style={{padding:"4px 8px",fontSize:13}}/>
                    </div>
                    <div style={{display:"flex",gap:6}}>
                      <button type="button" className="btn btn--ghost btn--sm" onClick={() => setAddingForClinic(null)}>İptal</button>
                      <button type="submit" className="btn btn--accent btn--sm">Kaydet</button>
                    </div>
                  </form>
                )}

                {clinicTransfers.length > 0 && (
                  <div style={{borderTop:"1px solid var(--line)"}}>
                    {clinicTransfers.map(t => (
                      <div key={t.id} style={{display:"flex",gap:12,padding:"8px 16px",fontSize:12,alignItems:"center",borderBottom:"1px solid var(--line)",color:"var(--text)"}}>
                        <span className="muted" style={{minWidth:80}}>{t.date}</span>
                        <span className="num" style={{fontWeight:600,color:"var(--mint)"}}>{fmtTRY(t.amount)}</span>
                        <span style={{flex:1,color:"var(--text-mute)"}}>{t.note || "—"}</span>
                        <Tag color="green" dot>Alındı</Tag>
                        <button className="icon-btn" style={{color:"var(--coral)",padding:2}} title="Sil" onClick={() => onUpdateTransfers(prev => prev.filter(x => x.id !== t.id))}>
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </Card>

      <Card padding={0}>
        <div className="card-head" style={{padding:"22px 24px 14px"}}>
          <div>
            <h3 className="card-title">Klinik bazlı dağılım</h3>
            <p className="card-sub">Hasta tahsilatı ve hekim hakedişi</p>
          </div>
        </div>
        <div className="fin-clinic-bars">
          {clinicStats.map(cs => {
            const c = cs.clinic;
            const hakedisTag = c.contract === "Sabit" ? `₺${(c.fixedAmount||0).toLocaleString("tr-TR")} sabit` : c.contract === "Sabit + Yüzdelik" ? `₺${(c.fixedAmount||0).toLocaleString("tr-TR")}+%${c.share}` : `%${c.share}`;
            return (
              <div key={c.id} className="fin-clinic-row">
                <div className="fin-clinic-row__head">
                  <div className="fin-clinic-row__name">
                    <span className="clinic-bullet" style={{background:c.color,width:9,height:9}}/>
                    <span>{c.name}</span>
                    <Tag color="neutral">{hakedisTag}</Tag>
                  </div>
                  <div className="fin-clinic-row__total num">{fmtTRY(cs.earned)}</div>
                </div>
                {cs.totalFee > 0 ? (
                  <>
                    <div className="fin-bar">
                      <div className="fin-bar__paid" style={{width:`${(cs.paid/cs.totalFee)*100}%`,background:c.color}}/>
                      <div className="fin-bar__pending" style={{width:`${(cs.pending/cs.totalFee)*100}%`,background:c.color+"33",borderLeft:`1px dashed ${c.color}`}}/>
                    </div>
                    <div className="fin-clinic-row__legend">
                      <span>Tahsil <b className="num">{fmtTRY(cs.paid)}</b></span>
                      <span className="dot-sep">·</span>
                      <span>Kalan <b className="num" style={{color:cs.pending>0?"var(--coral)":"var(--mint)"}}>{fmtTRY(cs.pending)}</b></span>
                    </div>
                  </>
                ) : <div style={{fontSize:12,color:"var(--text-mute)",padding:"8px 0"}}>Henüz işlem yok</div>}
              </div>
            );
          })}
        </div>
      </Card>

      <Card padding={0}>
        <div className="card-head" style={{padding:"22px 24px 14px"}}>
          <div>
            <h3 className="card-title">İşlem hareketleri</h3>
            <p className="card-sub">{filtered.length} işlem gösteriliyor</p>
          </div>
          <div className="page-actions">
            <div className="seg">
              <button className={`seg__opt ${period==="month"?"is-on":""}`} onClick={()=>setPeriod("month")}>Bu ay</button>
              <button className={`seg__opt ${period==="year"?"is-on":""}`} onClick={()=>setPeriod("year")}>Bu yıl</button>
              <button className={`seg__opt ${period==="all"?"is-on":""}`} onClick={()=>setPeriod("all")}>Tümü</button>
            </div>
            <button className={`btn btn--ghost btn--sm ${showFilter?"is-active":""}`} onClick={()=>setShowFilter(v=>!v)}>
              <I.Filter size={14}/>Filtre
            </button>
            <button className="btn btn--ghost btn--sm" onClick={handleTxExport}><I.Export size={14}/>Export</button>
          </div>
        </div>

        {showFilter && (
          <div style={{padding:"12px 24px 16px",display:"flex",gap:24,flexWrap:"wrap",borderBottom:"1px solid var(--line)"}}>
            <div>
              <div style={{fontSize:11,fontWeight:700,color:"var(--text-mute)",textTransform:"uppercase",letterSpacing:"0.05em",marginBottom:8}}>Klinik</div>
              <div className="chips">
                <button className={`chip ${clinicFilter==="all"?"is-on":""}`} onClick={()=>setClinicFilter("all")}>Tümü</button>
                {data.CLINICS.map(c=>(
                  <button key={c.id} className={`chip ${clinicFilter===c.id?"is-on":""}`} onClick={()=>setClinicFilter(c.id)}>
                    <span className="clinic-bullet" style={{background:c.color}}/>{c.name.split(" ").slice(0,2).join(" ")}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <div style={{fontSize:11,fontWeight:700,color:"var(--text-mute)",textTransform:"uppercase",letterSpacing:"0.05em",marginBottom:8}}>Durum</div>
              <div className="seg">
                <button className={`seg__opt ${statusFilter==="all"?"is-on":""}`} onClick={()=>setStatusFilter("all")}>Tümü</button>
                <button className={`seg__opt ${statusFilter==="paid"?"is-on":""}`} onClick={()=>setStatusFilter("paid")}>Tahsil</button>
                <button className={`seg__opt ${statusFilter==="pending"?"is-on":""}`} onClick={()=>setStatusFilter("pending")}>Bekliyor</button>
              </div>
            </div>
          </div>
        )}

        <div className="fin-trans">
          <div className="fin-trans__row fin-trans__row--head">
            <span>Tarih</span><span>Hasta</span><span>İşlem</span><span>Klinik</span><span>Ücret</span><span>Hakediş</span><span>Durum</span>
          </div>
          {filtered.length === 0 && (
            <div style={{padding:"28px",textAlign:"center",color:"var(--text-mute)",fontSize:13}}>Bu dönemde tamamlanmış işlem bulunamadı.</div>
          )}
          {filtered.map((tx, i) => (
            <div key={i} className="fin-trans__row">
              <span className="muted">{tx.date||"—"}</span>
              <span>{tx.patient}</span>
              <span>{tx.procedure}</span>
              <span><span className="clinic-bullet" style={{background:tx.clinic.color}}/>{tx.clinic.name.split(" ").slice(0,2).join(" ")}</span>
              <span className="num">{fmtTRY(tx.fee)}</span>
              <span className="num" style={{color:"var(--accent)"}}>{fmtTRY(tx.share)}</span>
              <span><Tag color={tx.isPaid?"green":"amber"} dot>{tx.isPaid?"Tahsil":"Bekliyor"}</Tag></span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function FinCard({ tint, label, value, sub, icon }) {
  return (
    <div className={`fin-card fin-card--${tint}`}>
      <div className={`fin-card__icon fin-card__icon--${tint}`}>{icon}</div>
      <div className="fin-card__label">{label}</div>
      <div className="fin-card__value num">{value}</div>
      <div className="fin-card__sub muted">{sub}</div>
    </div>
  );
}

window._dsFinance = Finance;