// DentSide — main app shell

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "tr",
  "sidebarTheme": "dark",
  "palette": "blue",
  "density": "comfortable"
}/*EDITMODE-END*/;

const PALETTES = {
  blue:   { accent: "#2B47E8", accent2: "#5B82FF", mint: "#1F9F73", coral: "#E27A52", violet: "#7B5BE0" },
  teal:   { accent: "#0F7A8C", accent2: "#3FB6C4", mint: "#1F9F73", coral: "#E27A52", violet: "#7B5BE0" },
  indigo: { accent: "#4338CA", accent2: "#7C75E8", mint: "#1F9F73", coral: "#E27A52", violet: "#A78BFA" },
  forest: { accent: "#1F7A4D", accent2: "#3FB893", mint: "#16A34A", coral: "#E27A52", violet: "#7B5BE0" },
};

const DEMO_EVENTS = [
  { id:"e1",  date:"2026-05-13", startHour:9,    duration:1.5, patientId:"p6", clinicId:"c4", procedure:"İmplant cerrahisi", notes:"" },
  { id:"e2",  date:"2026-05-13", startHour:11.5, duration:0.5, patientId:"p7", clinicId:"c3", procedure:"Aktivasyon", notes:"" },
  { id:"e3",  date:"2026-05-13", startHour:14,   duration:1,   patientId:"p5", clinicId:"c1", procedure:"Office beyazlatma", notes:"" },
  { id:"e4",  date:"2026-05-13", startHour:16,   duration:0.75,patientId:"p1", clinicId:"c1", procedure:"Ölçü alımı", notes:"" },
  { id:"e5",  date:"2026-05-14", startHour:10,   duration:0.5, patientId:"p7", clinicId:"c3", procedure:"Kontrol", notes:"" },
  { id:"e6",  date:"2026-05-14", startHour:14,   duration:1,   patientId:"p2", clinicId:"c2", procedure:"Kanal kontrol", notes:"" },
  { id:"e7",  date:"2026-05-15", startHour:9,    duration:1,   patientId:"p3", clinicId:"c3", procedure:"Plak değişimi", notes:"" },
  { id:"e8",  date:"2026-05-15", startHour:11,   duration:1.5, patientId:"p8", clinicId:"c2", procedure:"Çekim kontrolü", notes:"" },
  { id:"e9",  date:"2026-05-15", startHour:15,   duration:1,   patientId:"p4", clinicId:"c2", procedure:"Kontrol", notes:"" },
  { id:"e10", date:"2026-05-16", startHour:10,   duration:2,   patientId:"p1", clinicId:"c1", procedure:"Zirkonyum prova", notes:"" },
  { id:"e11", date:"2026-05-12", startHour:14,   duration:1,   patientId:"p5", clinicId:"c1", procedure:"Dolgu", notes:"" },
  { id:"e12", date:"2026-05-11", startHour:11,   duration:1,   patientId:"p2", clinicId:"c2", procedure:"Kanal seans", notes:"" },
];

const TREATMENT_CATEGORIES = [
  "İmplant", "Ortodonti", "Kanal Tedavisi", "Kompozit Dolgu",
  "Zirkonyum / Kron", "Beyazlatma", "Diş Çekimi", "Tartar Temizliği", "Diğer",
];

function NewPatientModal({ clinics, onSave, onClose }) {
  const [form, setForm] = React.useState({
    name: "", age: "", gender: "K", phone: "", clinicId: clinics[0]?.id || "", notes: "",
  });
  const [selectedTreatments, setSelectedTreatments] = React.useState([]);

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

  const toggleTreatment = (cat) => {
    setSelectedTreatments(prev =>
      prev.includes(cat) ? prev.filter(t => t !== cat) : [...prev, cat]
    );
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.clinicId) return;
    onSave({
      ...form,
      treatment: selectedTreatments.join(", "),
      age: parseInt(form.age) || 0,
      status: "Devam ediyor",
      plan: [],
      totalFee: 0,
      paid: 0,
      balance: 0,
    });
  };

  return (
    <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="modal__head">
          <span className="modal__title">Yeni Hasta</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>
        <form onSubmit={handleSubmit}>
          <div className="modal__body">
            <div className="form-row">
              <div className="form-field" style={{gridColumn:"1/-1"}}>
                <label>Ad Soyad *</label>
                <input value={form.name} onChange={e => set("name", e.target.value)} placeholder="Hasta adı" required autoFocus/>
              </div>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Yaş</label>
                <input type="number" min="1" max="120" value={form.age} onChange={e => set("age", e.target.value)} placeholder="35"/>
              </div>
              <div className="form-field">
                <label>Cinsiyet</label>
                <div className="radio-group">
                  <button type="button" className={`radio-opt ${form.gender==="K"?"is-on":""}`} onClick={() => set("gender","K")}>Kadın</button>
                  <button type="button" className={`radio-opt ${form.gender==="E"?"is-on":""}`} onClick={() => set("gender","E")}>Erkek</button>
                </div>
              </div>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Telefon</label>
                <input value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="+90 5xx xxx xx xx"/>
              </div>
              <div className="form-field">
                <label>Klinik *</label>
                <select value={form.clinicId} onChange={e => set("clinicId", e.target.value)} required>
                  {clinics.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
            </div>
            <div className="form-field">
              <label>Tedavi Kategorisi <span style={{color:"var(--text-mute)",fontWeight:400}}>(çoklu seçim)</span></label>
              <div className="treat-chips">
                {TREATMENT_CATEGORIES.map(cat => (
                  <button key={cat} type="button"
                    className={`treat-chip ${selectedTreatments.includes(cat) ? "is-on" : ""}`}
                    onClick={() => toggleTreatment(cat)}>
                    {selectedTreatments.includes(cat) && <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="2,6 5,9 10,3"/></svg>}
                    {cat}
                  </button>
                ))}
              </div>
            </div>
            <div className="form-field">
              <label>Notlar</label>
              <textarea value={form.notes} onChange={e => set("notes", e.target.value)} placeholder="Genel not..." style={{minHeight:60}}/>
            </div>
          </div>
          <div className="modal__foot">
            <button type="button" className="btn btn--ghost" onClick={onClose}>İptal</button>
            <button type="submit" className="btn btn--accent">Hasta Ekle</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState("dashboard");
  const [selectedPatient, setSelectedPatient] = React.useState("p1");
  const [query, setQuery] = React.useState("");
  const [showNewPatient, setShowNewPatient] = React.useState(false);

  const [sidebarOpen, setSidebarOpen] = React.useState(false);
  const [patients, setPatients] = React.useState(window.DentSideData.PATIENTS);
  const [clinics, setClinics] = React.useState([...window.DentSideData.CLINICS]);
  const [catalog, setCatalog] = React.useState([...window.DentSideData.TREATMENTS_CATALOG]);
  const [events, setEvents] = React.useState(DEMO_EVENTS);
  const [transfers, setTransfers] = React.useState([]);

  const t = window.DentI18nStrings[tweaks.lang] || window.DentI18nStrings.tr;
  const TODAY = new Date().toISOString().slice(0, 10);
  const MONTHS = ["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"];

  const computedEarningsByClinic = React.useMemo(() => clinics.map(clinic => {
    const cp = patients.filter(p => p.clinicId === clinic.id);
    const earned = cp.reduce((sum, p) =>
      sum + (p.plan || []).filter(s => s.status === "Tamamlandı").reduce((a, s) => a + (s.share || 0), 0), 0);
    const paid = cp.reduce((sum, p) => sum + (p.paid || 0), 0);
    return { clinicId: clinic.id, earned, paid, pending: Math.max(0, earned - paid) };
  }), [patients, clinics]);

  const computedIncomeTrend = React.useMemo(() => {
    const byMonth = {};
    patients.forEach(p => {
      (p.plan || []).filter(s => s.status === "Tamamlandı" && s.date).forEach(s => {
        const d = new Date(s.date + "T00:00:00");
        const key = `${d.getFullYear()}-${d.getMonth()}`;
        if (!byMonth[key]) byMonth[key] = { month: MONTHS[d.getMonth()], year: d.getFullYear(), income: 0, sortKey: d.getFullYear() * 100 + d.getMonth() };
        byMonth[key].income += s.share || 0;
      });
    });
    return Object.values(byMonth).sort((a, b) => a.sortKey - b.sortKey);
  }, [patients]);

  const computedTodayAppts = React.useMemo(() =>
    events.filter(e => e.date === TODAY).map(e => ({
      patientId: e.patientId,
      clinicId: e.clinicId,
      procedure: e.procedure,
      time: e.startHour != null
        ? `${Math.floor(e.startHour)}:${String(Math.round((e.startHour % 1) * 60)).padStart(2, "0")}`
        : "—",
      duration: e.duration ? Math.round(e.duration * 60) : 60,
    })), [events, TODAY]);

  const computedUpcoming = React.useMemo(() =>
    events
      .filter(e => e.date > TODAY)
      .map(e => ({ patientId: e.patientId, clinicId: e.clinicId, date: e.date, reason: e.procedure }))
      .sort((a, b) => a.date.localeCompare(b.date)), [events, TODAY]);

  const PROC_CATS = [
    { name:"İmplant",    keywords:["implant","cerrahi"] },
    { name:"Ortodonti",  keywords:["ortodonti","braket","plak","aktivasyon","şeffaf","sabit"] },
    { name:"Kanal",      keywords:["kanal"] },
    { name:"Dolgu",      keywords:["dolgu","kompozit"] },
    { name:"Zirkonyum",  keywords:["zirkonyum","kron","köprü","seramik","simant"] },
    { name:"Beyazlatma", keywords:["beyazlat"] },
    { name:"Çekim",      keywords:["çekim"] },
    { name:"Diğer",      keywords:[] },
  ];
  const computedProcedureDist = React.useMemo(() => {
    const counts = Object.fromEntries(PROC_CATS.map(c => [c.name, 0]));
    patients.forEach(p => (p.plan || []).forEach(s => {
      const proc = (s.procedure || "").toLowerCase();
      const cat = PROC_CATS.find(c => c.keywords.some(k => proc.includes(k)));
      counts[(cat || PROC_CATS[PROC_CATS.length - 1]).name]++;
    }));
    const total = Object.values(counts).reduce((a, b) => a + b, 0) || 1;
    return PROC_CATS
      .map(c => ({ name: c.name, count: counts[c.name], share: Math.round(counts[c.name] / total * 100) }))
      .filter(c => c.count > 0);
  }, [patients]);

  const data = {
    ...window.DentSideData,
    PATIENTS: patients,
    CLINICS: clinics,
    TREATMENTS_CATALOG: catalog,
    EARNINGS_BY_CLINIC: computedEarningsByClinic,
    INCOME_TREND: computedIncomeTrend,
    TODAY_APPOINTMENTS: computedTodayAppts,
    UPCOMING_CONTROLS: computedUpcoming,
    TRANSFERS: transfers,
    PROCEDURE_DISTRIBUTION: computedProcedureDist,
  };

  // Apply palette
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.blue;
    const root = document.documentElement;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(`--${k.replace(/([A-Z])/g, "-$1").toLowerCase()}`, v));
    root.setAttribute("data-density", tweaks.density);
    root.setAttribute("data-sidebar", tweaks.sidebarTheme);
  }, [tweaks]);

  const handleNav = (id) => {
    setActive(id);
    if (id !== "patients") setSelectedPatient(null);
  };

  const handleSearch = (val) => {
    setQuery(val);
    if (val && active !== "patients") setActive("patients");
  };

  const handleAddPatient = (newPatient) => {
    const id = "p" + (patients.length + 1 + Date.now());
    const added = { ...newPatient, id, payments: [] };
    setPatients(prev => [...prev, added]);
    setShowNewPatient(false);
    setActive("patients");
    setSelectedPatient(added.id);
  };

  const handleUpdatePatient = (id, updates) => {
    if (updates._delete) {
      setPatients(prev => prev.filter(p => p.id !== id));
      setSelectedPatient(null);
    } else {
      setPatients(prev => prev.map(p => p.id === id ? { ...p, ...updates } : p));
    }
  };

  const handleImportPatients = ({ patients: imported, newClinics }) => {
    if (newClinics?.length) {
      setClinics(prev => [...prev, ...newClinics]);
    }
    setPatients(prev => [...prev, ...imported]);
  };

  const { Sidebar, Topbar } = window.DentUI;
  const { Clinics, Finance, Schedule, Treatments, Reports, Settings, Help, Stock, Placeholder } = window.DentViews;

  const badges = React.useMemo(() => {
    const today = new Date(); today.setHours(0,0,0,0);
    const in7 = new Date(today); in7.setDate(in7.getDate() + 7);
    const scheduleBadge = events.filter(a => {
      const d = new Date(a.date + "T00:00:00"); return d >= today && d <= in7;
    }).length;
    const financeBadge = data.CLINICS.reduce((sum, c) => {
      const earned = (computedEarningsByClinic.find(e => e.clinicId === c.id) || {}).earned || 0;
      const transferred = transfers.filter(t => t.clinicId === c.id).reduce((a, t) => a + t.amount, 0);
      return sum + (earned > transferred ? 1 : 0);
    }, 0);
    return { schedule: scheduleBadge, finance: financeBadge };
  }, [patients, events, transfers, computedEarningsByClinic]);

  // Re-select when navigating to patients
  React.useEffect(() => {
    if (active === "patients" && !selectedPatient && data.PATIENTS.length > 0) setSelectedPatient(data.PATIENTS[0].id);
  }, [active]);

  return (
    <window.DentI18n.Provider value={t}>
      <div className="app">
        <Sidebar active={active} onNav={handleNav} theme={tweaks.sidebarTheme} badges={badges} isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)}/>
        <div className="main">
          <Topbar active={active} onSearch={handleSearch} query={query} onNav={handleNav} onQuickAdd={() => setShowNewPatient(true)} onToggleSidebar={() => setSidebarOpen(v => !v)}/>
          <div className="content">
            {active === "dashboard" && <window.DentDashboard data={data} onNav={handleNav} setSelectedPatient={setSelectedPatient} onNewPatient={() => setShowNewPatient(true)}/>}
            {active === "patients" && <window.DentPatients data={data} selectedPatient={selectedPatient} setSelectedPatient={setSelectedPatient} filter={query} setFilter={setQuery} onNewPatient={() => setShowNewPatient(true)} onUpdatePatient={handleUpdatePatient} onImportPatients={handleImportPatients}/>}
            {active === "clinics" && <Clinics data={data} onNav={handleNav}
              onAddClinic={(clinic) => setClinics(prev => [...prev, clinic])}
              onEditClinic={(id, updates) => setClinics(prev => prev.map(c => c.id === id ? { ...c, ...updates } : c))}
              onDeleteClinic={(id) => setClinics(prev => prev.filter(c => c.id !== id))}
            />}
            {active === "finance" && <Finance data={data} transfers={transfers} onUpdateTransfers={setTransfers}/>}
            {active === "schedule" && <Schedule data={data} events={events} onUpdateEvents={setEvents} setSelectedPatient={setSelectedPatient} onNav={handleNav}/>}
            {active === "treatments" && <Treatments data={data} onNav={handleNav} setSelectedPatient={setSelectedPatient} onUpdatePatient={handleUpdatePatient} onUpdateCatalog={setCatalog}/>}
            {active === "stock" && <Stock data={data}/>}
            {active === "reports" && <Reports data={data}/>}
            {active === "settings" && <Settings tweaks={tweaks} setTweak={setTweak} data={data}/>}
            {active === "help" && <Help/>}
          </div>
        </div>

        {showNewPatient && (
          <NewPatientModal
            clinics={data.CLINICS}
            onSave={handleAddPatient}
            onClose={() => setShowNewPatient(false)}
          />
        )}

        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Sidebar teması">
            <window.TweakRadio value={tweaks.sidebarTheme} onChange={v => setTweak("sidebarTheme", v)}
              options={[{value:"dark",label:"Koyu"},{value:"light",label:"Açık"}]}/>
          </window.TweakSection>
          <window.TweakSection title="Renk paleti">
            <window.TweakColor value={tweaks.palette} onChange={v => setTweak("palette", v)}
              options={[
                { value: "blue", color: PALETTES.blue.accent, label: "Klinik Mavi" },
                { value: "teal", color: PALETTES.teal.accent, label: "Teal" },
                { value: "indigo", color: PALETTES.indigo.accent, label: "Indigo" },
                { value: "forest", color: PALETTES.forest.accent, label: "Forest" },
              ]}/>
          </window.TweakSection>
          <window.TweakSection title="Yoğunluk">
            <window.TweakRadio value={tweaks.density} onChange={v => setTweak("density", v)}
              options={[{value:"comfortable",label:"Normal"},{value:"compact",label:"Yoğun"}]}/>
          </window.TweakSection>
        </window.TweaksPanel>
      </div>
    </window.DentI18n.Provider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);