/* 아리 — 대시보드(벤토) · RON 디자인 언어 */
const { useState, useEffect, useRef } = React;
const D = window.AriData;

/* ---------- 아이콘 ---------- */
const P = {
  spark: "M12 3l1.9 5.2L19 10l-5.1 1.8L12 17l-1.9-5.2L5 10l5.1-1.8z|M19 4v3|M5 17v3",
  grid: "M3 3h7v7H3z|M14 3h7v7h-7z|M14 14h7v7h-7z|M3 14h7v7H3z",
  route: "M6 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M18 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M9 16h6a3 3 0 0 0 3-3V11",
  cal: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
  check: "M9 11l3 3L22 4|M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
  tick: "M20 6 9 17l-5-5",
  mail: "M22 7 13.03 12.7a1.94 1.94 0 0 1-2.06 0L2 7|M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
  target: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z|M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z|M12 12h.01",
  heart: "M19 14c1.5-1.5 3-3.4 3-5.5A4.5 4.5 0 0 0 12 5.5 4.5 4.5 0 0 0 2 8.5c0 2.1 1.5 4 3 5.5l7 7z",
  wallet: "M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5|M16 12h.01",
  brain: "M12 5a3 3 0 1 0-5.9.8A3 3 0 0 0 4 9.5 3 3 0 0 0 6 14a3 3 0 0 0 6 1zM12 5a3 3 0 1 1 5.9.8A3 3 0 0 1 20 9.5 3 3 0 0 1 18 14a3 3 0 0 1-6 1z|M12 5v14",
  zap: "M13 2 3 14h9l-1 8 10-12h-9z",
  more: "M5 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zM11 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zM17 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0z",
  search: "M21 21l-4.34-4.34|M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z",
  bell: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9|M10.3 21a1.94 1.94 0 0 0 3.4 0",
  sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z|M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4",
  moon: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z",
  video: "M23 7l-7 5 7 5zM1 5h15a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H1a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z",
  send: "M22 2 11 13|M22 2 15 22l-4-9-9-4z",
  up: "M12 19V5|M5 12l7-7 7 7",
  foot: "M4 16c0-2 .5-4 2-4s2 1 2 3 .5 4-1 4-3-1-3-3z|M8 7c0-2 .5-3 1.5-3S11 5 11 7s0 3-1.5 3S8 9 8 7z|M14 16c0-2-.5-4-2-4s-2 1-2 3-.5 4 1 4 3-1 3-3z|M16 7c0-2-.5-3-1.5-3S13 5 13 7s0 3 1.5 3S16 9 16 7z",
  drop: "M12 2.7S5 10 5 14a7 7 0 0 0 14 0c0-4-7-11.3-7-11.3z",
  zzz: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z|M16 4h4l-4 4h4",
  pin: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z|M12 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z|M14 2v6h6",
  pen: "M12 20h9|M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z",
  bookmark: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
  plus: "M12 5v14|M5 12h14",
  share: "M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7|M16 6l-4-4-4 4|M12 2v13",
  back: "M19 12H5|M12 19l-7-7 7-7",
};
function I({ d, w }) {
  return (
    <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={w || 1.9} strokeLinecap="round" strokeLinejoin="round">
      {P[d].split("|").map((s, i) => <path key={i} d={s} />)}
    </svg>
  );
}

/* ---------- 색 ---------- */
const C = { blue: "#83a2db", blueD: "#6286c9", red: "#ce6969", navy: "#10141a", teal: "#5fa6a0", mauve: "#9c8bcb" };
const TONE = { blue: C.blue, violet: C.mauve, coral: C.red, green: C.teal };

/* ---------- 네비 ---------- */
const NAV = [
  { id: "dash", label: "대시보드", icon: "grid", href: "아리 대시보드 (RON).html" },
  { id: "journey", label: "여정", icon: "route", href: "아리 대시보드 (RON v2).html" },
  { id: "cal", label: "일정", icon: "cal", href: "#" },
  { id: "task", label: "작업", icon: "check", badge: "4", href: "#" },
  { id: "mail", label: "메일", icon: "mail", href: "#" },
  { id: "life", label: "라이프", icon: "heart", href: "#" },
];
const RAIL = [
  { icon: "back", label: "뒤로" }, { sep: true },
  { icon: "grid", label: "오늘 개요", active: true },
  { icon: "cal", label: "일정" },
  { icon: "check", label: "할 일" },
  { icon: "target", label: "목표" },
  { icon: "heart", label: "건강" },
  { icon: "wallet", label: "지출" },
  { icon: "zap", label: "자동화" },
  { sep: true },
  { icon: "plus", label: "추가" },
];
const CHIPS = [
  { icon: "cal", text: "내일 오후 비워줘" },
  { icon: "mail", text: "중요 메일만 요약" },
  { icon: "video", text: "14시 미팅 준비" },
];
const PRIO = { 높음: "high", 보통: "mid", 낮음: "low" };
const AVCOL = [C.navy, C.red, C.blue];
const KICON = { file: "file", pen: "pen", bookmark: "bookmark" };

function App() {
  const [theme, setTheme] = useState("light");
  const [tasks, setTasks] = useState(D.tasks);
  const [autos, setAutos] = useState(D.automations);
  const ref = useRef(null);

  useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
  useEffect(() => {
    const el = ref.current;
    const id = requestAnimationFrame(() => el && el.classList.add("enter"));
    return () => cancelAnimationFrame(id);
  }, []);

  const toggle = (id) => setTasks((t) => t.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
  const toggleAuto = (i) => setAutos((a) => a.map((x, j) => (j === i ? { ...x, on: !x.on } : x)));
  const openCount = tasks.filter((t) => !t.done).length;

  return (
    <div className="app" ref={ref}>
      {/* ===== 상단바 ===== */}
      <header className="top">
        <div className="brand">
          <div className="brand-mark"><I d="spark" /></div>
          <span className="brand-name">아리</span>
        </div>
        <nav className="nav">
          {NAV.map((m) => (
            <a key={m.id} href={m.href} className={m.id === "dash" ? "active" : ""}>
              <I d={m.icon} />{m.label}
              {m.badge && <span className="badge">{m.badge}</span>}
            </a>
          ))}
        </nav>
        <div className="top-actions">
          <button className="circ" aria-label="검색"><I d="search" /></button>
          <button className="circ dot" aria-label="메일"><I d="mail" /></button>
          <button className="circ dot" aria-label="알림"><I d="bell" /></button>
          <button className="circ" aria-label="테마" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
            <I d={theme === "light" ? "moon" : "sun"} />
          </button>
          <div className="avatar">{D.user.initial}</div>
        </div>
      </header>

      {/* ===== 무대 ===== */}
      <div className="stage">
        <aside className="rail">
          {RAIL.map((r, i) =>
            r.sep ? <span className="sep" key={i} /> : (
              <button key={i} className={r.active ? "active" : ""} aria-label={r.label}>
                <I d={r.icon} /><span className="tip">{r.label}</span>
              </button>
            )
          )}
        </aside>

        <main className="main">
          {/* 페이지 헤더 */}
          <div className="pagehead">
            <div className="ph-titles">
              <h1 className="ph-title">좋은 아침이에요, {D.user.name}님</h1>
              <p className="ph-sub">{D.today} · 일정 <b>4건</b> · 할 일 <b>{openCount}개</b> · 메일 <b>{D.emailCount}통</b></p>
            </div>
            <div className="ph-right">
              <div className="ph-weather"><I d="sun" /><b>{D.weather.temp}°</b> {D.weather.cond}</div>
            </div>
          </div>

          {/* ===== 벤토 ===== */}
          <div className="bento">
            {/* 히어로 — 브리핑 + 명령 */}
            <section className="hero2 span2">
              <span className="hero-spark"><I d="spark" />아리 브리핑</span>
              <p className="brief2" dangerouslySetInnerHTML={{ __html: D.briefingNote }} />
              <div className="qchips">
                {CHIPS.map((c, i) => <button className="qchip" key={i}><I d={c.icon} />{c.text}</button>)}
              </div>
              <div className="cmd2">
                <I d="spark" />
                <input placeholder="오늘 하루, 무엇이든 맡겨보세요…" />
                <button className="send" aria-label="보내기"><I d="send" /></button>
              </div>
            </section>

            {/* 오늘 일정 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="cal" /></div>
                <div><div className="wtitle">오늘 일정</div><div className="wsub">4개 · 다음까지 2시간</div></div>
                <button className="wtool"><I d="more" /></button>
              </div>
              <div className="tl">
                {D.schedule.map((e, i) => (
                  <div className="tl-row" key={i}>
                    <div className="tl-time">{e.time}</div>
                    <div className="tl-body" style={{ "--accent": TONE[e.tone] }}>
                      <div className="tl-title">{e.title}</div>
                      <div className="tl-meta"><span>{e.tag}</span><span className="dur">{e.dur}</span></div>
                    </div>
                    {e.soon && <span className="tl-soon">곧</span>}
                  </div>
                ))}
                <div className="tl-note"><I d="bell" />{D.conflict}</div>
              </div>
            </section>

            {/* 할 일 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="check" /></div>
                <div className="wtitle">할 일</div>
                <span className="wcount">{openCount}개 남음</span>
              </div>
              <div className="tlist">
                {tasks.map((t, idx) => {
                  const focus = !t.done && idx === 0;
                  return (
                    <div key={t.id} className={"trow" + (t.done ? " done" : "")} onClick={() => toggle(t.id)}>
                      <div className="tbox"><I d="tick" w="3" /></div>
                      <div className="tbody"><div className="tt2">{t.title}</div><div className="tm2">{t.project}</div></div>
                      {focus ? <span className="tnow">지금</span> : !t.done && <span className={"tprio " + PRIO[t.prio]}>{t.prio}</span>}
                    </div>
                  );
                })}
              </div>
            </section>

            {/* 이번 주 집중도 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="zap" /></div>
                <div><div className="wtitle">이번 주 집중도</div><div className="wsub">딥 워크 시간</div></div>
              </div>
              <div className="fstat">
                <b>27.4</b><span className="u">시간</span>
                <span className="delta"><I d="up" />+12%</span>
              </div>
              <div className="chart2">
                <svg viewBox="0 0 300 88" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor={C.blue} stopOpacity="0.34" />
                      <stop offset="1" stopColor={C.blue} stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path d="M6 64 L48 52 L90 58 L132 34 L174 42 L216 20 L258 30 L294 14 L294 88 L6 88 Z" fill="url(#fg)" />
                  <polyline points="6,64 48,52 90,58 132,34 174,42 216,20 258,30 294,14"
                    fill="none" stroke={C.blueD} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round" />
                  <circle cx="216" cy="20" r="4.2" fill={C.red} stroke="var(--card)" strokeWidth="2.5" />
                </svg>
                <div className="chart-x">{["월","화","수","목","금","토","일"].map((d) => <span key={d}>{d}</span>)}</div>
              </div>
            </section>

            {/* 목표 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="target" /></div>
                <div className="wtitle">목표</div>
              </div>
              <div className="goals2">
                {D.goals.map((g, i) => {
                  const col = [C.blue, C.red, C.mauve][i % 3];
                  return (
                    <div key={i}>
                      <div className="goal2-top"><span className="goal2-title">{g.title}</span><span className="goal2-pct">{g.pct}%</span></div>
                      <div className="gbar"><i style={{ width: g.pct + "%", background: col }} /></div>
                      <div className="gsub2">{g.sub}</div>
                    </div>
                  );
                })}
              </div>
            </section>

            {/* 미팅 준비 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="video" /></div>
                <div className="wtitle">미팅 준비</div>
              </div>
              <div className="mtg-when"><b>{D.meeting.title}</b> · {D.meeting.when}</div>
              <div className="mtg-ppl">
                {D.meeting.people.slice(0, 3).map((p, i) => <div className="av" key={i} style={{ background: AVCOL[i] }}>{p[0]}</div>)}
                <span className="more">{D.meeting.people.join(", ")}</span>
              </div>
              <ul className="mtg-brief">
                {D.meeting.brief.map((b, i) => <li key={i}><span className="dot" />{b}</li>)}
              </ul>
              <button className="mtg-cta"><I d="spark" />브리핑 열기</button>
            </section>

            {/* 메일 요약 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="mail" /></div>
                <div className="wtitle">메일 요약</div>
                <span className="wcount">{D.emailCount}통</span>
              </div>
              <div className="mails2">
                {D.emails.map((m, i) => (
                  <div className="mrow" key={i}>
                    <span className="mdot" style={{ background: TONE[m.tone] }} />
                    <div className="mbody">
                      <div className="mfrom"><b>{m.from}</b>{m.task && <span className="mtask">할 일</span>}<span className="mtime">{m.time}</span></div>
                      <div className="msubj">{m.subj}</div>
                      <div className="msum">{m.summary}</div>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* 건강 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="heart" /></div>
                <div className="wtitle">건강 & 웰니스</div>
              </div>
              <div className="rings2">
                {D.health.rings.map((r, i) => {
                  const ico = { footprints: "foot", moonZz: "zzz", droplet: "drop" }[r.icon];
                  const col = [C.red, C.mauve, C.blue][i % 3];
                  return (
                    <div className="ring2" key={i}>
                      <div className="dial2" style={{ background: `conic-gradient(${col} ${r.pct}%, var(--card-2) 0)` }}><I d={ico} /></div>
                      <div className="rv2">{r.val}</div>
                      <div className="rl2">{r.label}</div>
                    </div>
                  );
                })}
              </div>
              <div className="nudge2"><I d="drop" />{D.health.nudge}</div>
            </section>

            {/* 지출 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="wallet" /></div>
                <div className="wtitle">이번 달 지출</div>
              </div>
              <div className="fbig"><b>{D.finance.spentPct}%</b><span className="u">예산 사용</span></div>
              <div className="fdelta">{D.finance.delta}</div>
              <div className="fbar"><i style={{ width: D.finance.spentPct + "%" }} /></div>
              <div className="frange"><span>₩{D.finance.spent}</span><span>₩{D.finance.budget}</span></div>
              <div className="fsubs">
                {D.finance.subs.map((s, i) => (
                  <div className="fsub" key={i}><span className="nm">{s.name}</span><span className="dt">{s.date}</span><span className="amt">₩{s.amt}</span></div>
                ))}
              </div>
            </section>

            {/* 자동화 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="zap" /></div>
                <div className="wtitle">자동화</div>
              </div>
              <div className="auto">
                {autos.map((a, i) => (
                  <div className="arow" key={i}>
                    <div className="aic"><I d={a.icon} /></div>
                    <div className="abody"><div className="awhen">{a.when}</div><div className="athen">→ {a.then}</div></div>
                    <div className={"toggle" + (a.on ? " on" : "")} onClick={() => toggleAuto(i)}><i /></div>
                  </div>
                ))}
              </div>
            </section>

            {/* 지식/메모 */}
            <section className="wcard">
              <div className="whead">
                <div className="wicon"><I d="brain" /></div>
                <div className="wtitle">지식 & 메모</div>
              </div>
              <div className="klist">
                {D.knowledge.map((k, i) => (
                  <div className="krow" key={i}>
                    <div className="kic"><I d={KICON[k.icon] || "file"} /></div>
                    <div className="kbody"><div className="kt">{k.title}</div><div className="ks">{k.src}</div></div>
                    <span className="ktag">{k.tag}</span>
                  </div>
                ))}
              </div>
            </section>
          </div>
        </main>
      </div>
    </div>
  );
}

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