/* =========================================================================
   Çevik Yaşam — UYGULAMA KABUĞU (masaüstü pano + mobil görünüm)
   ========================================================================= */

const NAV = [
  { id: "dashboard", label: "Dashboard", icon: "layoutGrid", group: "Genel", title: "Dashboard", sub: "Proje kısayolları · widget'lar", badge: null },
  { id: "planlama", label: "Planlama", icon: "sun", group: "Genel", title: "Planlama & Değerlendirme", sub: "Günü planla · haftayı değerlendir", badge: null },
  { id: "bugun", label: "Bugün", icon: "compass", group: "Genel", title: "Bugün", sub: "Günlük operasyon · genel rahatlık", badge: null },
  { id: "odak", label: "Odak", icon: "target", group: "Genel", title: "Odak", sub: "Sayaç + bugünün işleri · sade", badge: null },
  { id: "gorevler", label: "Görevler", icon: "inbox", group: "Genel", title: "Görevler", sub: "Ana liste · kategori › proje › todo", badge: null },
  { id: "seyir", label: "Seyir Defteri", icon: "fileText", group: "Genel", title: "Kaptanın Seyir Defteri", sub: "Günlük takip · örüntüler", badge: null },
  { id: "butce", label: "Bütçe", icon: "scale", group: "Genel", title: "Bütçe & Nakit Akışı", sub: "Hesaplar · gelir/gider · borçlar", badge: null },
  { id: "oncelik", label: "Öncelik", icon: "flag", group: "Organize Et", title: "Önceliklendirme", sub: "Hızlı triyaj · kesinlikle yap", badge: null },
  { id: "projeler", label: "Projeler", icon: "grid", group: "Organize Et", title: "Projeler", sub: "Grup › proje › alt proje · hızlı ekle", badge: null },
  { id: "tarihler", label: "Tarihler", icon: "calendarHeart", group: "Organize Et", title: "Tarihler", sub: "Kritik tarihler · takvim baskısı", badge: null },
  { id: "rutinler", label: "Rutinler", icon: "repeat", group: "Organize Et", title: "Rutinler", sub: "Tekrar eden işler · ritmin iskeleti", badge: null },
  { id: "hafta", label: "Hafta Değerlendirme", icon: "repeat", group: "Organize Et", title: "Hafta Değerlendirme", sub: "Sadeleş · öğren · tasarla", badge: null },
  { id: "portfoy", label: "Portföy", icon: "grid", group: "Araçlar", title: "Platform portföyü", sub: "23 platform · 9 sektör · 5 pazar", badge: null },
  { id: "matris", label: "Matris", icon: "scale", group: "Araçlar", title: "Öncelik matrisi", sub: "Yükte hafif, pahada ağır", badge: null },
  { id: "mesafe", label: "Mesafeler", icon: "orbit", group: "Araçlar", title: "Mesafeler", sub: "Deneyim kainatı · park & çalışma", badge: null },
  { id: "engeller", label: "Engeller", icon: "shieldAlert", group: "Araçlar", title: "Engeller", sub: "Zihinsel modeller · 5 neden", badge: null },
  { id: "ogrenme", label: "Öğrenme", icon: "trendingUp", group: "Araçlar", title: "Öğrenme", sub: "Bilmek değil, yapabilmek", badge: null },
];
const NAV_GROUPS = [
  { key: "Genel", collapsible: false },
  { key: "Organize Et", collapsible: false },
  { key: "Araçlar", collapsible: true, defaultCollapsed: true },
];
const VIEWS = { dashboard: Dashboard, bugun: Bugun, odak: Odak, gorevler: Gorevler, oncelik: Oncelik, projeler: Projeler, planlama: Planlama, tarihler: Tarihler, butce: Butce, rutinler: Rutinler, seyir: SeyirDefteri, hafta: Hafta, portfoy: Portfoy, matris: Matris, mesafe: Mesafe, engeller: Engeller, ogrenme: Ogrenme, ayarlar: Ayarlar };
const META_EXTRA = { ayarlar: { title: "Ayarlar", sub: "Yapılandırma" } };

/* AM/PM canlı saat */
function Clock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000 * 30); return () => clearInterval(id); }, []);
  let h = now.getHours();
  const m = String(now.getMinutes()).padStart(2, "0");
  const ap = h < 12 ? "AM" : "PM";
  h = h % 12; if (h === 0) h = 12;
  return <span className="cy-clock"><Icon name="clock" style={{ width: 14 }} />{h}:{m} <span style={{ color: "var(--ml-ink-4)" }}>{ap}</span></span>;
}

/* ---------- HASH ROUTER (her sayfa ayrı URL) ---------- */
function cyParseHash() {
  const raw = (location.hash || "").replace(/^#\/?/, "");
  if (!raw) return { page: "dashboard" };
  const parts = raw.split("/").filter(Boolean);
  if (parts[0] === "gorev" && parts[1]) return { page: "gorev", id: decodeURIComponent(parts.slice(1).join("/")) };
  return { page: parts[0] };
}
function useRoute() {
  const [r, setR] = useState(cyParseHash);
  useEffect(() => {
    const on = () => setR(cyParseHash());
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return r;
}
function cyNav(page) { const h = "#/" + page; if (location.hash !== h) location.hash = h; }
function cyNavTask(id) { location.hash = "#/gorev/" + encodeURIComponent(id); }

/* ---------- DESKTOP ŞELL ---------- */
function Desktop({ route, view, setView }) {
  const page = route.page;
  const isTask = page === "gorev";
  const meta = isTask
    ? { title: "Görev detayı", sub: "Tam fonksiyon · odak · ertele · tamamla" }
    : (NAV.find((n) => n.id === page) || META_EXTRA[page] || { title: page, sub: "" });
  const View = VIEWS[page];
  const [collapsed, setCollapsed] = useStore("sidebar-collapsed", false);
  const [groupOpen, setGroupOpen] = useStore("nav-groups", { "Araçlar": false });
  return (
    <div className={"cy-app" + (collapsed ? " side-collapsed" : "")}>
      <aside className="cy-side">
        <div className="cy-brand">
          <img src="assets/logo_white.png" alt="Multiligo" />
          <div className="cy-brand-sub">Çevik<br />Yaşam</div>
        </div>
        <button className="cy-side-toggle" onClick={() => setCollapsed((c) => !c)} title={collapsed ? "Menüyü aç" : "Menüyü daralt"}>
          <Icon name={collapsed ? "chevronRight" : "chevronLeft"} />
        </button>
        <nav className="cy-nav cy-scroll" style={{ overflowY: "auto" }}>
          {NAV_GROUPS.map((grp) => {
            const items = NAV.filter((n) => n.group === grp.key);
            const isOpen = !grp.collapsible || groupOpen[grp.key] !== false;
            return (
              <React.Fragment key={grp.key}>
                {grp.collapsible
                  ? <button className="cy-nav-group-label cy-nav-group-toggle" onClick={() => setGroupOpen((o) => ({ ...o, [grp.key]: !isOpen }))}>
                      <Icon name="chevronDown" style={{ width: 12, transform: isOpen ? "none" : "rotate(-90deg)", transition: "transform .2s" }} />{grp.key}
                    </button>
                  : <div className="cy-nav-group-label">{grp.key}</div>}
                {isOpen && items.map((n) => (
                  <button key={n.id} className={"cy-nav-item" + (page === n.id ? " active" : "")} onClick={() => cyNav(n.id)} title={n.label}>
                    <Icon name={n.icon} className="cy-nav-ic" />
                    <span className="lbl">{n.label}</span>
                    {n.badge && <span className="cy-nav-badge">{n.badge}</span>}
                  </button>
                ))}
              </React.Fragment>
            );
          })}
        </nav>
        <div className="cy-side-foot">
          <div className="cy-user">
            <div className="cy-ava">{CY.user.initials}</div>
            <div className="cy-user-meta"><b>{CY.user.name}</b><span>{CY.user.role}</span></div>
            <button className="cy-iconbtn" title="Çıkış" style={{ marginLeft: "auto" }}
              onClick={async () => { try { await fetch("/api/logout", { method: "POST" }); } catch (e) {} location.reload(); }}>
              <Icon name="lock" />
            </button>
          </div>
        </div>
      </aside>

      <main className="cy-main">
        <header className="cy-topbar">
          <div>
            <h1>{meta.title}</h1>
            <div className="cy-tb-sub">{meta.sub}</div>
          </div>
          <div className="cy-tb-spacer" />
          <Clock />
          <span className="cy-tb-week">{CY.today.week}</span>
          <button className={"cy-iconbtn" + (page === "ayarlar" ? " on" : "")} onClick={() => cyNav("ayarlar")} title="Ayarlar"><Icon name="settings" /></button>
          <button className="cy-iconbtn"><Icon name="bell" /></button>
          <div className="cy-viewtoggle">
            <button className={view === "desktop" ? "on" : ""} onClick={() => setView("desktop")}><Icon name="monitor" className="ic" />Pano</button>
            <button className={view === "mobile" ? "on" : ""} onClick={() => setView("mobile")}><Icon name="smartphone" className="ic" />Mobil</button>
          </div>
        </header>
        {isTask ? <GorevDetay id={route.id} /> : (View ? <View /> : <Dashboard />)}
      </main>
    </div>
  );
}

/* ---------- MOBİL GÖRÜNÜM ---------- */
function MobileHome() {
  const [stress, setStress] = useStore("stress", CY.stressNow);
  const [tasks, setTasks] = useStore("tasks", CY.todayTasks);
  const [ritual, setRitual] = useState(null);
  const list = tasks.filter((t) => !t.archived);
  const done = list.filter((t) => t.done).length;
  const toggle = (task) => {
    setTasks((ts) => ts.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t)));
  };
  return (
    <div>
      <Card style={{ padding: 18 }}>
        <div className="cy-between">
          <Eyebrow>Genel rahatlık</Eyebrow>
          <Btn variant="ghost" size="sm" icon="wind" onClick={() => setRitual({ type: "toplu" })}>Uzaklaştır</Btn>
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
          <span style={{ fontSize: 36, fontWeight: 700, color: stressColor(stress), letterSpacing: "-0.02em" }}>{stress}</span>
          <span className="cy-muted" style={{ fontSize: 13 }}>/10 · {stressLabel(stress)}</span>
        </div>
        <StressMeter value={stress} onChange={setStress} />
      </Card>

      <div className="cy-between" style={{ margin: "20px 2px 12px" }}>
        <h4 className="cy-h4">Bugünün işleri</h4>
        <span className="cy-muted cy-mono" style={{ fontSize: 12 }}>{done}/{list.length}</span>
      </div>
      <div className="cy-stack" style={{ gap: 9 }}>
        {list.map((t) => (
          <div key={t.id} className={"cy-task" + (t.done ? " done" : "")} style={{ padding: 13 }}>
            <button className={"cy-check" + (t.done ? " on" : "")} onClick={() => toggle(t)}><Icon name="check" className="ic" /></button>
            <div className="cy-task-body">
              <div className="cy-task-title" style={{ fontSize: 14 }}>{t.title}</div>
              <div className="cy-task-meta"><ProjTag id={t.project} /></div>
            </div>
          </div>
        ))}
      </div>

      <h4 className="cy-h4" style={{ margin: "22px 2px 12px" }}>İçeri sinyalleri</h4>
      <Card style={{ padding: "4px 16px" }}>
        {CY.reminders.slice(0, 3).map((r) => (
          <div className="cy-rem" key={r.id}>
            <div className="cy-rem-ic" style={r.tone === "red" ? { background: "var(--ml-red-050)", color: "var(--ml-red)" } : r.tone === "warn" ? { background: "var(--ml-warn-bg)", color: "var(--ml-warn)" } : null}><Icon name={({ wind: "wind", gauge: "gauge", "calendar-heart": "calendarHeart", anchor: "anchor" })[r.icon] || "info"} className="ic" /></div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{r.title}</div><div className="cy-muted" style={{ fontSize: 12, marginTop: 2, lineHeight: 1.4 }}>{r.body}</div></div>
          </div>
        ))}
      </Card>
      {ritual?.type === "toplu" && <TopluUzaklastirma stress={stress} setStress={setStress} onClose={() => setRitual(null)} />}
    </div>
  );
}

function MobileHafta() {
  const wk = CY.today.week;
  const [data, setData] = useStore("week-journal-" + wk, { intent: "", braindump: "", simplify: "", experiment: "", learned: "", mood: 0 });
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const fields = [
    { k: "braindump", t: "Zihin boşaltma", ic: "brain", ph: "Kafanda ne dönüyorsa dök…", rows: 4 },
    { k: "simplify", t: "Neyi bırakıyorum?", ic: "scale", ph: "Bu hafta çıkaracağım bir yük…", rows: 2 },
    { k: "intent", t: "Bu haftanın tek niyeti", ic: "target", ph: "Tek cümle…", rows: 2 },
    { k: "experiment", t: "Bu haftanın tek deneyi", ic: "zap", ph: "Şunu denersem ne olur?", rows: 2 },
    { k: "learned", t: "Ne öğrendim?", ic: "graduationCap", ph: "Bu haftadan çıkardığım…", rows: 2 },
  ];
  return (
    <div>
      <Card className="tint" style={{ padding: 14, marginBottom: 16, textAlign: "center" }}>
        <span className="cy-eyebrow">Sadeleş · düşün · bir şey dene</span>
      </Card>
      <div className="cy-stack" style={{ gap: 14 }}>
        {fields.map((f) => (
          <Card key={f.k} style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
              <Icon name={f.ic} style={{ width: 16, color: "var(--ml-red)" }} /><h4 className="cy-h4" style={{ fontSize: 14 }}>{f.t}</h4>
            </div>
            <textarea className="cy-textarea" rows={f.rows} placeholder={f.ph} value={data[f.k]} onChange={(e) => set(f.k, e.target.value)} />
          </Card>
        ))}
      </div>
    </div>
  );
}

function MobileProfile() {
  const byFocus = (f) => CY.platforms.filter((p) => p.focus === f).length;
  return (
    <div>
      <Card className="tint" style={{ padding: 18 }}>
        <Eyebrow>Şu an neredeyim</Eyebrow>
        <div className="cy-prose" style={{ fontSize: 14, marginTop: 10 }}>{CY.general.whereami}</div>
      </Card>

      <h4 className="cy-h4" style={{ margin: "20px 2px 12px" }}>Platform portföyü</h4>
      <Card style={{ padding: 16 }}>
        <div className="cy-between" style={{ marginBottom: 12 }}>
          <span className="cy-muted" style={{ fontSize: 12.5 }}>23 platform · 9 sektör · 5 pazar</span>
          <Pill tone="green" dot>{byFocus("Aktif odak")} odak</Pill>
        </div>
        <div className="cy-stack" style={{ gap: 8 }}>
          {CY.sectors.map((s) => {
            const n = CY.platforms.filter((p) => p.sec === s.key).length;
            return (
              <div key={s.key} className="cy-between" style={{ fontSize: 13 }}>
                <span style={{ display: "flex", gap: 8, alignItems: "center" }}><i style={{ width: 9, height: 9, borderRadius: 2, background: s.color }} />{s.label}</span>
                <span className="cy-mono cy-muted" style={{ fontSize: 12 }}>{n}</span>
              </div>
            );
          })}
        </div>
      </Card>

      <h4 className="cy-h4" style={{ margin: "20px 2px 12px" }}>Değerlerim</h4>
      <div className="cy-stack" style={{ gap: 9 }}>
        {CY.values.map((v) => (
          <Card key={v.id} style={{ padding: 14 }}><b style={{ fontSize: 14 }}>{v.label}</b><div className="cy-muted" style={{ fontSize: 12.5, marginTop: 3 }}>{v.note}</div></Card>
        ))}
      </div>
    </div>
  );
}

function Mobile({ setView }) {
  const [tab, setTab] = useState("bugun");
  const tabs = [
    { id: "bugun", label: "Bugün", icon: "compass" },
    { id: "hafta", label: "Hafta", icon: "repeat" },
    { id: "mesafe", label: "Mesafe", icon: "orbit" },
    { id: "profil", label: "Profil", icon: "circleDot" },
  ];
  const heads = { bugun: "Günaydın, " + CY.user.name, hafta: "Haftalık döngü", mesafe: "Deneyim kainatı", profil: CY.user.name };
  return (
    <div className="cy-device-wrap">
      <div style={{ position: "fixed", top: 20, right: 24, zIndex: 60 }}>
        <div className="cy-viewtoggle" style={{ background: "var(--ml-card)", boxShadow: "var(--ml-shadow-2)" }}>
          <button onClick={() => setView("desktop")}><Icon name="monitor" className="ic" />Pano</button>
          <button className="on"><Icon name="smartphone" className="ic" />Mobil</button>
        </div>
      </div>
      <div className="cy-phone">
        <div className="cy-notch" />
        <div className="cy-phone-screen">
          <div className="cy-m-status">
            <span>9:41</span>
            <span style={{ display: "flex", gap: 5, alignItems: "center" }}>
              <Icon name="zap" style={{ width: 14 }} /><Icon name="bell" style={{ width: 14 }} />
            </span>
          </div>
          <div className="cy-m-head">
            <div className="cy-eyebrow">{CY.today.label}</div>
            <h2 style={{ font: "700 24px/1.1 var(--ml-font-sans)", letterSpacing: "-0.02em", margin: "5px 0 0" }}>{heads[tab]}</h2>
          </div>
          <div className="cy-m-body cy-scroll cy-fade-in" key={tab}>
            {tab === "bugun" && <MobileHome />}
            {tab === "hafta" && <MobileHafta />}
            {tab === "mesafe" && <Card style={{ padding: 16 }}><DeneyimKainati /></Card>}
            {tab === "profil" && <MobileProfile />}
          </div>
          <div className="cy-m-tabbar">
            {tabs.map((t) => (
              <button key={t.id} className={"cy-m-tab" + (tab === t.id ? " on" : "")} onClick={() => setTab(t.id)}>
                <Icon name={t.icon} className="ic" /><span>{t.label}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- KÖK ---------- */
function App() {
  const [onboarded, setOnboarded] = useStore("onboarded", false);
  const [view, setView] = useStore("view", "desktop");
  const route = useRoute();
  useEffect(() => {
    window.cyGoto = (id) => cyNav(id);
    window.cyGotoTask = (id) => cyNavTask(id);
    if (!location.hash) location.replace("#/" + route.page);
    return () => { delete window.cyGoto; delete window.cyGotoTask; };
  }, []);
  if (!onboarded) return <Onboarding onDone={() => setOnboarded(true)} />;
  return view === "mobile"
    ? <Mobile setView={setView} />
    : <Desktop route={route} view={view} setView={setView} />;
}

/* Veri (window.CY) DB'den /api/data ile asenkron gelir; hazır olunca mount et.
   Hata olursa data.js zaten #root içine hata ekranını basar. */
(window.CY_READY || Promise.resolve()).then(() => {
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
}).catch((e) => { console.error("Çevik Yaşam başlatılamadı:", e); });