// ──── SCHEDULE ────

function NewApptModal({ data, onSave, onClose, defaultDate }) {
  const getProcedures = () => { try { return JSON.parse(localStorage.getItem("df_procedures")) || []; } catch { return []; } };
  const DEFAULT_PROCS = ["İmplant cerrahisi","Kanal tedavisi","Kompozit dolgu","Zirkonyum kron","Diş beyazlatma (ofis)","Ortodonti kontrolü","Diş çekimi","Tartar temizliği","İlk muayene","Kontrol muayenesi","Tartar temizliği","Profilaksi"];
  const procList = getProcedures();
  const allProcs = procList.length ? procList : DEFAULT_PROCS;

  const [patientMode, setPatientMode] = React.useState("existing");
  const [form, setForm] = React.useState({
    patientId: data.PATIENTS[0]?.id || "",
    newPatientName: "",
    clinicId: data.CLINICS[0]?.id || "",
    procedure: "",
    date: defaultDate || new Date().toISOString().slice(0, 10),
    startHour: 9,
    startMin: 0,
    duration: "1",
    notes: "",
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const isNew = patientMode === "new";
    if (isNew && !form.newPatientName.trim()) return;
    if (!isNew && !form.patientId) return;
    if (!form.clinicId || !form.procedure) return;
    onSave({
      id: "appt_" + Date.now(),
      date: form.date,
      startHour: parseFloat(form.startHour) + parseFloat(form.startMin) / 60,
      duration: parseFloat(form.duration),
      patientId: isNew ? null : form.patientId,
      patientName: isNew ? form.newPatientName.trim() : null,
      clinicId: form.clinicId,
      procedure: form.procedure,
      notes: form.notes,
    });
  };

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{maxWidth:440}}>
        <div className="modal__head">
          <span className="modal__title">Yeni Randevu</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-field">
              <label>Hasta *</label>
              <div className="radio-group" style={{marginBottom:8}}>
                <button type="button" className={`radio-opt ${patientMode==="existing"?"is-on":""}`} onClick={() => setPatientMode("existing")}>Kayıtlı hasta</button>
                <button type="button" className={`radio-opt ${patientMode==="new"?"is-on":""}`} onClick={() => setPatientMode("new")}>Yeni Hasta</button>
              </div>
              {patientMode === "existing" ? (
                <select value={form.patientId} onChange={e => set("patientId", e.target.value)} required autoFocus>
                  {data.PATIENTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select>
              ) : (
                <input
                  value={form.newPatientName}
                  onChange={e => set("newPatientName", e.target.value)}
                  placeholder="Hasta adı soyadı..."
                  required autoFocus
                />
              )}
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Klinik *</label>
                <select value={form.clinicId} onChange={e => set("clinicId", e.target.value)} required>
                  {data.CLINICS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
              <div className="form-field">
                <label>İşlem *</label>
                <select value={form.procedure} onChange={e => set("procedure", e.target.value)} required>
                  <option value="">— Seçin —</option>
                  {allProcs.map(p => <option key={p} value={p}>{p}</option>)}
                </select>
              </div>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Tarih *</label>
                <input type="date" value={form.date} onChange={e => set("date", e.target.value)} required/>
              </div>
              <div className="form-field">
                <label>Saat</label>
                <div style={{display:"flex",gap:6}}>
                  <select value={form.startHour} onChange={e => set("startHour", e.target.value)} style={{flex:1}}>
                    {[8,9,10,11,12,13,14,15,16,17,18].map(h => <option key={h} value={h}>{String(h).padStart(2,"0")}:00</option>)}
                  </select>
                  <select value={form.startMin} onChange={e => set("startMin", e.target.value)} style={{width:72}}>
                    <option value={0}>:00</option>
                    <option value={30}>:30</option>
                  </select>
                </div>
              </div>
            </div>
            <div className="form-field">
              <label>Süre</label>
              <div className="radio-group">
                {[["0.5","30 dk"],["1","1 saat"],["1.5","1.5 saat"],["2","2 saat"]].map(([v,l]) => (
                  <button key={v} type="button" className={`radio-opt ${form.duration===v?"is-on":""}`} onClick={() => set("duration", v)}>{l}</button>
                ))}
              </div>
            </div>
            <div className="form-field">
              <label>Not</label>
              <textarea value={form.notes} onChange={e => set("notes", e.target.value)} placeholder="Randevu notu..." style={{minHeight:52}}/>
            </div>
          </div>
          <div className="modal__foot">
            <button type="button" className="btn btn--ghost" onClick={onClose}>İptal</button>
            <button type="submit" className="btn btn--accent">Randevu Ekle</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function EventDetailModal({ event, patient, clinic, onClose, onGoToPatient, onDelete }) {
  const fmtH = (h) => `${String(Math.floor(h)).padStart(2,"0")}:${String(Math.round((h%1)*60)).padStart(2,"0")}`;
  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{maxWidth:340}}>
        <div className="modal__head" style={{borderBottom:`3px solid ${clinic.color}`}}>
          <span className="modal__title">{event.procedure}</span>
          <button className="icon-btn" onClick={onClose}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div className="modal__body" style={{gap:10}}>
          <div style={{display:"flex",flexDirection:"column",gap:8,fontSize:13}}>
            <div style={{display:"flex",alignItems:"center",gap:8}}>
              <div className="avatar avatar--xs" style={{background: `linear-gradient(135deg,${clinic.color},${clinic.color}aa)`}}>
                {patient.name.split(" ").map(s=>s[0]).slice(0,2).join("")}
              </div>
              <div>
                <div style={{fontWeight:600,color:"var(--ink)"}}>{patient.name}</div>
                {patient.id && (
                  <div style={{fontSize:12,color:"var(--text-mute)"}}>{patient.age} yaş · {patient.gender==="K"?"Kadın":"Erkek"}</div>
                )}
                {!patient.id && (
                  <div style={{fontSize:12,color:"var(--text-mute)"}}>Yeni hasta · Kayıt yok</div>
                )}
              </div>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,padding:"10px 0",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
              <div>
                <div style={{fontSize:11,color:"var(--text-mute)",marginBottom:2}}>Tarih</div>
                <div style={{fontWeight:600}}>{event.date}</div>
              </div>
              <div>
                <div style={{fontSize:11,color:"var(--text-mute)",marginBottom:2}}>Saat</div>
                <div style={{fontWeight:600,fontFamily:"monospace"}}>{fmtH(event.startHour)} – {fmtH(event.startHour+event.duration)}</div>
              </div>
              <div>
                <div style={{fontSize:11,color:"var(--text-mute)",marginBottom:2}}>Klinik</div>
                <div style={{display:"flex",alignItems:"center",gap:5}}>
                  <span style={{width:8,height:8,borderRadius:"50%",background:clinic.color,display:"inline-block"}}/>
                  <span style={{fontWeight:600}}>{clinic.name}</span>
                </div>
              </div>
              <div>
                <div style={{fontSize:11,color:"var(--text-mute)",marginBottom:2}}>Süre</div>
                <div style={{fontWeight:600}}>{event.duration >= 1 ? event.duration + " saat" : (event.duration * 60) + " dk"}</div>
              </div>
            </div>
            {event.notes && <div style={{fontSize:12.5,color:"var(--text)",background:"var(--surface-2)",borderRadius:8,padding:"8px 10px"}}>{event.notes}</div>}
            {!event.patientId && (
              <div style={{fontSize:12,color:"var(--text-mute)",background:"var(--surface-2)",borderRadius:8,padding:"6px 10px",display:"flex",alignItems:"center",gap:6}}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                Sistem kaydı yok · Randevu sonrası eklenebilir
              </div>
            )}
          </div>
        </div>
        <div className="modal__foot" style={{justifyContent:"space-between"}}>
          <button className="btn btn--ghost btn--sm" style={{color:"var(--coral)"}} onClick={onDelete}>Sil</button>
          {event.patientId && <button className="btn btn--accent" onClick={onGoToPatient}>Hastaya Git</button>}
          {!event.patientId && <button className="btn btn--ghost" onClick={onClose}>Kapat</button>}
        </div>
      </div>
    </div>
  );
}

function Schedule({ data, events, onUpdateEvents, setSelectedPatient, onNav }) {
  const { Card } = window.DentUI;
  const I = window.DentIcons;
  const TODAY = new Date().toISOString().slice(0, 10);
  const HOURS = [8,9,10,11,12,13,14,15,16,17,18];
  const SLOT_H = 56;
  const DAY_NAMES = ["Pzt","Sal","Çar","Per","Cum","Cmt","Paz"];
  const MONTHS = ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"];

  const [calView, setCalView] = React.useState("hafta");
  const [currentDate, setCurrentDate] = React.useState(new Date());
  const [selectedEvent, setSelectedEvent] = React.useState(null);
  const [showNewAppt, setShowNewAppt] = React.useState(false);
  const [newApptDate, setNewApptDate] = React.useState(null);

  const findP = (id) => data.PATIENTS.find(p => p.id === id);
  const findC = (id) => data.CLINICS.find(c => c.id === id);
  const getEvPatient = (ev) => ev.patientId ? findP(ev.patientId) : (ev.patientName ? { name: ev.patientName, age: null, gender: null, id: null } : null);

  const toDateStr = (d) => {
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const dd = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${dd}`;
  };

  const dayIdx = (d) => d.getDay() === 0 ? 6 : d.getDay() - 1;

  const getWeekDays = (date) => {
    const d = new Date(date.getTime());
    d.setDate(d.getDate() - dayIdx(d));
    return Array.from({length:7}, (_, i) => { const dd = new Date(d); dd.setDate(d.getDate()+i); return dd; });
  };

  const getMonthDays = (date) => {
    const y = date.getFullYear(), m = date.getMonth();
    const first = new Date(y, m, 1), last = new Date(y, m+1, 0);
    const startOff = first.getDay() === 0 ? 6 : first.getDay() - 1;
    const endOff = last.getDay() === 0 ? 0 : 7 - last.getDay();
    const days = [];
    for (let i = 1-startOff; i <= last.getDate()+endOff; i++) days.push(new Date(y, m, i));
    return days;
  };

  const navigate = (dir) => {
    const d = new Date(currentDate.getTime());
    if (calView === "gun") d.setDate(d.getDate() + dir);
    else if (calView === "hafta") d.setDate(d.getDate() + dir * 7);
    else d.setMonth(d.getMonth() + dir);
    setCurrentDate(d);
    setSelectedEvent(null);
  };

  const fmtH = (h) => `${String(Math.floor(h)).padStart(2,"0")}:${String(Math.round((h%1)*60)).padStart(2,"0")}`;

  const getHeaderLabel = () => {
    if (calView === "gun") {
      const names = ["Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi","Pazar"];
      return `${names[dayIdx(currentDate)]}, ${currentDate.getDate()} ${MONTHS[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
    }
    if (calView === "hafta") {
      const w = getWeekDays(currentDate);
      const s = w[0], e = w[6];
      return s.getMonth() === e.getMonth()
        ? `${s.getDate()} – ${e.getDate()} ${MONTHS[s.getMonth()]} ${s.getFullYear()}`
        : `${s.getDate()} ${MONTHS[s.getMonth()]} – ${e.getDate()} ${MONTHS[e.getMonth()]} ${s.getFullYear()}`;
    }
    return `${MONTHS[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
  };

  const renderEvents = (dateStr, slotH, hourStart) => {
    return events.filter(ev => ev.date === dateStr).map(ev => {
      const p = getEvPatient(ev);
      const c = findC(ev.clinicId);
      if (!p || !c) return null;
      const top = (ev.startHour - hourStart) * slotH + 4;
      const height = Math.max(ev.duration * slotH - 4, 20);
      return (
        <button key={ev.id} className="cal-event"
          style={{ top, height, background: c.color+"1A", borderLeft:`3px solid ${c.color}`, zIndex: selectedEvent?.id===ev.id ? 3 : 1 }}
          onClick={(e) => { e.stopPropagation(); setSelectedEvent(selectedEvent?.id===ev.id ? null : ev); }}>
          <div className="cal-event__time">{fmtH(ev.startHour)}</div>
          <div className="cal-event__patient">{p.name}</div>
          <div className="cal-event__procedure">{ev.procedure}</div>
        </button>
      );
    });
  };

  const renderWeekView = () => {
    const weekDays = getWeekDays(currentDate);
    return (
      <Card padding={0}>
        <div className="cal-grid">
          <div className="cal-hour-col">
            <div className="cal-day-head"/>
            {HOURS.map(h => <div key={h} className="cal-hour">{h}:00</div>)}
          </div>
          {weekDays.map(d => {
            const dStr = toDateStr(d);
            const isToday = dStr === TODAY;
            return (
              <div key={dStr} className={`cal-day ${isToday?"is-today":""}`}>
                <div className="cal-day-head">
                  <span className="cal-day__name">{DAY_NAMES[dayIdx(d)]}</span>
                  <span className={`cal-day__date ${isToday?"is-today":""}`}>{d.getDate()}</span>
                </div>
                <div className="cal-day-body" style={{height: HOURS.length * SLOT_H}}>
                  {HOURS.map(h => <div key={h} className="cal-slot"/>)}
                  {renderEvents(dStr, SLOT_H, HOURS[0])}
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    );
  };

  const renderDayView = () => {
    const dStr = toDateStr(currentDate);
    const isToday = dStr === TODAY;
    const SH = 72;
    return (
      <Card padding={0}>
        <div className="cal-grid" style={{gridTemplateColumns:"56px 1fr"}}>
          <div className="cal-hour-col">
            <div className="cal-day-head"/>
            {HOURS.map(h => <div key={h} className="cal-hour" style={{height:SH}}>{h}:00</div>)}
          </div>
          <div className={`cal-day ${isToday?"is-today":""}`}>
            <div className="cal-day-head" style={{justifyContent:"flex-start",flexDirection:"row",alignItems:"center",gap:10}}>
              <span className="cal-day__name">{["Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi","Pazar"][dayIdx(currentDate)]}</span>
              <span className={`cal-day__date ${isToday?"is-today":""}`}>{currentDate.getDate()}</span>
            </div>
            <div className="cal-day-body" style={{height: HOURS.length * SH}}>
              {HOURS.map(h => <div key={h} className="cal-slot" style={{height:SH}}/>)}
              {events.filter(ev => ev.date === dStr).map(ev => {
                const p = getEvPatient(ev);
                const c = findC(ev.clinicId);
                if (!p || !c) return null;
                const top = (ev.startHour - HOURS[0]) * SH + 4;
                const height = Math.max(ev.duration * SH - 4, 28);
                return (
                  <button key={ev.id} className="cal-event"
                    style={{ top, height, background: c.color+"1A", borderLeft:`3px solid ${c.color}` }}
                    onClick={(e) => { e.stopPropagation(); setSelectedEvent(selectedEvent?.id===ev.id ? null : ev); }}>
                    <div className="cal-event__time">{fmtH(ev.startHour)} – {fmtH(ev.startHour+ev.duration)}</div>
                    <div className="cal-event__patient">{p.name}</div>
                    <div className="cal-event__procedure">{ev.procedure}</div>
                    {ev.notes && <div style={{fontSize:11,color:"var(--text-mute)",marginTop:2,opacity:.8}}>{ev.notes}</div>}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </Card>
    );
  };

  const renderMonthView = () => {
    const monthDays = getMonthDays(currentDate);
    const curMonth = currentDate.getMonth();
    return (
      <Card padding={0}>
        <div style={{padding:"0 0 16px"}}>
          <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",borderBottom:"1px solid var(--line)"}}>
            {DAY_NAMES.map(d => (
              <div key={d} style={{textAlign:"center",padding:"10px 0",fontSize:11.5,fontWeight:600,color:"var(--text-mute)",textTransform:"uppercase",letterSpacing:"0.05em"}}>{d}</div>
            ))}
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)"}}>
            {monthDays.map((d, i) => {
              const dStr = toDateStr(d);
              const inMonth = d.getMonth() === curMonth;
              const isToday = dStr === TODAY;
              const dayEvs = events.filter(ev => ev.date === dStr);
              return (
                <div key={i} style={{
                  minHeight:96, padding:"6px 8px",
                  borderRight: (i+1)%7===0 ? "none" : "1px solid var(--line)",
                  borderBottom: "1px solid var(--line)",
                  background: isToday ? "color-mix(in oklch, var(--accent), white 96%)" : "transparent",
                  opacity: inMonth ? 1 : 0.38,
                }}>
                  <div style={{
                    display:"inline-flex",alignItems:"center",justifyContent:"center",
                    width:24,height:24,borderRadius:"50%",marginBottom:4,
                    background: isToday ? "var(--accent)" : "transparent",
                    color: isToday ? "#fff" : "var(--ink)",
                    fontSize:13,fontWeight:isToday?700:500,
                  }}>{d.getDate()}</div>
                  {dayEvs.slice(0,3).map((ev, ei) => {
                    const c = findC(ev.clinicId);
                    const p = getEvPatient(ev);
                    if (!c || !p) return null;
                    return (
                      <button key={ei} onClick={(e) => { e.stopPropagation(); setSelectedEvent(selectedEvent?.id===ev.id ? null : ev); }}
                        style={{display:"flex",alignItems:"center",gap:4,width:"100%",background:c.color+"20",borderRadius:4,padding:"2px 5px",marginBottom:2,border:"none",cursor:"pointer",textAlign:"left"}}>
                        <span style={{width:6,height:6,borderRadius:"50%",background:c.color,flexShrink:0}}/>
                        <span style={{fontSize:11,color:"var(--ink)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{fmtH(ev.startHour)} {p.name}</span>
                      </button>
                    );
                  })}
                  {dayEvs.length > 3 && <div style={{fontSize:11,color:"var(--text-mute)",paddingLeft:10}}>+{dayEvs.length-3} daha</div>}
                </div>
              );
            })}
          </div>
        </div>
      </Card>
    );
  };

  const selEv = selectedEvent;
  const selP = selEv ? getEvPatient(selEv) : null;
  const selC = selEv ? findC(selEv.clinicId) : null;

  return (
    <div className="view" onClick={() => setSelectedEvent(null)}>
      <div className="page-head">
        <div>
          <h1 className="page-title">Takvim</h1>
          <p className="page-sub">{getHeaderLabel()}</p>
        </div>
        <div className="page-actions">
          <div className="seg">
            <button className={`seg__opt ${calView==="gun"?"is-on":""}`} onClick={()=>{setCalView("gun");setSelectedEvent(null);}}>Gün</button>
            <button className={`seg__opt ${calView==="hafta"?"is-on":""}`} onClick={()=>{setCalView("hafta");setSelectedEvent(null);}}>Hafta</button>
            <button className={`seg__opt ${calView==="ay"?"is-on":""}`} onClick={()=>{setCalView("ay");setSelectedEvent(null);}}>Ay</button>
          </div>
          <button className="btn btn--ghost btn--sm icon-only" onClick={() => navigate(-1)}>
            <I.Arrow size={14} style={{transform:"rotate(90deg)"}}/>
          </button>
          <button className="btn btn--ghost btn--sm" onClick={() => { setCurrentDate(new Date()); setSelectedEvent(null); }}>Bugün</button>
          <button className="btn btn--ghost btn--sm icon-only" onClick={() => navigate(1)}>
            <I.Arrow size={14} style={{transform:"rotate(-90deg)"}}/>
          </button>
          <button className="btn btn--accent" onClick={() => { setNewApptDate(toDateStr(currentDate)); setShowNewAppt(true); }}>
            <I.Plus size={15}/>Randevu
          </button>
        </div>
      </div>

      <div className="cal-clinic-key">
        {data.CLINICS.map(c => (
          <span key={c.id} className="cal-key">
            <span className="clinic-bullet" style={{background:c.color}}/> {c.name}
          </span>
        ))}
      </div>

      {calView === "hafta" && renderWeekView()}
      {calView === "gun" && renderDayView()}
      {calView === "ay" && renderMonthView()}

      {selEv && selP && selC && (
        <EventDetailModal
          event={selEv} patient={selP} clinic={selC}
          onClose={() => setSelectedEvent(null)}
          onGoToPatient={() => { setSelectedPatient(selP.id); onNav("patients"); }}
          onDelete={() => { onUpdateEvents(prev => prev.filter(e => e.id !== selEv.id)); setSelectedEvent(null); }}
        />
      )}

      {showNewAppt && (
        <NewApptModal
          data={data}
          defaultDate={newApptDate}
          onSave={(appt) => { onUpdateEvents(prev => [...prev, appt]); setShowNewAppt(false); }}
          onClose={() => setShowNewAppt(false)}
        />
      )}
    </div>
  );
}

window._dsSchedule = Schedule;