// Clinics, Finance, Schedule, Treatments, Reports views

// ──── CLINICS ────
const CLINIC_PRESET_COLORS = [
  "#5B8DEF","#3FB893","#A78BFA","#F59E64","#EC6F8E","#06B6D4","#F43F5E","#84CC16","#F59E0B","#8B5CF6","#10B981","#EF4444",
];

function NewClinicModal({ onSave, onClose, initialValues }) {
  const I = window.DentIcons;
  const isEdit = !!initialValues;
  const [form, setForm] = React.useState(initialValues || {
    name: "", district: "", contract: "Yüzdelik", share: 50, fixedAmount: "", contact: "", phone: "", color: CLINIC_PRESET_COLORS[0],
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const showShare = form.contract === "Yüzdelik" || form.contract === "Sabit + Yüzdelik";
  const showFixed = form.contract === "Sabit" || form.contract === "Sabit + Yüzdelik";

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name.trim()) return;
    onSave({
      id: "clinic_" + Date.now(),
      name: form.name.trim(),
      district: form.district.trim(),
      contract: form.contract,
      share: showShare ? (parseInt(form.share) || 50) : 0,
      fixedAmount: showFixed ? (parseFloat(form.fixedAmount) || 0) : 0,
      contact: form.contact.trim(),
      phone: form.phone.trim(),
      color: form.color,
      activePatients: 0,
      receivable: 0,
    });
  };

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{maxWidth:460}}>
        <div className="modal__head">
          <span className="modal__title">{isEdit ? "Klinik Düzenle" : "Yeni Klinik Ekle"}</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" style={{gridColumn:"1/-1"}}>
              <label>Klinik Adı *</label>
              <input value={form.name} onChange={e => set("name", e.target.value)} placeholder="örn. Beşiktaş Dental Studio" required autoFocus/>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>İlçe / Şehir</label>
                <input value={form.district} onChange={e => set("district", e.target.value)} placeholder="örn. Beşiktaş, İstanbul"/>
              </div>
              <div className="form-field">
                <label>Anlaşma türü</label>
                <select value={form.contract} onChange={e => set("contract", e.target.value)}>
                  <option value="Yüzdelik">Yüzdelik</option>
                  <option value="Sabit">Sabit</option>
                  <option value="Sabit + Yüzdelik">Sabit + Yüzdelik</option>
                </select>
              </div>
            </div>
            <div className="form-row">
              {showFixed && (
                <div className="form-field">
                  <label>Sabit tutar (₺)</label>
                  <input type="number" min="0" value={form.fixedAmount} onChange={e => set("fixedAmount", e.target.value)} placeholder="örn. 5000"/>
                </div>
              )}
              {showShare && (
                <div className="form-field">
                  <label>Hekim payı (%)</label>
                  <input type="number" min="1" max="100" value={form.share} onChange={e => set("share", e.target.value)} placeholder="50"/>
                </div>
              )}
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Yetkili kişi</label>
                <input value={form.contact} onChange={e => set("contact", e.target.value)} placeholder="Ad Soyad"/>
              </div>
              <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>
            <div className="form-field">
              <label>Renk</label>
              <div style={{display:"flex",flexWrap:"wrap",gap:8,marginTop:4}}>
                {CLINIC_PRESET_COLORS.map(col => (
                  <button key={col} type="button" onClick={() => set("color", col)}
                    style={{width:28,height:28,borderRadius:"50%",background:col,border: form.color===col ? "3px solid var(--ink)" : "3px solid transparent",outline: form.color===col ? "2px solid "+col : "none",cursor:"pointer",transition:"transform .1s"}}
                  />
                ))}
              </div>
            </div>
          </div>
          <div className="modal__foot">
            <button type="button" className="btn btn--ghost" onClick={onClose}>İptal</button>
            <button type="submit" className="btn btn--accent">{isEdit ? "Kaydet" : "Klinik Ekle"}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Clinics({ data, onNav, onAddClinic, onEditClinic, onDeleteClinic }) {
  const { useT, Card, Tag, fmtTRY } = window.DentUI;
  const I = window.DentIcons;
  const t = useT();
  const [view, setView] = React.useState("grid");
  const [showNewClinic, setShowNewClinic] = React.useState(false);
  const [editingClinic, setEditingClinic] = React.useState(null);

  return (
    <div className="view">
      <div className="page-head">
        <div>
          <h1 className="page-title">Klinikler</h1>
          <p className="page-sub">{data.CLINICS.length} aktif klinik · {data.PATIENTS.filter(p=>p.status==="Devam ediyor").length} aktif hasta</p>
        </div>
        <div className="page-actions">
          <div className="seg">
            <button className={`seg__opt ${view==="grid"?"is-on":""}`} onClick={()=>setView("grid")}>Kart</button>
            <button className={`seg__opt ${view==="list"?"is-on":""}`} onClick={()=>setView("list")}>Liste</button>
          </div>
          <button className="btn btn--accent" onClick={() => setShowNewClinic(true)}><I.Plus size={15}/>Klinik ekle</button>
        </div>
      </div>

      {showNewClinic && (
        <NewClinicModal
          onSave={(clinic) => { onAddClinic(clinic); setShowNewClinic(false); }}
          onClose={() => setShowNewClinic(false)}
        />
      )}
      {editingClinic && (
        <NewClinicModal
          initialValues={editingClinic}
          onSave={(updated) => { onEditClinic(editingClinic.id, updated); setEditingClinic(null); }}
          onClose={() => setEditingClinic(null)}
        />
      )}

      {view === "list" && (
        <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:"var(--radius-lg)",overflow:"hidden"}}>
          <div style={{display:"grid",gridTemplateColumns:"2fr 1.2fr 1fr 1fr 1fr 1fr 1.5fr 80px",padding:"10px 16px",borderBottom:"1px solid var(--line)",fontSize:11,fontWeight:700,color:"var(--text-mute)",textTransform:"uppercase",letterSpacing:"0.05em"}}>
            <span>Klinik</span><span>İlçe</span><span>Anlaşma</span><span>Hakediş</span><span>Aktif hasta</span><span>Bu ay</span><span>Yetkili</span><span></span>
          </div>
          {data.CLINICS.map(c => {
            const earnings = data.EARNINGS_BY_CLINIC.find(e => e.clinicId === c.id) || { earned: 0, pending: 0, paid: 0 };
            const activePatients = data.PATIENTS.filter(p => p.clinicId === c.id && p.status === "Devam ediyor").length;
            const hakedis = c.contract === "Sabit" ? `₺${(c.fixedAmount||0).toLocaleString("tr-TR")}` : c.contract === "Sabit + Yüzdelik" ? `₺${(c.fixedAmount||0).toLocaleString("tr-TR")}+%${c.share}` : `%${c.share}`;
            return (
              <div key={c.id} style={{display:"grid",gridTemplateColumns:"2fr 1.2fr 1fr 1fr 1fr 1fr 1.5fr 80px",padding:"12px 16px",borderBottom:"1px solid var(--line)",alignItems:"center",fontSize:13}}>
                <span style={{display:"flex",alignItems:"center",gap:10}}>
                  <span style={{width:10,height:10,borderRadius:"50%",background:c.color,flexShrink:0}}/>
                  <span style={{fontWeight:600,color:"var(--ink)"}}>{c.name}</span>
                </span>
                <span className="muted">{c.district || c.city || "—"}</span>
                <span>{c.contract || "Standart"}</span>
                <span style={{fontFamily:"monospace",fontWeight:600,color:"var(--accent)"}}>{hakedis}</span>
                <span style={{fontWeight:600}}>{activePatients}</span>
                <span className="num" style={{color:"var(--mint)"}}>{fmtTRY(earnings.earned)}</span>
                <span style={{display:"flex",alignItems:"center",gap:6,color:"var(--text-mute)"}}>
                  <div className="avatar avatar--xs" style={{background:c.color,fontSize:10,width:24,height:24}}>
                    {c.contact ? c.contact.split(" ").map(s=>s[0]).slice(0,2).join("") : c.name.slice(0,2).toUpperCase()}
                  </div>
                  {c.contact || "—"}
                </span>
                <span style={{display:"flex",gap:4,justifyContent:"flex-end"}}>
                  <button className="icon-btn" title="Düzenle" onClick={() => setEditingClinic(c)}>
                    <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" title="Sil" style={{color:"var(--coral)"}}
                    onClick={() => { if (confirm(`"${c.name}" silinsin mi?`)) onDeleteClinic(c.id); }}>
                    <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>
            );
          })}
        </div>
      )}

      {view === "grid" && <div className="clinic-grid">
        {data.CLINICS.map(c => {
          const earnings = data.EARNINGS_BY_CLINIC.find(e => e.clinicId === c.id) || { earned: 0, pending: 0, paid: 0 };
          const activePatients = data.PATIENTS.filter(p => p.clinicId === c.id && p.status === "Devam ediyor").length;
          const contactInitials = c.contact ? c.contact.split(" ").map(s=>s[0]).slice(0,2).join("") : c.name.slice(0,2).toUpperCase();
          return (
            <div key={c.id} className="clinic-card">
              <div className="clinic-card__top" style={{background: `linear-gradient(135deg, ${c.color}28, ${c.color}05)`}}>
                <div className="clinic-card__mark" style={{background: c.color}}>
                  <I.Clinic size={20}/>
                </div>
                {c.contract === "Sabit" ? (
                  <Tag color="neutral">₺{(c.fixedAmount||0).toLocaleString("tr-TR")} sabit</Tag>
                ) : c.contract === "Sabit + Yüzdelik" ? (
                  <Tag color="neutral">₺{(c.fixedAmount||0).toLocaleString("tr-TR")} + %{c.share}</Tag>
                ) : (
                  <Tag color="neutral">%{c.share} hakediş</Tag>
                )}
              </div>
              <div className="clinic-card__body">
                <h3 className="clinic-card__name">{c.name}</h3>
                <div className="clinic-card__loc">
                  <I.MapPin size={12}/> {c.district || c.city || "—"}
                </div>
                <div className="clinic-card__contract">
                  <span className="muted">Anlaşma:</span>
                  <span>{c.contract || "Standart"}</span>
                </div>

                <div className="clinic-card__stats">
                  <div className="clinic-stat">
                    <span className="clinic-stat__l">Aktif hasta</span>
                    <span className="clinic-stat__v">{activePatients}</span>
                  </div>
                  <div className="clinic-stat">
                    <span className="clinic-stat__l">Bu ay hakediş</span>
                    <span className="clinic-stat__v num" style={{color:"var(--accent)"}}>{fmtTRY(earnings.earned)}</span>
                  </div>
                  <div className="clinic-stat">
                    <span className="clinic-stat__l">Kalan alacak</span>
                    <span className="clinic-stat__v num" style={{color: earnings.pending > 0 ? "var(--coral)" : "var(--mint)"}}>{fmtTRY(earnings.pending)}</span>
                  </div>
                </div>

                <div className="clinic-card__contact">
                  <div className="avatar avatar--xs" style={{background: c.color}}>
                    {contactInitials}
                  </div>
                  <div>
                    <div className="muted xs">Yetkili</div>
                    <div>{c.contact || "—"} · {c.phone || "—"}</div>
                  </div>
                </div>

                <div className="clinic-card__actions">
                  <button className="btn btn--ghost btn--sm" onClick={()=>onNav("patients")}>Hastalar</button>
                  <button className="btn btn--ghost btn--sm" onClick={()=>setEditingClinic(c)}>Düzenle</button>
                  <button className="btn btn--ghost btn--sm icon-only" style={{color:"var(--coral)"}}
                    onClick={() => { if (confirm(`"${c.name}" silinsin mi?`)) onDeleteClinic(c.id); }}>
                    <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>
                </div>
              </div>
            </div>
          );
        })}

        {/* Add new clinic card */}
        <button className="clinic-card clinic-card--add" onClick={() => setShowNewClinic(true)}>
          <div className="add-clinic">
            <I.Plus size={28}/>
            <span>Yeni klinik ekle</span>
            <span className="muted xs">Anlaşma şartları ve hekim payı tanımla</span>
          </div>
        </button>
      </div>}
    </div>
  );
}

window._dsClinic = Clinics;