// ──── REPORTS ────
function Reports({ data }) {
  const { Card, Tag, fmtTRY } = window.DentUI;
  const I = window.DentIcons;

  // Real clinic stats from patient data
  const clinicStats = React.useMemo(() => {
    return data.CLINICS.map(c => {
      let earned = 0, paid = 0;
      data.PATIENTS.filter(p => p.clinicId === c.id).forEach(p => {
        let rem = p.paid || 0;
        (p.plan || []).filter(s => s.status === "Tamamlandı" && s.fee > 0).forEach(s => {
          const sh = s.share || Math.round(s.fee * (c.share || 50) / 100);
          earned += sh;
          if (rem >= s.fee) paid += sh;
          rem = Math.max(0, rem - s.fee);
        });
      });
      return { clinic: c, earned, paid, pending: Math.max(0, earned - paid) };
    });
  }, [data.PATIENTS, data.CLINICS]);

  const maxEarn = Math.max(...clinicStats.map(s => s.earned), 1);
  const allDone = data.PATIENTS.flatMap(p => (p.plan || []).filter(s => s.status === "Tamamlandı" && s.fee > 0));
  const totalEarned = clinicStats.reduce((a, b) => a + b.earned, 0);
  const avgFee = allDone.length ? Math.round(allDone.reduce((a, s) => a + s.fee, 0) / allDone.length) : 0;
  const avgShare = data.CLINICS.length
    ? Math.round(data.CLINICS.reduce((a, c) => a + (c.share || 0), 0) / data.CLINICS.length)
    : 0;

  // Shared helper: transaction rows
  function getTxRows() {
    const rows = [["Klinik","Hasta","İşlem","Tarih","Ücret (₺)","Hakediş (₺)","Durum"]];
    data.PATIENTS.forEach(p => {
      const c = data.CLINICS.find(cc => cc.id === p.clinicId); if (!c) return;
      let rem = p.paid || 0;
      (p.plan || []).filter(s => s.status === "Tamamlandı" && s.fee > 0).forEach(s => {
        const sh = s.share || Math.round(s.fee * (c.share || 50) / 100);
        const isPaid = rem >= s.fee; rem = Math.max(0, rem - s.fee);
        rows.push([c.name, p.name, s.procedure, s.date || "", s.fee, sh, isPaid ? "Tahsil" : "Bekliyor"]);
      });
    });
    return rows;
  }

  function saveWb(wb, filename) { XLSX.writeFile(wb, `${filename}_${new Date().toISOString().slice(0,10)}.xlsx`); }
  function mkSheet(rows, widths) { const ws = XLSX.utils.aoa_to_sheet(rows); ws["!cols"] = widths.map(w=>({wch:w})); return ws; }

  const exports = {
    r1() {
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, mkSheet(getTxRows(), [22,22,28,12,14,14,12]), "Aylık Hakediş");
      saveWb(wb, "DentSide_AylikHakedis");
    },
    r2() {
      const rows = [["Klinik","Hakediş Oranı (%)","Toplam Hakediş (₺)","Tahsil (₺)","Bekleyen (₺)"]];
      clinicStats.forEach(s => rows.push([s.clinic.name, s.clinic.share||50, s.earned, s.paid, s.pending]));
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, mkSheet(rows, [22,18,20,16,16]), "Klinik Gelir");
      saveWb(wb, "DentSide_KlinikGelir");
    },
    r3() {
      const rows = [["Hasta","Klinik","Tedavi","Toplam (₺)","Ödenen (₺)","Bakiye (₺)","Durum"]];
      data.PATIENTS.forEach(p => {
        const c = data.CLINICS.find(cc => cc.id === p.clinicId);
        rows.push([p.name, c?.name||"", p.treatment||"", p.totalFee||0, p.paid||0, p.balance||0, p.status||""]);
      });
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, mkSheet(rows, [22,22,28,14,14,14,14]), "Hasta Tedaviler");
      saveWb(wb, "DentSide_HastaTedavi");
    },
    r4() {
      const rows = [["Klinik","Hasta","İşlem","Tarih","Ücret (₺)","Hakediş (₺)"]];
      data.PATIENTS.forEach(p => {
        const c = data.CLINICS.find(cc => cc.id === p.clinicId); if (!c) return;
        let rem = p.paid || 0;
        (p.plan || []).filter(s => s.status === "Tamamlandı" && s.fee > 0).forEach(s => {
          const sh = s.share || Math.round(s.fee * (c.share || 50) / 100);
          const isPaid = rem >= s.fee; rem = Math.max(0, rem - s.fee);
          if (!isPaid) rows.push([c.name, p.name, s.procedure, s.date||"", s.fee, sh]);
        });
      });
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, mkSheet(rows, [22,22,28,12,14,14]), "Bekleyen Alacaklar");
      saveWb(wb, "DentSide_Bekleyen");
    },
    r5() {
      const pm = {};
      data.PATIENTS.forEach(p => {
        const c = data.CLINICS.find(cc => cc.id === p.clinicId); if (!c) return;
        (p.plan || []).filter(s => s.status === "Tamamlandı" && s.fee > 0).forEach(s => {
          const k = s.procedure || "Diğer";
          if (!pm[k]) pm[k] = { count:0, fee:0, share:0 };
          pm[k].count++; pm[k].fee += s.fee;
          pm[k].share += s.share || Math.round(s.fee * (c.share||50) / 100);
        });
      });
      const rows = [["İşlem","Seans","Toplam Ücret (₺)","Toplam Hakediş (₺)","Ort. Ücret (₺)"]];
      Object.entries(pm).sort((a,b)=>b[1].fee-a[1].fee).forEach(([k,d])=>
        rows.push([k, d.count, d.fee, d.share, Math.round(d.fee/d.count)]));
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, mkSheet(rows, [28,12,18,18,16]), "İşlem Analizi");
      saveWb(wb, "DentSide_IslemAnaliz");
    },
    r6() {
      const rows = [["Hasta","Klinik","Tedavi","Toplam Seans","Tamamlanan","Ücret (₺)","Ödenen (₺)"]];
      data.PATIENTS.forEach(p => {
        const c = data.CLINICS.find(cc => cc.id === p.clinicId);
        const total = (p.plan||[]).length;
        const done = (p.plan||[]).filter(s=>s.status==="Tamamlandı").length;
        rows.push([p.name, c?.name||"", p.treatment||"", total, done, p.totalFee||0, p.paid||0]);
      });
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, mkSheet(rows, [22,22,28,14,14,16,16]), "Tedavi Performansı");
      saveWb(wb, "DentSide_TedaviPerf");
    },
    all() {
      const wb = XLSX.utils.book_new();
      const s1 = [["Klinik","Hakediş %","Kazanılan (₺)","Tahsil (₺)","Bekleyen (₺)"]];
      clinicStats.forEach(s => s1.push([s.clinic.name, s.clinic.share||50, s.earned, s.paid, s.pending]));
      XLSX.utils.book_append_sheet(wb, mkSheet(s1, [22,12,18,16,16]), "Klinik Özeti");
      XLSX.utils.book_append_sheet(wb, mkSheet(getTxRows(), [22,22,28,12,14,14,12]), "İşlem Hareketleri");
      const s3 = [["Hasta","Klinik","Tedavi","Toplam (₺)","Ödenen (₺)","Bakiye (₺)","Durum"]];
      data.PATIENTS.forEach(p => {
        const c = data.CLINICS.find(cc => cc.id === p.clinicId);
        s3.push([p.name, c?.name||"", p.treatment||"", p.totalFee||0, p.paid||0, p.balance||0, p.status||""]);
      });
      XLSX.utils.book_append_sheet(wb, mkSheet(s3, [22,22,28,14,14,14,14]), "Hastalar");
      saveWb(wb, "DentSide_TamRapor");
    },
  };

  const reportTemplates = [
    { id:"r1", title:"Aylık hakediş raporu",   desc:"Tüm kliniklerden tamamlanan seans ve hakediş özeti" },
    { id:"r2", title:"Klinik bazlı gelir",      desc:"Klinik başına hakediş, tahsil ve bekleyen alacak" },
    { id:"r3", title:"Hasta bazlı tedavi",      desc:"Hasta bazında işlem ve ödeme dökümü" },
    { id:"r4", title:"Ödenmeyen işlemler",      desc:"Klinik bazında bekleyen alacak listesi" },
    { id:"r5", title:"İşlem bazlı analiz",      desc:"İşlem tipine göre seans sayısı ve gelir dağılımı" },
    { id:"r6", title:"Tedavi performansı",      desc:"Seans sayısı, tamamlanma oranı ve ödeme durumu" },
  ];

  const yTicks = [1, 0.75, 0.5, 0.25, 0];

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">Raporlar</h1>
          <p className="page-sub">Gerçek verilerden otomatik üretilen raporları indir veya dışa aktar.</p>
        </div>
        <div className="page-actions">
          <button className="btn btn--accent" onClick={exports.all}><I.Export size={15}/>Toplu indir</button>
        </div>
      </div>

      <div className="rep-overview">
        <Card padding={24}>
          <div className="card-head">
            <div>
              <h3 className="card-title">Klinik bazlı hakediş karşılaştırması</h3>
              <p className="card-sub">Tüm zamanlar · tamamlanan seanslar</p>
            </div>
          </div>

          <div className="rep-chart-area">
            {/* Y-axis */}
            <div className="rep-y-axis">
              {yTicks.map((r, i) => (
                <div key={i} className="rep-y-lbl num">
                  {r === 0 ? "₺0" : fmtTRY(Math.round(maxEarn * r))}
                </div>
              ))}
            </div>

            {/* Chart body */}
            <div className="rep-chart-body">
              {yTicks.map((r, i) => (
                <div key={i} className="rep-grid-line" style={{bottom: `${r * 100}%`}}/>
              ))}
              <div className="rep-bars-inner">
                {clinicStats.map(s => {
                  const totalPct = (s.earned / maxEarn) * 100;
                  const pendingPct = s.earned > 0 ? (s.pending / s.earned) * 100 : 0;
                  const paidPct = 100 - pendingPct;
                  const hasPending = s.pending > 0;
                  return (
                    <div key={s.clinic.id} className="rep-bar-item">
                      <div className="rep-bar-stack" style={{height: `${totalPct}%`}}>
                        {s.earned > 0 && <span className="rep-bar__lbl num">{fmtTRY(s.earned)}</span>}
                        <div style={{height:`${pendingPct}%`, background:s.clinic.color+"44", borderRadius:hasPending?"5px 5px 0 0":"0", minHeight: hasPending?3:0}}/>
                        <div style={{height:`${paidPct}%`, background:s.clinic.color, borderRadius:hasPending?"0":"5px 5px 0 0", minHeight:s.paid>0?3:0}}/>
                      </div>
                      <div className="rep-bar__name">{s.clinic.name.split(" ")[0]}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          <div className="rep-legend">
            <span><span className="legend__dot" style={{background:"var(--accent)"}}/> Tahsil</span>
            <span><span className="legend__dot" style={{background:"var(--accent)", opacity:0.27}}/> Bekleyen</span>
          </div>
        </Card>

        <Card padding={24}>
          <h3 className="card-title">Hızlı özet</h3>
          <p className="card-sub">Tüm zamanlar</p>
          <ul className="rep-summary">
            <li><span>Toplam hakediş</span><b className="num">{fmtTRY(totalEarned)}</b></li>
            <li><span>Tamamlanan seans</span><b className="num">{allDone.length}</b></li>
            <li><span>Tamamlanan hasta</span><b className="num">{data.PATIENTS.filter(p=>p.status==="Tamamlandı").length}</b></li>
            <li><span>Aktif tedavi</span><b className="num">{data.PATIENTS.filter(p=>p.status==="Devam ediyor").length}</b></li>
            <li><span>Ort. seans ücreti</span><b className="num">{fmtTRY(avgFee)}</b></li>
            <li><span>Ort. hakediş oranı</span><b className="num">%{avgShare}</b></li>
          </ul>
        </Card>
      </div>

      <Card padding={24}>
        <div className="card-head">
          <div>
            <h3 className="card-title">Rapor şablonları</h3>
            <p className="card-sub">Excel formatında indir</p>
          </div>
        </div>
        <div className="rep-grid">
          {reportTemplates.map(r => (
            <div key={r.id} className="rep-card">
              <div className="rep-card__icon"><I.Document size={20}/></div>
              <div className="rep-card__main">
                <h4 className="rep-card__title">{r.title}</h4>
                <p className="rep-card__desc">{r.desc}</p>
                <div className="rep-card__meta">
                  <Tag color="neutral">Excel</Tag>
                </div>
              </div>
              <button className="btn btn--ghost btn--sm icon-only" onClick={exports[r.id]} title="İndir">
                <I.Export size={15}/>
              </button>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ──── PLACEHOLDER ────
function Placeholder({ title, desc }) {
  const I = window.DentIcons;
  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">{title}</h1>
          <p className="page-sub">{desc}</p>
        </div>
      </div>
      <div className="placeholder">
        <I.Sparkle size={28}/>
        <p>Bu modül yakında geliyor. Bekleme listesine eklemek için iletişime geç.</p>
      </div>
    </div>
  );
}

// ──── SETTINGS ────
function Settings({ tweaks, setTweak, data }) {
  const { Card, ConfirmModal } = window.DentUI;
  const I = window.DentIcons;
  const [confirmResetUI, setConfirmResetUI] = React.useState(false);
  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
  const [deletePassword, setDeletePassword] = React.useState('');
  const [deleteError, setDeleteError] = React.useState('');
  const [deleting, setDeleting] = React.useState(false);

  const handleDeleteAccount = async () => {
    if (!deletePassword) { setDeleteError('Şifrenizi girin.'); return; }
    setDeleting(true);
    setDeleteError('');
    const email = window._dentUser?.email;
    const { error: authErr } = await window._sb.auth.signInWithPassword({ email, password: deletePassword });
    if (authErr) { setDeleteError('Şifre hatalı.'); setDeleting(false); return; }
    const { error: rpcErr } = await window._sb.rpc('delete_own_account');
    if (rpcErr) { setDeleteError('Hesap silinemedi: ' + rpcErr.message); setDeleting(false); return; }
    localStorage.clear();
    window.location.href = 'giris.html';
  };

  const [form, setForm] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("DentSide_account") || "{}"); } catch(e) { return {}; }
  });
  const [saved, setSaved] = React.useState(false);
  const [notifs, setNotifs] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("DentSide_notifs") || "{}"); } catch(e) { return {}; }
  });

  const setF = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const saveAccount = () => {
    localStorage.setItem("DentSide_account", JSON.stringify(form));
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };


  const toggleNotif = (key) => {
    const next = { ...notifs, [key]: !notifs[key] };
    setNotifs(next);
    localStorage.setItem("DentSide_notifs", JSON.stringify(next));
    window.dispatchEvent(new Event("df_notifs_updated"));
  };

  const exportAll = () => {
    const wb = XLSX.utils.book_new();
    const mkS = (rows, ws) => { const s = XLSX.utils.aoa_to_sheet(rows); s["!cols"] = ws.map(w=>({wch:w})); return s; };
    const s1 = [["Klinik","Hakediş %","Aktif Hasta"]];
    data.CLINICS.forEach(c => {
      const active = data.PATIENTS.filter(p => p.clinicId === c.id && p.status === "Devam ediyor").length;
      s1.push([c.name, c.share||50, active]);
    });
    XLSX.utils.book_append_sheet(wb, mkS(s1,[22,14,14]), "Klinikler");
    const s2 = [["Hasta","Klinik","Tedavi","Toplam (₺)","Ödenen (₺)","Bakiye (₺)","Durum"]];
    data.PATIENTS.forEach(p => {
      const c = data.CLINICS.find(cc => cc.id === p.clinicId);
      s2.push([p.name, c?.name||"", p.treatment||"", p.totalFee||0, p.paid||0, p.balance||0, p.status||""]);
    });
    XLSX.utils.book_append_sheet(wb, mkS(s2,[22,22,28,14,14,14,14]), "Hastalar");
    XLSX.writeFile(wb, `DentSide_TamVeri_${new Date().toISOString().slice(0,10)}.xlsx`);
  };

  const PALETTE_OPTS = [
    { value:"blue", label:"Klinik Mavi" }, { value:"teal", label:"Teal" },
    { value:"indigo", label:"Indigo" }, { value:"forest", label:"Forest" },
  ];

  const NOTIF_ITEMS = [
    { key:"apptReminder",  label:"Randevu hatırlatıcısı",    desc:"Randevudan 1 saat önce bildirim" },
    { key:"paymentAlert",  label:"Ödeme bildirimi",           desc:"Yeni ödeme alındığında bildir" },
    { key:"pendingAlert",  label:"Bekleyen alacak uyarısı",   desc:"30 günden eski bekleyen alacaklar" },
    { key:"newPatient",    label:"Yeni hasta bildirimi",       desc:"Sisteme yeni hasta eklendiğinde" },
  ];

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">Tercihler</h1>
          <p className="page-sub">Hesap bilgileri, görünüm ve bildirim ayarları.</p>
        </div>
      </div>

      <div className="settings-layout">

        {/* Hesap */}
        <Card padding={24}>
          <h3 className="card-title">Hesap</h3>
          <p className="card-sub">Hekim profil bilgileri</p>
          <div className="settings-form">
            <div className="form-row">
              <div className="form-field">
                <label>Ad Soyad</label>
                <input value={form.name||""} onChange={e=>setF("name",e.target.value)} placeholder="Ad Soyad"/>
              </div>
              <div className="form-field">
                <label>Uzmanlık</label>
                <input value={form.specialty||""} onChange={e=>setF("specialty",e.target.value)} placeholder="Diş Hekimi"/>
              </div>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>E-posta</label>
                <input type="email" value={form.email||""} onChange={e=>setF("email",e.target.value)} placeholder="hekim@example.com"/>
              </div>
              <div className="form-field">
                <label>Telefon</label>
                <input value={form.phone||""} onChange={e=>setF("phone",e.target.value)} placeholder="+90 5xx xxx xx xx"/>
              </div>
            </div>
            <div className="settings-form__foot">
              <button className="btn btn--accent" onClick={saveAccount}>
                {saved ? "✓ Kaydedildi" : "Kaydet"}
              </button>
            </div>
          </div>
        </Card>

        {/* Görünüm */}
        <Card padding={24}>
          <h3 className="card-title">Görünüm</h3>
          <p className="card-sub">Tema ve yoğunluk tercihleri</p>
          <div className="settings-pref-list">
            <div className="settings-pref">
              <div className="settings-pref__label">Dil</div>
              <div className="radio-group">
                <button type="button" className={`radio-opt ${tweaks.lang==="tr"?"is-on":""}`} onClick={()=>setTweak("lang","tr")}>Türkçe</button>
                <button type="button" className={`radio-opt ${tweaks.lang==="en"?"is-on":""}`} onClick={()=>setTweak("lang","en")}>English</button>
              </div>
            </div>
            <div className="settings-pref">
              <div className="settings-pref__label">Sidebar teması</div>
              <div className="radio-group">
                <button type="button" className={`radio-opt ${tweaks.sidebarTheme==="dark"?"is-on":""}`} onClick={()=>setTweak("sidebarTheme","dark")}>Koyu</button>
                <button type="button" className={`radio-opt ${tweaks.sidebarTheme==="light"?"is-on":""}`} onClick={()=>setTweak("sidebarTheme","light")}>Açık</button>
              </div>
            </div>

            <div className="settings-pref">
              <div className="settings-pref__label">Renk paleti</div>
              <div className="radio-group">
                {PALETTE_OPTS.map(p => (
                  <button key={p.value} type="button" className={`radio-opt ${tweaks.palette===p.value?"is-on":""}`} onClick={()=>setTweak("palette",p.value)}>{p.label}</button>
                ))}
              </div>
            </div>
          </div>
        </Card>

        {/* Bildirimler */}
        <Card padding={24}>
          <h3 className="card-title">Bildirimler</h3>
          <p className="card-sub">Uygulama içi bildirim tercihleri</p>
          <div className="settings-pref-list">
            {NOTIF_ITEMS.map(n => (
              <div key={n.key} className="settings-pref">
                <div>
                  <div className="settings-pref__label">{n.label}</div>
                  <div className="settings-pref__desc">{n.desc}</div>
                </div>
                <button className={`toggle-btn ${notifs[n.key]?"is-on":""}`} onClick={()=>toggleNotif(n.key)}>
                  <span className="toggle-thumb"/>
                </button>
              </div>
            ))}
          </div>
        </Card>

        {/* Veri yönetimi */}
        <Card padding={24}>
          <h3 className="card-title">Veri Yönetimi</h3>
          <p className="card-sub">Dışa aktarma ve sıfırlama</p>
          <div className="settings-pref-list">
            <div className="settings-pref">
              <div>
                <div className="settings-pref__label">Tüm verileri dışa aktar</div>
                <div className="settings-pref__desc">Hasta ve klinik verilerini Excel'e aktar</div>
              </div>
              <button className="btn btn--ghost btn--sm" onClick={exportAll}><I.Export size={14}/> Excel</button>
            </div>
            <div className="settings-pref">
              <div>
                <div className="settings-pref__label" style={{color:"var(--coral)"}}>Görünüm ayarlarını sıfırla</div>
                <div className="settings-pref__desc">Dil, tema ve renk ayarlarını varsayılana döndür</div>
              </div>
              <button className="btn btn--ghost btn--sm" style={{color:"var(--coral)",borderColor:"var(--coral)"}} onClick={() => setConfirmResetUI(true)}>Sıfırla</button>
              {confirmResetUI && (
                <ConfirmModal
                  title="Görünümü Sıfırla"
                  message="Dil, tema ve renk ayarları varsayılana dönecek."
                  confirmLabel="Sıfırla"
                  danger
                  onConfirm={() => { setTweak("lang","tr"); setTweak("sidebarTheme","dark"); setTweak("palette","blue"); setConfirmResetUI(false); }}
                  onCancel={() => setConfirmResetUI(false)}
                />
              )}
            </div>
          </div>
        </Card>

        <Card padding={24}>
          <div className="settings-pref-list">
            <div className="settings-pref">
              <div>
                <div className="settings-pref__label" style={{color:"var(--coral)"}}>Hesabı Sil</div>
                <div className="settings-pref__desc">Tüm verileriniz kalıcı olarak silinir.</div>
              </div>
              <button className="btn btn--sm" style={{background:"var(--coral)",color:"#fff",border:"none"}} onClick={() => { setShowDeleteModal(true); setDeletePassword(''); setDeleteError(''); }}>
                Hesabı Sil
              </button>
            </div>
          </div>
        </Card>

      </div>

      {showDeleteModal && (
        <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setShowDeleteModal(false)}>
          <div className="modal" style={{maxWidth:380}}>
            <div className="modal__head">
              <span className="modal__title" style={{color:"var(--coral)"}}>Hesabı Sil</span>
              <button className="icon-btn" onClick={() => setShowDeleteModal(false)}>
                <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)",marginBottom:16,lineHeight:1.6}}>
                Hesabınız ve tüm verileriniz <strong>kalıcı olarak silinecek</strong>. Bu işlem geri alınamaz. Devam etmek için şifrenizi girin.
              </p>
              {deleteError && <div style={{background:"#fef2f2",border:"1px solid #fecaca",color:"#dc2626",borderRadius:8,padding:"8px 12px",fontSize:13,marginBottom:12}}>{deleteError}</div>}
              <div className="form-field">
                <label style={{fontSize:13,fontWeight:600,color:"var(--text)",display:"block",marginBottom:6}}>Şifre</label>
                <input
                  type="password"
                  placeholder="••••••••"
                  value={deletePassword}
                  onChange={e => setDeletePassword(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && handleDeleteAccount()}
                  autoFocus
                  style={{width:"100%",padding:"10px 13px",border:"1.5px solid #e5e7eb",borderRadius:9,fontFamily:"inherit",fontSize:14,outline:"none"}}
                />
              </div>
            </div>
            <div className="modal__foot">
              <button className="btn btn--ghost" onClick={() => setShowDeleteModal(false)}>İptal</button>
              <button className="btn" style={{background:"var(--coral)",color:"#fff",border:"none",opacity:deleting?.6:1}} onClick={handleDeleteAccount} disabled={deleting}>
                {deleting ? 'Siliniyor...' : 'Evet, Hesabımı Sil'}
              </button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}

// ──── HELP ────
function Help() {
  const { Card } = window.DentUI;
  const [openFaq, setOpenFaq] = React.useState(null);
  const isMobile = window.innerWidth < 768;

  const IC = (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{p.children}</svg>;
  const steps = [
    { num:1, icon:<IC><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></IC>, title:"Klinik ekle",         desc:"Sol menüden Klinikler'e gir, Klinik Ekle butonuna tıkla. Klinik adı, şehir ve hakediş oranını gir." },
    { num:2, icon:<IC><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></IC>, title:"Hasta ekle",           desc:"Hastalar sekmesine geç ve Yeni Hasta butonuna tıkla. Ad, yaş, telefon ve tedavi kategorisini seç." },
    { num:3, icon:<IC><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="13" y2="16"/></IC>, title:"Tedavi planı oluştur", desc:"Hasta kaydını aç, Tedavi Planı sekmesine geç, seansları ekle ve ücretleri belirle." },
    { num:4, icon:<IC><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></IC>, title:"Randevu oluştur",      desc:"Takvim bölümünden gün, hafta veya ay görünümünü seç ve Yeni Randevu butonuna tıkla." },
    { num:5, icon:<IC><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></IC>, title:"Ödeme kaydet",          desc:"Hasta kaydını aç, Ödemeler sekmesine geç ve ödemeyi ekle." },
    { num:6, icon:<IC><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></IC>, title:"Rapor al",              desc:"Raporlar bölümünden istediğin şablonun indirme butonuna tıkla veya Toplu İndir butonunu kullan." },
  ];

  const faqs = [
    { q:"Excel ile hasta nasıl içe aktarılır?",
      a:"Hastalar sayfasında İçe Aktar butonuna tıkla. Şablon dosyasını indir, doldur (ad, yaş, cinsiyet, telefon, klinik adı) ve yükle. Sistemde olmayan klinik adları otomatik oluşturulur." },
    { q:"Klinik hakediş oranı nasıl değiştirilir?",
      a:"Klinikler sekmesine gir, ilgili kliniğin kalem ikonuna tıkla. Sözleşme tipi ve hakediş oranını güncelle, kaydet." },
    { q:"Randevuya kayıtsız hasta nasıl eklenir?",
      a:"Takvim'de yeni randevu oluştururken Yeni Hasta seçeneğini işaretle. Sadece isim yazman yeterli, kayıt oluşturulmaz." },
    { q:"Ödeme 'Bekliyor' olarak görünüyor, neden?",
      a:"Tamamlanan seans ücretleri hastanın toplam ödemesiyle sırayla karşılaştırılır. Ödenen tutar seans ücretini karşılamıyorsa Bekliyor olarak görünür." },
    { q:"Birden fazla klinikle çalışıyorum, nasıl yönetirim?",
      a:"Her klinik için Klinikler bölümünde ayrı kayıt oluştur. Hastalara klinik ataması yap; raporlar ve finans bölümü otomatik olarak klinik bazında ayırır." },
    { q:"Verilerimi kaybeder miyim?",
      a:"Veriler tarayıcı belleğinde tutulur; sayfayı kapatınca sıfırlanır. Tercihler - Veri Yönetimi bölümünden veya Raporlar bölümünden düzenli Excel yedek alman önerilir." },
  ];


  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">Yardım Merkezi</h1>
          <p className="page-sub">Hızlı başlangıç rehberi ve sık sorulan sorular.</p>
        </div>
      </div>

      <div style={{marginBottom:18}}>
      <Card padding={24}>
        <h3 className="card-title">Hızlı Başlangıç</h3>
        <p className="card-sub">DentSide'u kullanmaya başlamak için 6 adım</p>
        <div className="help-steps">
          {steps.map(s => (
            <div key={s.num} className="help-step">
              <div className="help-step__num">{s.num}</div>
              <div className="help-step__icon">{s.icon}</div>
              <div className="help-step__title">{s.title}</div>
              <div className="help-step__desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </Card>
      </div>

      <div className="help-bottom" style={isMobile ? {display:"block"} : {}}>
        <Card padding={24} style={isMobile ? {marginBottom:16} : {}}>
          <h3 className="card-title">Sık Sorulan Sorular</h3>
          <div className="faq-list">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${openFaq===i?"is-open":""}`}>
                <button className="faq-q" onClick={()=>setOpenFaq(openFaq===i?null:i)}>
                  <span>{f.q}</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="6 9 12 15 18 9"/></svg>
                </button>
                {openFaq===i && <div className="faq-a">{f.a}</div>}
              </div>
            ))}
          </div>
        </Card>

      </div>
    </div>
  );
}

function Stock({ data }) {
  const { Card, fmtDate, ConfirmModal } = window.DentUI;
  const I = window.DentIcons;
  const XLSX = window.XLSX;
  const isMobile = window.innerWidth < 768;
  const [expandedId, setExpandedId] = React.useState(null);

  const initStock = () => {
    try { return JSON.parse(localStorage.getItem("ds_stock")) || (data.STOCK || []); } catch(e) { return data.STOCK || []; }
  };

  const [records, setRecords] = React.useState(initStock);
  const [firmaFilter, setFirmaFilter] = React.useState("all");
  const [showAdd, setShowAdd] = React.useState(false);
  const [addTip, setAddTip] = React.useState("siparis");
  const [confirmDeleteId, setConfirmDeleteId] = React.useState(null);
  const [editId, setEditId] = React.useState(null);
  const [editForm, setEditForm] = React.useState({});
  const [importResult, setImportResult] = React.useState(null);
  const importRef = React.useRef();

  const EMPTY = { firma:"", malzeme:"", adet:"1", siparisTarihi:"", birimFiyat:"", birim:"TRY", kimeYapildi:"", nerdenOdendi:"", odemeTarihi:"", yapilanOdeme:"" };
  const [form, setForm] = React.useState(EMPTY);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const setEF = (k, v) => setEditForm(f => ({ ...f, [k]: v }));

  const saveRecords = (list) => { setRecords(list); localStorage.setItem("ds_stock", JSON.stringify(list)); };

  const firmalar = [...new Set(records.map(r => r.firma).filter(Boolean))];
  const filtered = firmaFilter === "all" ? records : records.filter(r => r.firma === firmaFilter);

  const fmtN = (n, birim) => n != null ? `${Number(n).toLocaleString("tr-TR")} ${birim || ""}`.trim() : "—";

  const tryTutar = records.filter(r => r.tip === "siparis" && r.birim === "TRY").reduce((a, r) => a + (r.tutar || 0), 0);
  const usdTutar = records.filter(r => r.tip === "siparis" && r.birim === "USD").reduce((a, r) => a + (r.tutar || 0), 0);
  const tryOdeme = records.filter(r => r.tip === "odeme" && (!r.birim || r.birim === "TRY") && r.yapilanOdeme > 0).reduce((a, r) => a + r.yapilanOdeme, 0);
  const usdOdeme = records.filter(r => r.tip === "odeme" && r.birim === "USD" && r.yapilanOdeme > 0).reduce((a, r) => a + r.yapilanOdeme, 0);

  const handleAdd = (e) => {
    e.preventDefault();
    const adet = parseFloat(form.adet) || 0;
    const birimFiyat = parseFloat(form.birimFiyat) || 0;
    const newRec = {
      id: "stk_" + Date.now(),
      tip: addTip,
      firma: form.firma,
      malzeme: form.malzeme,
      adet: addTip === "siparis" ? adet : null,
      siparisTarihi: form.siparisTarihi,
      birimFiyat: addTip === "siparis" ? birimFiyat : null,
      tutar: addTip === "siparis" ? adet * birimFiyat : null,
      birim: form.birim,
      kimeYapildi: form.kimeYapildi,
      nerdenOdendi: form.nerdenOdendi,
      odemeTarihi: form.odemeTarihi,
      yapilanOdeme: addTip === "odeme" ? (parseFloat(form.yapilanOdeme) || 0) : 0,
    };
    saveRecords([...records, newRec]);
    setForm(EMPTY);
    setShowAdd(false);
  };

  const handleEditStart = (r) => {
    setEditId(r.id);
    setEditForm({ ...r, adet: r.adet ?? "", birimFiyat: r.birimFiyat ?? "", yapilanOdeme: r.yapilanOdeme || "" });
    setShowAdd(false);
  };

  const handleEditSave = (e) => {
    e.preventDefault();
    const adet = parseFloat(editForm.adet) || 0;
    const birimFiyat = parseFloat(editForm.birimFiyat) || 0;
    const updated = {
      ...editForm,
      adet: editForm.tip === "siparis" ? adet : null,
      birimFiyat: editForm.tip === "siparis" ? birimFiyat : null,
      tutar: editForm.tip === "siparis" ? adet * birimFiyat : null,
      yapilanOdeme: parseFloat(editForm.yapilanOdeme) || 0,
    };
    saveRecords(records.map(r => r.id === editId ? updated : r));
    setEditId(null);
  };

  const handleDelete = (id) => setConfirmDeleteId(id);

  const handleExport = () => {
    const rows = [
      ["Firma","Malzeme","Adet","Sipariş Tarihi","Birim Fiyat","Tutar","Birim","Kime yapıldı","Nereden ödendi","Ödeme Tarihi","Yapılan Ödeme"],
      ...records.map(r => [r.firma,r.malzeme,r.adet ?? "",r.siparisTarihi,r.birimFiyat ?? "",r.tutar ?? "",r.birim,r.kimeYapildi,r.nerdenOdendi,r.odemeTarihi,r.yapilanOdeme || ""]),
    ];
    const ws = XLSX.utils.aoa_to_sheet(rows);
    ws["!cols"] = [24,32,6,14,12,12,7,22,16,14,14].map(w => ({ wch: w }));
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Stok");
    XLSX.writeFile(wb, `DentSide_Stok_${new Date().toISOString().slice(0,10)}.xlsx`);
  };

  const handleDownloadTemplate = () => {
    const rows = [
      ["Tip","Firma","Malzeme","Adet","Sipariş Tarihi","Birim Fiyat","Para Birimi","Kime Yapıldı","Nereden Ödendi","Ödeme Tarihi","Yapılan Ödeme"],
      ["siparis","Örnek Dental","İmplant Kit","10","2026-05-01","450","TRY","","","",""],
      ["siparis","ABC Med","Anestezi Ampul","50","2026-05-03","12.5","USD","","","",""],
      ["odeme","Örnek Dental","","","","","TRY","Dr. Ahmet Demir","Garanti Bankası","2026-05-10","4500"],
    ];
    const ws = XLSX.utils.aoa_to_sheet(rows);
    ws["!cols"] = [10,24,28,6,14,12,12,22,18,14,14].map(w => ({ wch: w }));
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Stok Taslak");
    XLSX.writeFile(wb, "DentSide_Stok_Taslak.xlsx");
  };

  const handleImport = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    e.target.value = "";
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const wb = XLSX.read(ev.target.result, { type: "array" });
        const ws = wb.Sheets[wb.SheetNames[0]];
        const rows = XLSX.utils.sheet_to_json(ws, { header: 1, defval: "" });
        if (rows.length < 2) { setImportResult({ ok: 0, skip: 0, error: "Dosyada veri bulunamadı." }); return; }
        const newRecs = [];
        let skip = 0;
        rows.slice(1).forEach(row => {
          const tip = (row[0] || "").toString().trim().toLowerCase();
          const firma = (row[1] || "").toString().trim();
          if (!firma || (tip !== "siparis" && tip !== "odeme")) { skip++; return; }
          const adet = parseFloat(row[3]) || 0;
          const birimFiyat = parseFloat(row[5]) || 0;
          const birim = (row[6] || "TRY").toString().trim().toUpperCase();
          newRecs.push({
            id: "stk_" + Date.now() + "_" + Math.random().toString(36).slice(2),
            tip,
            firma,
            malzeme: (row[2] || "").toString().trim(),
            adet: tip === "siparis" ? adet : null,
            siparisTarihi: (row[4] || "").toString().trim(),
            birimFiyat: tip === "siparis" ? birimFiyat : null,
            tutar: tip === "siparis" ? adet * birimFiyat : null,
            birim,
            kimeYapildi: (row[7] || "").toString().trim(),
            nerdenOdendi: (row[8] || "").toString().trim(),
            odemeTarihi: (row[9] || "").toString().trim(),
            yapilanOdeme: parseFloat(row[10]) || 0,
          });
        });
        if (newRecs.length > 0) saveRecords([...records, ...newRecs]);
        setImportResult({ ok: newRecs.length, skip });
      } catch(err) {
        setImportResult({ ok: 0, skip: 0, error: "Dosya okunamadı: " + err.message });
      }
    };
    reader.readAsArrayBuffer(file);
  };

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">Stok &amp; Malzeme</h1>
          <p className="page-sub">{records.length} kayıt &middot; {firmalar.length} tedarikçi</p>
        </div>
        <div className="page-actions">
          <button className="btn btn--ghost" onClick={handleDownloadTemplate}><I.Document size={15}/>Taslak</button>
          <button className="btn btn--ghost" onClick={() => importRef.current.click()}><I.Export size={15}/>İçe Aktar</button>
          <input ref={importRef} type="file" accept=".xlsx,.xls" style={{display:"none"}} onChange={handleImport}/>
          <button className="btn btn--ghost" onClick={handleExport}><I.Export size={15}/>Excel</button>
          <button className="btn btn--accent" onClick={() => setShowAdd(v => !v)}><I.Plus size={15}/>{showAdd ? "İptal" : "Yeni Kayıt"}</button>
        </div>
      </div>

      <div className="kpi-grid" style={{marginBottom:20, gridTemplateColumns: isMobile ? "repeat(2,1fr)" : "repeat(5,1fr)"}}>
        <div className="kpi">
          <div className="kpi__head"><span className="kpi__label">TRY Sipariş</span></div>
          <div className="kpi__value-row">
            <span className="kpi__value">{tryTutar.toLocaleString("tr-TR")}<span className="kpi__unit">₺</span></span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__head"><span className="kpi__label">TRY Ödeme</span></div>
          <div className="kpi__value-row">
            <span className="kpi__value" style={{color:"var(--mint)"}}>{tryOdeme.toLocaleString("tr-TR")}<span className="kpi__unit">₺</span></span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__head"><span className="kpi__label">USD Sipariş</span></div>
          <div className="kpi__value-row">
            <span className="kpi__value">${usdTutar.toLocaleString("tr-TR")}</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__head"><span className="kpi__label">USD Ödeme</span></div>
          <div className="kpi__value-row">
            <span className="kpi__value" style={{color:"var(--mint)"}}>${usdOdeme.toLocaleString("tr-TR")}</span>
          </div>
        </div>
        <div className="kpi" style={isMobile ? {gridColumn:"1 / -1"} : {}}>
          <div className="kpi__head"><span className="kpi__label">Tedarikçiler</span></div>
          <div className="kpi__value-row">
            <span className="kpi__value">{firmalar.length}</span>
          </div>
        </div>
      </div>

      {showAdd && (
        <Card style={{marginBottom:20}}>
          <div className="seg" style={{marginBottom:14}}>
            <button className={`seg__opt ${addTip === "siparis" ? "is-on" : ""}`} onClick={() => setAddTip("siparis")}>Sipariş / Malzeme</button>
            <button className={`seg__opt ${addTip === "odeme" ? "is-on" : ""}`} onClick={() => setAddTip("odeme")}>Ödeme / Ayarlama</button>
          </div>
          <form onSubmit={handleAdd} className="inline-form">
            <div className="form-row">
              <div className="form-field">
                <label>Firma *</label>
                <input value={form.firma} onChange={e => set("firma", e.target.value)} required list="stk-firma-list"/>
                <datalist id="stk-firma-list">{firmalar.map(f => <option key={f} value={f}/>)}</datalist>
              </div>
              <div className="form-field">
                <label>Malzeme / Açıklama</label>
                <input value={form.malzeme} onChange={e => set("malzeme", e.target.value)}/>
              </div>
            </div>
            {addTip === "siparis" && (
              <div className="form-row">
                <div className="form-field">
                  <label>Adet</label>
                  <input type="number" min="0" value={form.adet} onChange={e => set("adet", e.target.value)}/>
                </div>
                <div className="form-field">
                  <label>Birim Fiyat</label>
                  <input type="number" min="0" value={form.birimFiyat} onChange={e => set("birimFiyat", e.target.value)}/>
                </div>
                <div className="form-field">
                  <label>Para Birimi</label>
                  <select value={form.birim} onChange={e => set("birim", e.target.value)}>
                    <option value="TRY">TRY</option>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                  </select>
                </div>
                <div className="form-field">
                  <label>Sipariş Tarihi</label>
                  <input type="date" value={form.siparisTarihi} onChange={e => set("siparisTarihi", e.target.value)}/>
                </div>
              </div>
            )}
            {addTip === "odeme" && (
              <div className="form-row">
                <div className="form-field">
                  <label>Tutar</label>
                  <input type="number" value={form.yapilanOdeme} onChange={e => set("yapilanOdeme", e.target.value)}/>
                </div>
                <div className="form-field">
                  <label>Para Birimi</label>
                  <select value={form.birim} onChange={e => set("birim", e.target.value)}>
                    <option value="TRY">TRY</option>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                  </select>
                </div>
                <div className="form-field">
                  <label>Kime yapıldı</label>
                  <input value={form.kimeYapildi} onChange={e => set("kimeYapildi", e.target.value)}/>
                </div>
                <div className="form-field">
                  <label>Nereden ödendi</label>
                  <input value={form.nerdenOdendi} onChange={e => set("nerdenOdendi", e.target.value)}/>
                </div>
                <div className="form-field">
                  <label>Ödeme Tarihi</label>
                  <input type="date" value={form.odemeTarihi} onChange={e => set("odemeTarihi", e.target.value)}/>
                </div>
              </div>
            )}
            <div style={{display:"flex",gap:8,justifyContent:"flex-end",marginTop:4}}>
              <button type="button" className="btn btn--ghost btn--sm" onClick={() => setShowAdd(false)}>İptal</button>
              <button type="submit" className="btn btn--accent btn--sm">Kaydet</button>
            </div>
          </form>
        </Card>
      )}

      <div className="chips" style={{marginBottom:16, flexWrap:"wrap"}}>
        <button className={`chip ${firmaFilter === "all" ? "is-on" : ""}`} onClick={() => setFirmaFilter("all")}>
          Tümü <span className="chip-count">{records.length}</span>
        </button>
        {firmalar.map(f => (
          <button key={f} className={`chip ${firmaFilter === f ? "is-on" : ""}`} onClick={() => setFirmaFilter(f)}>
            {f} <span className="chip-count">{records.filter(r => r.firma === f).length}</span>
          </button>
        ))}
      </div>

      <Card style={{padding:0,overflow:"hidden"}}>
        {isMobile ? (
          <div>
            {filtered.length === 0 && (
              <div style={{padding:"32px 24px",textAlign:"center",color:"var(--text-mute)",fontSize:13}}>Kayıt bulunamadı.</div>
            )}
            {filtered.map((r, idx) => {
              const isOpen = expandedId === r.id;
              const isSiparis = r.tip === "siparis";
              return (
                <React.Fragment key={r.id}>
                  <div
                    onClick={() => setExpandedId(isOpen ? null : r.id)}
                    style={{
                      display:"flex", alignItems:"center", gap:10,
                      padding:"12px 14px",
                      borderTop: idx === 0 ? "none" : "1px solid #e5e7eb",
                      background: isOpen ? "#eef1fd" : "#fff",
                      cursor:"pointer",
                    }}
                  >
                    <div style={{flex:"1 1 0", minWidth:0}}>
                      <div style={{fontWeight:700, fontSize:13.5, color:"#111827", whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{r.firma || "—"}</div>
                      <div style={{fontSize:12, color:"#6b7280", marginTop:2, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{r.malzeme || "—"}</div>
                    </div>
                    <div style={{textAlign:"right", flexShrink:0}}>
                      {isSiparis && r.tutar != null && <div style={{fontSize:13, fontWeight:600, color:"#111827"}}>{fmtN(r.tutar, r.birim)}</div>}
                      {!isSiparis && r.yapilanOdeme ? <div style={{fontSize:13, fontWeight:600, color:"var(--mint)"}}>{r.yapilanOdeme.toLocaleString("tr-TR")}</div> : null}
                      <div style={{fontSize:11, color:"#9ca3af"}}>{isSiparis ? "Sipariş" : "Ödeme"}</div>
                    </div>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2" strokeLinecap="round" style={{flexShrink:0, transform: isOpen ? "rotate(90deg)" : "rotate(0deg)", transition:"transform 0.2s"}}><polyline points="9 18 15 12 9 6"/></svg>
                  </div>
                  {isOpen && (
                    <div style={{padding:"12px 14px", background:"#f9fafb", borderTop:"1px solid #e5e7eb"}} onClick={e => e.stopPropagation()}>
                      {editId === r.id ? (
                        <form onSubmit={handleEditSave} className="inline-form">
                          <div className="form-row">
                            <div className="form-field"><label>Firma</label><input value={editForm.firma||""} onChange={e=>setEF("firma",e.target.value)} required list="stk-mob-firma-list"/><datalist id="stk-mob-firma-list">{firmalar.map(f=><option key={f} value={f}/>)}</datalist></div>
                            <div className="form-field"><label>Malzeme</label><input value={editForm.malzeme||""} onChange={e=>setEF("malzeme",e.target.value)}/></div>
                            {isSiparis && <div className="form-field"><label>Adet</label><input type="number" min="0" value={editForm.adet} onChange={e=>setEF("adet",e.target.value)}/></div>}
                            {isSiparis && <div className="form-field"><label>Birim Fiyat</label><input type="number" min="0" value={editForm.birimFiyat} onChange={e=>setEF("birimFiyat",e.target.value)}/></div>}
                            <div className="form-field"><label>Para Birimi</label><select value={editForm.birim||"TRY"} onChange={e=>setEF("birim",e.target.value)}><option value="TRY">TRY</option><option value="USD">USD</option><option value="EUR">EUR</option></select></div>
                            {isSiparis && <div className="form-field"><label>Sipariş Tarihi</label><input type="date" value={editForm.siparisTarihi||""} onChange={e=>setEF("siparisTarihi",e.target.value)}/></div>}
                            <div className="form-field"><label>Yapılan Ödeme</label><input type="number" value={editForm.yapilanOdeme} onChange={e=>setEF("yapilanOdeme",e.target.value)}/></div>
                            <div className="form-field"><label>Kime Yapıldı</label><input value={editForm.kimeYapildi||""} onChange={e=>setEF("kimeYapildi",e.target.value)}/></div>
                            <div className="form-field"><label>Nereden Ödendi</label><input value={editForm.nerdenOdendi||""} onChange={e=>setEF("nerdenOdendi",e.target.value)}/></div>
                            <div className="form-field"><label>Ödeme Tarihi</label><input type="date" value={editForm.odemeTarihi||""} onChange={e=>setEF("odemeTarihi",e.target.value)}/></div>
                          </div>
                          <div style={{display:"flex",gap:8,justifyContent:"flex-end",marginTop:8}}>
                            <button type="button" className="btn btn--ghost btn--sm" onClick={()=>setEditId(null)}>İptal</button>
                            <button type="submit" className="btn btn--accent btn--sm">Güncelle</button>
                          </div>
                        </form>
                      ) : (
                        <>
                          {[
                            isSiparis && ["Adet", r.adet != null ? String(r.adet) : "—"],
                            isSiparis && ["Sipariş Tarihi", r.siparisTarihi ? fmtDate(r.siparisTarihi) : "—"],
                            isSiparis && ["Birim Fiyat", r.birimFiyat != null ? fmtN(r.birimFiyat, r.birim) : "—"],
                            isSiparis && ["Toplam Tutar", r.tutar != null ? fmtN(r.tutar, r.birim) : "—"],
                            r.kimeYapildi && ["Kime Yapıldı", r.kimeYapildi],
                            r.nerdenOdendi && ["Nereden Ödendi", r.nerdenOdendi],
                            r.odemeTarihi && ["Ödeme Tarihi", fmtDate(r.odemeTarihi)],
                            r.yapilanOdeme && ["Yapılan Ödeme", r.yapilanOdeme.toLocaleString("tr-TR") + " " + (r.birim||"TRY")],
                          ].filter(Boolean).map(([label, val]) => (
                            <div key={label} style={{display:"flex",justifyContent:"space-between",padding:"4px 0",borderBottom:"1px solid #e5e7eb",fontSize:12.5}}>
                              <span style={{color:"#6b7280"}}>{label}</span>
                              <span style={{color:"#111827",fontWeight:500}}>{val}</span>
                            </div>
                          ))}
                          <div style={{display:"flex",gap:8,marginTop:10,justifyContent:"flex-end"}}>
                            <button className="btn btn--ghost btn--sm" onClick={()=>handleEditStart(r)}>Düzenle</button>
                            <button className="btn btn--sm" style={{background:"#fee2e2",color:"#dc2626",border:"none"}} onClick={()=>handleDelete(r.id)}>Sil</button>
                          </div>
                        </>
                      )}
                    </div>
                  )}
                </React.Fragment>
              );
            })}
          </div>
        ) : (
        <div style={{overflowX:"auto"}}>
          <div className="stock-table">
            <div className="stock-row stock-row--head">
              <span>Firma</span>
              <span>Malzeme</span>
              <span>Adet</span>
              <span>Sipariş Tarihi</span>
              <span>Birim Fiyat</span>
              <span>Tutar</span>
              <span>Kime / Nereden</span>
              <span>Ödeme Tarihi</span>
              <span>Yapılan Ödeme</span>
              <span></span>
            </div>
            {filtered.length === 0 && (
              <div style={{padding:"32px 24px",textAlign:"center",color:"var(--text-mute)",fontSize:13}}>
                Kayıt bulunamadı.
              </div>
            )}
            {filtered.map(r => (
              <React.Fragment key={r.id}>
                <div className={`stock-row ${r.tip === "odeme" ? "stock-row--odeme" : ""} ${editId === r.id ? "stock-row--editing" : ""}`}>
                  <span className="stock-firma">{r.firma}</span>
                  <span className="stock-malzeme">{r.malzeme}</span>
                  <span className="muted">{r.adet != null ? r.adet : "—"}</span>
                  <span className="muted">{r.siparisTarihi ? fmtDate(r.siparisTarihi) : "—"}</span>
                  <span className="num">{r.birimFiyat != null ? fmtN(r.birimFiyat, r.birim) : "—"}</span>
                  <span className="num">{r.tutar != null ? fmtN(r.tutar, r.birim) : "—"}</span>
                  <span style={{fontSize:12}}>
                    {r.kimeYapildi && <div>{r.kimeYapildi}</div>}
                    {r.nerdenOdendi && <div style={{color:"var(--accent)",fontSize:11}}>{r.nerdenOdendi}</div>}
                    {!r.kimeYapildi && !r.nerdenOdendi && <span className="muted">—</span>}
                  </span>
                  <span className="muted">{r.odemeTarihi ? fmtDate(r.odemeTarihi) : "—"}</span>
                  <span className="num" style={{color: r.yapilanOdeme > 0 ? "var(--mint)" : r.yapilanOdeme < 0 ? "var(--coral)" : "var(--text-mute)", fontWeight: r.yapilanOdeme ? 600 : 400}}>
                    {r.yapilanOdeme ? r.yapilanOdeme.toLocaleString("tr-TR") : "—"}
                  </span>
                  <span style={{display:"flex",gap:2,justifyContent:"flex-end"}}>
                    <button className="icon-btn" style={{color: editId === r.id ? "var(--accent)" : "var(--text-mute)"}} onClick={() => editId === r.id ? setEditId(null) : handleEditStart(r)} title="Düzenle">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                    </button>
                    <button className="icon-btn" style={{color:"var(--coral)"}} onClick={() => handleDelete(r.id)} title="Sil">
                      <svg width="14" height="14" 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>
                  </span>
                </div>
                {editId === r.id && (
                  <div style={{padding:"14px 18px",background:"var(--surface-2)",borderTop:"1px solid var(--line)"}}>
                    <form onSubmit={handleEditSave} className="inline-form">
                      <div className="form-row">
                        <div className="form-field">
                          <label>Firma</label>
                          <input value={editForm.firma || ""} onChange={e => setEF("firma", e.target.value)} required list="stk-edit-firma-list"/>
                          <datalist id="stk-edit-firma-list">{firmalar.map(f => <option key={f} value={f}/>)}</datalist>
                        </div>
                        <div className="form-field">
                          <label>Malzeme / Açıklama</label>
                          <input value={editForm.malzeme || ""} onChange={e => setEF("malzeme", e.target.value)}/>
                        </div>
                        {r.tip === "siparis" && (
                          <>
                            <div className="form-field">
                              <label>Adet</label>
                              <input type="number" min="0" value={editForm.adet} onChange={e => setEF("adet", e.target.value)}/>
                            </div>
                            <div className="form-field">
                              <label>Birim Fiyat</label>
                              <input type="number" min="0" value={editForm.birimFiyat} onChange={e => setEF("birimFiyat", e.target.value)}/>
                            </div>
                            <div className="form-field">
                              <label>Para Birimi</label>
                              <select value={editForm.birim || "TRY"} onChange={e => setEF("birim", e.target.value)}>
                                <option value="TRY">TRY</option>
                                <option value="USD">USD</option>
                                <option value="EUR">EUR</option>
                              </select>
                            </div>
                            <div className="form-field">
                              <label>Sipariş Tarihi</label>
                              <input type="date" value={editForm.siparisTarihi || ""} onChange={e => setEF("siparisTarihi", e.target.value)}/>
                            </div>
                          </>
                        )}
                      </div>
                      <div className="form-row">
                        <div className="form-field">
                          <label>Yapılan Ödeme</label>
                          <input type="number" value={editForm.yapilanOdeme} onChange={e => setEF("yapilanOdeme", e.target.value)}/>
                        </div>
                        {r.tip === "odeme" && (
                          <div className="form-field">
                            <label>Para Birimi</label>
                            <select value={editForm.birim || "TRY"} onChange={e => setEF("birim", e.target.value)}>
                              <option value="TRY">TRY</option>
                              <option value="USD">USD</option>
                              <option value="EUR">EUR</option>
                            </select>
                          </div>
                        )}
                        <div className="form-field">
                          <label>Kime Yapıldı</label>
                          <input value={editForm.kimeYapildi || ""} onChange={e => setEF("kimeYapildi", e.target.value)}/>
                        </div>
                        <div className="form-field">
                          <label>Nereden Ödendi</label>
                          <input value={editForm.nerdenOdendi || ""} onChange={e => setEF("nerdenOdendi", e.target.value)}/>
                        </div>
                        <div className="form-field">
                          <label>Ödeme Tarihi</label>
                          <input type="date" value={editForm.odemeTarihi || ""} onChange={e => setEF("odemeTarihi", e.target.value)}/>
                        </div>
                      </div>
                      <div style={{display:"flex",gap:8,justifyContent:"flex-end",marginTop:4}}>
                        <button type="button" className="btn btn--ghost btn--sm" onClick={() => setEditId(null)}>İptal</button>
                        <button type="submit" className="btn btn--accent btn--sm">Güncelle</button>
                      </div>
                    </form>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
        )}
      </Card>
      {confirmDeleteId && (
        <ConfirmModal
          title="Kaydı Sil"
          message="Bu kayıt kalıcı olarak silinecek."
          confirmLabel="Sil"
          danger
          onConfirm={() => { saveRecords(records.filter(r => r.id !== confirmDeleteId)); setConfirmDeleteId(null); }}
          onCancel={() => setConfirmDeleteId(null)}
        />
      )}
      {importResult && (
        <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.35)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1000}} onClick={() => setImportResult(null)}>
          <div style={{background:"#fff",borderRadius:16,padding:"32px 36px",maxWidth:360,width:"90%",textAlign:"center",boxShadow:"0 20px 60px rgba(0,0,0,.18)"}} onClick={e => e.stopPropagation()}>
            {importResult.error ? (
              <>
                <div style={{fontSize:32,marginBottom:12}}>⚠️</div>
                <div style={{fontWeight:700,fontSize:16,marginBottom:8}}>İçe aktarma hatası</div>
                <div style={{fontSize:13,color:"var(--text-mute)"}}>{importResult.error}</div>
              </>
            ) : (
              <>
                <div style={{fontSize:32,marginBottom:12}}>✅</div>
                <div style={{fontWeight:700,fontSize:16,marginBottom:8}}>{importResult.ok} kayıt eklendi</div>
                {importResult.skip > 0 && <div style={{fontSize:13,color:"var(--text-mute)"}}>{importResult.skip} satır atlandı (tip veya firma eksik)</div>}
              </>
            )}
            <button className="btn btn--accent" style={{marginTop:20}} onClick={() => setImportResult(null)}>Tamam</button>
          </div>
        </div>
      )}
    </div>
  );
}

window.DentViews = { Clinics: window._dsClinic, Finance: window._dsFinance, Schedule: window._dsSchedule, Treatments: window._dsTreatments, Reports, Settings, Help, Stock, Placeholder };