/* =========================================================================
   Çevik Yaşam — PROJELER (basit hızlı ekleme: grup › proje › alt proje)
   Üstte seç, altta o projeye doğrudan görev / tarih ekle.
   ========================================================================= */

function Projeler() {
  const T = useCollection("tasks", CY.todayTasks);
  const D = useCollection("critical-dates", CY.criticalDatesDefault);
  const [grp, setGrp] = useState(CY.groups[0] ? CY.groups[0].key : "");
  const projsInGrp = CY.projects.filter((p) => p.group === grp);
  const [proj, setProj] = useState(projsInGrp[0] ? projsInGrp[0].id : "");
  const subs = CY.subsOf(proj);
  const [sub, setSub] = useState("");
  const [tab, setTab] = useState("gorev"); // gorev | tarih
  // form alanları
  const [tTitle, setTTitle] = useState("");
  const [tPrio, setTPrio] = useState(3);
  const [tToday, setTToday] = useState(false);
  const [tDue, setTDue] = useState("");
  const [dTitle, setDTitle] = useState("");
  const [dDate, setDDate] = useState("");
  const [dKind, setDKind] = useState("Teslim");
  const [toast, setToast] = useState(null);

  const onGrp = (k) => { setGrp(k); const ps = CY.projects.filter((p) => p.group === k); setProj(ps[0] ? ps[0].id : ""); setSub(""); };
  const onProj = (id) => { setProj(id); setSub(""); };

  const flash = (m) => { setToast(m); setTimeout(() => setToast(null), 2200); };

  const addTask = () => {
    if (!tTitle.trim() || !proj) return;
    T.add({ title: tTitle.trim(), project: proj, sub: sub || undefined, prio: tPrio, due: tDue.trim() || null, today: tToday, done: false, block: "Normal", checklist: [], deferCount: 0 });
    setTTitle(""); setTDue(""); setTToday(false); flash("Görev eklendi ✓");
  };
  const addDate = () => {
    if (!dTitle.trim() || !dDate.trim() || !proj) return;
    D.add({ title: dTitle.trim(), date: dDate.trim(), project: proj, kind: dKind, note: "" });
    setDTitle(""); setDDate(""); flash("Tarih eklendi ✓");
  };

  // bu projedeki mevcut görev/tarih sayıları
  const projTasks = T.active.filter((t) => t.project === proj && (!sub || t.sub === sub));
  const projDates = D.active.filter((d) => d.project === proj);

  return (
    <div className="cy-canvas narrow cy-fade-in">
      <SectionHead eyebrow="Hızlı organizasyon"
        title="Projeler"
        sub="Önce grubu, projeyi ve (varsa) alt projeyi seç; sonra doğrudan görev ya da kritik tarih ekle. Hızlı, tek ekran." />

      {/* SEÇİCİLER */}
      <Card>
        <div className="cy-proj-pick">
          <div className="cy-field" style={{ marginBottom: 0 }}>
            <label className="cy-label">Grup</label>
            <select className="cy-input" value={grp} onChange={(e) => onGrp(e.target.value)}>
              {CY.groups.map((g) => <option key={g.key} value={g.key}>{g.label}</option>)}
            </select>
          </div>
          <div className="cy-field" style={{ marginBottom: 0 }}>
            <label className="cy-label">Proje</label>
            <select className="cy-input" value={proj} onChange={(e) => onProj(e.target.value)}>
              {projsInGrp.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
              {!projsInGrp.length && <option value="">— proje yok —</option>}
            </select>
          </div>
          <div className="cy-field" style={{ marginBottom: 0 }}>
            <label className="cy-label">Alt proje <span className="cy-muted" style={{ fontWeight: 400 }}>· ops.</span></label>
            <select className="cy-input" value={sub} onChange={(e) => setSub(e.target.value)} disabled={!subs.length}>
              <option value="">{subs.length ? "Tümü / yok" : "Alt proje yok"}</option>
              {subs.map((s) => <option key={s.id} value={s.id}>{CY.subKind(s.kind).short} · {s.name}</option>)}
            </select>
          </div>
        </div>
        {proj && (
          <div style={{ display: "flex", gap: 8, marginTop: 14, alignItems: "center", flexWrap: "wrap" }}>
            <span className="cy-proj-tag"><i className="cy-proj-dot" style={{ background: CY.proj(proj).color }} />{CY.proj(proj).name}</span>
            <span className="cy-muted" style={{ fontSize: 12.5 }}>{projTasks.length} açık/aktif görev · {projDates.length} tarih</span>
          </div>
        )}
      </Card>

      {/* EKLEME SEKMESİ */}
      <div className="cy-seg" style={{ margin: "18px 0 14px" }}>
        <button className={"cy-choice" + (tab === "gorev" ? " on" : "")} onClick={() => setTab("gorev")}><Icon name="inbox" style={{ width: 14 }} /> Görev ekle</button>
        <button className={"cy-choice" + (tab === "tarih" ? " on" : "")} onClick={() => setTab("tarih")}><Icon name="calendarHeart" style={{ width: 14 }} /> Tarih ekle</button>
      </div>

      {tab === "gorev" ? (
        <Card>
          <div className="cy-field">
            <label className="cy-label">Görev</label>
            <input className="cy-input" placeholder="Ne yapılacak?" value={tTitle} onChange={(e) => setTTitle(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addTask()} autoFocus />
          </div>
          <div className="cy-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 0, columnGap: 16 }}>
            <div className="cy-field">
              <label className="cy-label">Öncelik</label>
              <div className="cy-seg" style={{ flexWrap: "wrap" }}>
                {CY.prioLevels.map((p) => <button key={p.v} className={"cy-choice" + (tPrio === p.v ? " on" : "")} onClick={() => setTPrio(p.v)} style={tPrio === p.v ? { background: p.color, borderColor: p.color, color: "#fff" } : null}>{p.short}</button>)}
              </div>
            </div>
            <div className="cy-field">
              <label className="cy-label">Tarih <span className="cy-muted" style={{ fontWeight: 400 }}>· ops.</span></label>
              <input className="cy-input" type="date" value={tDue} onChange={(e) => setTDue(e.target.value)} />
            </div>
          </div>
          <label className="cy-dl-check" onClick={() => setTToday(!tToday)}>
            <span className={"cy-check" + (tToday ? " on" : "")} style={{ marginTop: 0 }}><Icon name="check" className="ic" /></span>
            <span style={{ fontSize: 13.5 }}>Bugüne de ekle</span>
          </label>
          <Btn variant="primary" icon="plus" onClick={addTask} style={{ marginTop: 12, opacity: tTitle.trim() ? 1 : .5, pointerEvents: tTitle.trim() ? "auto" : "none" }}>Görevi ekle</Btn>
        </Card>
      ) : (
        <Card>
          <div className="cy-field">
            <label className="cy-label">Ne / kim</label>
            <input className="cy-input" placeholder="örn. Müşteri teslimi" value={dTitle} onChange={(e) => setDTitle(e.target.value)} autoFocus />
          </div>
          <div className="cy-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 0, columnGap: 16 }}>
            <div className="cy-field">
              <label className="cy-label">Tarih</label>
              <input className="cy-input" type="date" value={dDate} onChange={(e) => setDDate(e.target.value)} />
            </div>
            <div className="cy-field">
              <label className="cy-label">Tür</label>
              <select className="cy-input" value={dKind} onChange={(e) => setDKind(e.target.value)}>
                {["Teslim", "Etkinlik", "Lansman", "Sunum", "Deadline", "Toplantı"].map((k) => <option key={k} value={k}>{k}</option>)}
              </select>
            </div>
          </div>
          <Btn variant="primary" icon="plus" onClick={addDate} style={{ opacity: (dTitle.trim() && dDate.trim()) ? 1 : .5, pointerEvents: (dTitle.trim() && dDate.trim()) ? "auto" : "none" }}>Tarihi ekle</Btn>
        </Card>
      )}

      {/* bu projedeki görevler — TAM FONKSİYON (odak · ertele · tamamla · düzenle · detay) */}
      {proj && (
        <div style={{ marginTop: 22 }}>
          <div className="cy-between" style={{ marginBottom: 10 }}>
            <Eyebrow>Bu projedeki görevler{sub ? " · " + CY.subKind((CY.subproj(sub) || {}).kind).short : ""}</Eyebrow>
            <span className="cy-muted cy-mono" style={{ fontSize: 12 }}>{projTasks.length}</span>
          </div>
          <TaskListFull tasks={[...projTasks].sort(cyTaskCmp)} coll={T}
            empty="Bu projede görev yok. Yukarıdan ekle." />
          <Btn variant="ghost" size="sm" iconRight="arrowRight" onClick={() => window.cyGoto("gorevler")} style={{ marginTop: 12, color: "var(--ml-red)" }}>Tüm görevlerde aç</Btn>
        </div>
      )}

      {toast && <div className="cy-toast">{toast}</div>}
    </div>
  );
}

Object.assign(window, { Projeler });