// scheduler.jsx — 스케줄러 (오늘의 할 일 + 주간 캘린더 + 태스크 관리)
const { useState, useMemo, useEffect } = React;

const S = window.SCHEDULER;
const CATS = S.categories;

const fmtDate = (iso) => {
  const [y,m,d] = iso.split("-").map(Number);
  const dt = new Date(y, m-1, d);
  const days = ["일","월","화","수","목","금","토"];
  return `${m}/${d} (${days[dt.getDay()]})`;
};
const todayStr = S.today;
const isOverdue = (t) => !t.done && t.date < todayStr;
const isToday   = (t) => t.date === todayStr;
const sortTasks = (tasks) => [...tasks].sort((a,b) => {
  if (a.date !== b.date) return a.date < b.date ? -1 : 1;
  if (a.time !== b.time) return a.time < b.time ? -1 : 1;
  return 0;
});

// ─── HEADER ──────────────────────────────────────────────
function Header() {
  return (
    <header className="cat-header">
      <div className="cat-header-inner">
        <a className="cat-brand" href="#">
          <img className="cat-brand-mark" src="assets/symbol-brush.svg" alt="" />
          <div>
            <div className="cat-brand-name">김성호바이크 세종점</div>
            <div className="cat-brand-sub">Scheduler · 매장 일정</div>
          </div>
        </a>
        <div className="cat-header-sep" />
        <div className="cat-header-title">스케줄러 · <b>{todayStr}</b></div>
        <div className="cat-header-tools">
          <span>담당 <b>김성호</b></span>
        </div>
      </div>
    </header>
  );
}

// ─── PAGE NAV ────────────────────────────────────────────
function PageNav() {
  return (
    <nav className="cat-pagenav">
      <div className="cat-pagenav-inner">
        <a href="관리자.html">관리자 <small>Admin</small></a>
        <a className="on" href="스케줄러.html">스케줄러 <small>Scheduler</small></a>
        <a href="2026 카탈로그.html">카탈로그 <small>Catalog</small></a>
        <a href="재고관리.html">재고관리 <small>Inventory</small></a>
        <a href="서비스 견적서.html">서비스 견적서 <small>Estimate</small></a>
      </div>
    </nav>
  );
}

// ─── KPI STRIP ───────────────────────────────────────────
function KpiStrip({ tasks }) {
  const todayTasks = tasks.filter(isToday);
  const overdue   = tasks.filter(isOverdue);
  const weekStart = todayStr;
  const weekEnd = (() => {
    const [y,m,d] = todayStr.split("-").map(Number);
    const dt = new Date(y, m-1, d); dt.setDate(dt.getDate() + 6);
    return `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,"0")}-${String(dt.getDate()).padStart(2,"0")}`;
  })();
  const thisWeek = tasks.filter(t => t.date >= weekStart && t.date <= weekEnd);
  const doneToday = todayTasks.filter(t => t.done).length;
  const completion = todayTasks.length === 0 ? 100 : Math.round(doneToday / todayTasks.length * 100);

  return (
    <div className="inv-kpi" style={{gridTemplateColumns:"repeat(5, 1fr)"}}>
      <div className="inv-kpi-cell">
        <div className="inv-kpi-l">오늘 일정</div>
        <div className="inv-kpi-v">{todayTasks.length}<small>건</small></div>
        <div className="inv-kpi-hint">완료 {doneToday} · 진행 {todayTasks.length - doneToday}</div>
      </div>
      <div className="inv-kpi-cell">
        <div className="inv-kpi-l">오늘 진척률</div>
        <div className="inv-kpi-v">{completion}<small>%</small></div>
        <div style={{marginTop:6}}>
          <div className="adm-kpi-bar"><i style={{width: completion + "%", background: completion >= 80 ? "var(--success-500)" : completion >= 50 ? "var(--warning-500)" : "var(--red-500)"}} /></div>
        </div>
      </div>
      <div className="inv-kpi-cell">
        <div className="inv-kpi-l">지연</div>
        <div className={"inv-kpi-v " + (overdue.length > 0 ? "err" : "")}>{overdue.length}<small>건</small></div>
        <div className="inv-kpi-hint">즉시 처리 권장</div>
      </div>
      <div className="inv-kpi-cell">
        <div className="inv-kpi-l">이번주 합계</div>
        <div className="inv-kpi-v">{thisWeek.length}<small>건</small></div>
        <div className="inv-kpi-hint">{weekStart.slice(5)} ~ {weekEnd.slice(5)}</div>
      </div>
      <div className="inv-kpi-cell">
        <div className="inv-kpi-l">담당</div>
        <div className="inv-kpi-v" style={{fontSize:18, lineHeight:"1.1"}}>{S.staff.filter(s => s !== "전직원").join(" · ")}</div>
        <div className="inv-kpi-hint">3인 + 외부 협력</div>
      </div>
    </div>
  );
}

// ─── WEEK VIEW (날짜 이동 가능) ──────────────────────────
function WeekCalendar({ tasks, anchor, onPrev, onNext, onToday, onSelectDate, selectedDate, onTaskClick }) {
  const days = useMemo(() => {
    const [y,m,d] = anchor.split("-").map(Number);
    const dt0 = new Date(y, m-1, d);
    const wd = (dt0.getDay() + 6) % 7;
    const start = new Date(dt0); start.setDate(dt0.getDate() - wd);
    const dayNames = ["월","화","수","목","금","토","일"];
    return Array.from({length:7}, (_, i) => {
      const d = new Date(start); d.setDate(start.getDate() + i);
      const iso = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
      return { iso, dayName: dayNames[i], d: d.getDate(), isToday: iso === todayStr, isPast: iso < todayStr, isSun: i === 6 };
    });
  }, [anchor]);

  return (
    <div className="sch-cal">
      <div className="sch-cal-head">
        <div className="sch-cal-h">이번주 캘린더 <small>{days[0].iso.slice(5)} ~ {days[6].iso.slice(5)}</small></div>
        <div className="sch-cal-nav">
          <button onClick={onPrev}>◀</button>
          <button onClick={onToday} className="today-btn">오늘</button>
          <button onClick={onNext}>▶</button>
        </div>
      </div>
      <div className="sch-cal-grid">
        {days.map(d => {
          const dayTasks = sortTasks(tasks.filter(t => t.date === d.iso));
          return (
            <div
              key={d.iso}
              className={"sch-cal-day " + (d.isToday ? "today " : "") + (d.isPast ? "past " : "") + (d.isSun ? "sun " : "") + (selectedDate === d.iso ? "sel" : "")}
              onClick={() => onSelectDate(d.iso)}
            >
              <div className="sch-cal-day-head">
                <span className="sch-cal-day-name">{d.dayName}</span>
                <span className="sch-cal-day-num">{d.d}</span>
                {d.isToday && <span className="sch-cal-day-tag">오늘</span>}
              </div>
              <div className="sch-cal-day-tasks">
                {d.isSun && dayTasks.length === 0 ? (
                  <div className="sch-cal-rest">휴무</div>
                ) : dayTasks.length === 0 ? (
                  <div className="sch-cal-empty">일정 없음</div>
                ) : dayTasks.slice(0, 5).map(t => (
                  <div
                    key={t.id}
                    className={"sch-cal-task " + (t.done ? "done " : "") + " cat-" + t.cat + " p-" + t.prio}
                    onClick={(e)=>{e.stopPropagation(); onTaskClick(t);}}
                    style={{borderLeftColor: CATS[t.cat].color}}
                  >
                    <span className="sch-cal-task-t">{t.time}</span>
                    <span className="sch-cal-task-title">{t.title}</span>
                  </div>
                ))}
                {dayTasks.length > 5 && <div className="sch-cal-more">+{dayTasks.length - 5}건 더</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── DAY VIEW — 시간대별 ─────────────────────────────────
function DayView({ tasks, date, onPrev, onNext, onToday, onTaskClick }) {
  const dayTasks = sortTasks(tasks.filter(t => t.date === date));
  // 09:00 ~ 20:00 (1시간 슬롯)
  const slots = Array.from({length: 12}, (_, i) => `${String(9+i).padStart(2,"0")}:00`);
  const [y,m,d] = date.split("-").map(Number);
  const dt = new Date(y, m-1, d);
  const days = ["일","월","화","수","목","금","토"];
  const isToday = date === todayStr;
  const isSun = dt.getDay() === 0;

  return (
    <div className="sch-cal">
      <div className="sch-cal-head">
        <div className="sch-cal-h">
          {`${m}월 ${d}일 (${days[dt.getDay()]})`}
          <small>{dayTasks.length}건 · {dayTasks.filter(t=>t.done).length} 완료</small>
        </div>
        <div className="sch-cal-nav">
          <button onClick={onPrev}>◀</button>
          <button onClick={onToday} className="today-btn">오늘</button>
          <button onClick={onNext}>▶</button>
        </div>
      </div>
      <div className="sch-day-grid">
        {isSun && dayTasks.length === 0 ? (
          <div className="sch-day-rest">일요일 · 매장 휴무</div>
        ) : slots.map(slot => {
          const slotTasks = dayTasks.filter(t => t.time.startsWith(slot.slice(0, 2)));
          return (
            <div key={slot} className={"sch-day-slot " + (slotTasks.length > 0 ? "has" : "")}>
              <div className="sch-day-slot-t">{slot}</div>
              <div className="sch-day-slot-tasks">
                {slotTasks.length === 0 ? (
                  <div className="sch-day-slot-empty">—</div>
                ) : slotTasks.map(t => (
                  <div
                    key={t.id}
                    className={"sch-day-task " + (t.done ? "done " : "") + "cat-" + t.cat}
                    style={{borderLeftColor: CATS[t.cat].color}}
                    onClick={()=>onTaskClick(t)}
                  >
                    <div className="sch-day-task-time">{t.time}</div>
                    <div className="sch-day-task-body">
                      <span className={"sch-cat-pill cat-" + t.cat}>{CATS[t.cat].label}</span>
                      <b>{t.title}</b>
                      {t.note && <small>{t.note}</small>}
                    </div>
                    <div className="sch-day-task-who">{t.who}</div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
        {!isSun && dayTasks.length === 0 && <div className="sch-day-empty">이 날짜에 예정된 일정이 없습니다.</div>}
      </div>
    </div>
  );
}

// ─── MONTH VIEW — 월간 캘린더 ────────────────────────────
function MonthView({ tasks, anchor, onPrev, onNext, onToday, onSelectDate, onTaskClick }) {
  const [y, m] = anchor.split("-").map(Number);
  const first = new Date(y, m-1, 1);
  const last = new Date(y, m, 0);
  const wd = (first.getDay() + 6) % 7; // 월요일 시작
  const days = [];
  // 이전 달 패딩
  for (let i = wd; i > 0; i--) {
    const d = new Date(first); d.setDate(1 - i);
    days.push({ d, inMonth: false });
  }
  for (let i = 1; i <= last.getDate(); i++) {
    days.push({ d: new Date(y, m-1, i), inMonth: true });
  }
  while (days.length % 7 !== 0) {
    const next = new Date(days[days.length-1].d); next.setDate(next.getDate() + 1);
    days.push({ d: next, inMonth: false });
  }
  // 6주가 안되면 한 줄 더
  while (days.length < 42) {
    const next = new Date(days[days.length-1].d); next.setDate(next.getDate() + 1);
    days.push({ d: next, inMonth: false });
  }
  const dayNames = ["월","화","수","목","금","토","일"];

  return (
    <div className="sch-cal">
      <div className="sch-cal-head">
        <div className="sch-cal-h">
          {y}년 {m}월
          <small>{tasks.filter(t => t.date.startsWith(`${y}-${String(m).padStart(2,"0")}`)).length}건</small>
        </div>
        <div className="sch-cal-nav">
          <button onClick={onPrev}>◀</button>
          <button onClick={onToday} className="today-btn">오늘</button>
          <button onClick={onNext}>▶</button>
        </div>
      </div>
      <div className="sch-month-dows">
        {dayNames.map((n, i) => <div key={n} className={"sch-month-dow " + (i===6 ? "sun" : "")}>{n}</div>)}
      </div>
      <div className="sch-month-grid">
        {days.map((d, idx) => {
          const iso = `${d.d.getFullYear()}-${String(d.d.getMonth()+1).padStart(2,"0")}-${String(d.d.getDate()).padStart(2,"0")}`;
          const dayTasks = sortTasks(tasks.filter(t => t.date === iso));
          const isToday2 = iso === todayStr;
          const isSun = d.d.getDay() === 0;
          return (
            <div
              key={idx}
              className={"sch-month-cell " + (d.inMonth ? "" : "out ") + (isToday2 ? "today " : "") + (isSun ? "sun " : "")}
              onClick={()=>onSelectDate(iso)}
            >
              <div className="sch-month-cell-h">
                <span className="sch-month-cell-num">{d.d.getDate()}</span>
                {isToday2 && <span className="sch-month-cell-tag">오늘</span>}
                {dayTasks.length > 0 && <span className="sch-month-cell-cnt">{dayTasks.length}</span>}
              </div>
              <div className="sch-month-cell-tasks">
                {dayTasks.slice(0, 3).map(t => (
                  <div
                    key={t.id}
                    className={"sch-month-task " + (t.done ? "done" : "")}
                    style={{borderLeftColor: CATS[t.cat].color}}
                    onClick={(e)=>{e.stopPropagation(); onTaskClick(t);}}
                  >
                    <em>{t.time.slice(0,5)}</em>
                    <span>{t.title}</span>
                  </div>
                ))}
                {dayTasks.length > 3 && <div className="sch-month-more">+{dayTasks.length - 3}</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
function TaskList({ tasks, filters, setFilters, onToggle, onEdit, onDelete, onAdd }) {
  const filtered = useMemo(() => {
    return sortTasks(tasks.filter(t => {
      if (filters.scope === "today" && !isToday(t)) return false;
      if (filters.scope === "overdue" && !isOverdue(t)) return false;
      if (filters.scope === "todo" && t.done) return false;
      if (filters.cat !== "all" && t.cat !== filters.cat) return false;
      if (filters.who !== "all" && t.who !== filters.who) return false;
      return true;
    }));
  }, [tasks, filters]);

  return (
    <div className="sch-list">
      <div className="sch-list-head">
        <div className="sch-list-h">태스크 · {filtered.length}건</div>
        <div className="sch-list-tools">
          <div className="cat-view-toggle" style={{padding:3}}>
            <button className={filters.scope === "today" ? "on" : ""} onClick={()=>setFilters({...filters, scope:"today"})}>오늘</button>
            <button className={filters.scope === "todo" ? "on" : ""} onClick={()=>setFilters({...filters, scope:"todo"})}>할일</button>
            <button className={filters.scope === "overdue" ? "on" : ""} onClick={()=>setFilters({...filters, scope:"overdue"})}>지연</button>
            <button className={filters.scope === "all" ? "on" : ""} onClick={()=>setFilters({...filters, scope:"all"})}>전체</button>
          </div>
          <select value={filters.cat} onChange={(e)=>setFilters({...filters, cat: e.target.value})} className="sch-sel">
            <option value="all">전체 카테고리</option>
            {Object.entries(CATS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
          <select value={filters.who} onChange={(e)=>setFilters({...filters, who: e.target.value})} className="sch-sel">
            <option value="all">전체 담당</option>
            {S.staff.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
          <button className="inv-tbl-action primary" onClick={onAdd}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            새 태스크
          </button>
        </div>
      </div>

      {filtered.length === 0 ? (
        <div style={{padding:"60px 24px",textAlign:"center",
                     background:"var(--grey-50,#F9FAFB)",borderRadius:12,margin:"8px 0"}}>
          <div style={{fontSize:42,marginBottom:10}}>📅</div>
          <h3 style={{margin:"0 0 6px",font:"700 18px/1.3 var(--font-sans)"}}>예정된 일정이 없어요</h3>
          <p style={{margin:"0 0 16px",color:"var(--grey-600)",fontSize:13}}>
            필터를 변경하거나 새 태스크를 추가해보세요.
          </p>
          <button onClick={onAdd} className="cat-btn cat-btn-primary"
                  style={{padding:"8px 20px"}}>+ 새 태스크</button>
        </div>
      ) : (
        <div className="sch-rows">
          {filtered.map(t => {
            const overdue = isOverdue(t);
            return (
              <div key={t.id} className={"sch-row " + (t.done ? "done " : "") + (overdue ? "overdue" : "")}>
                <label className="sch-row-check">
                  <input type="checkbox" checked={t.done} onChange={()=>onToggle(t.id)} />
                </label>
                <div className={"sch-row-prio p-" + t.prio} />
                <div className="sch-row-date">
                  <b>{fmtDate(t.date)}</b>
                  <small>{t.time}</small>
                </div>
                <div className="sch-row-body">
                  <div className="sch-row-title">
                    <span className={"sch-cat-pill cat-" + t.cat}>{CATS[t.cat].label}</span>
                    <b>{t.title}</b>
                  </div>
                  {t.note && <div className="sch-row-note">{t.note}</div>}
                </div>
                <div className="sch-row-who">{t.who}</div>
                <div className="sch-row-actions">
                  <button className="inv-icon-btn" onClick={()=>onEdit(t)} title="편집">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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="inv-icon-btn danger" onClick={()=>onDelete(t.id)} title="삭제">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ─── TASK MODAL (add/edit) ───────────────────────────────
function TaskModal({ task, onClose, onSave }) {
  const isNew = !task.id;
  const [t, setT] = useState(task);

  useEffect(() => {
    const k = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, []);

  const save = () => {
    if (!t.title.trim()) return;
    onSave(t);
  };

  return (
    <>
      <div className="inv-modal-scrim" onClick={onClose} />
      <div className="inv-modal sch-modal" role="dialog">
        <button className="inv-modal-x" onClick={onClose}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
        <div className="inv-modal-head">
          <div className="inv-modal-eyebrow">{isNew ? "새 태스크 등록" : "태스크 수정"}</div>
          <div style={{fontSize:14, color:"var(--fg-secondary)"}}>제목과 일정을 입력해 주세요.</div>
        </div>
        <div className="inv-modal-body" style={{padding:24}}>
          <div className="inv-mod-field">
            <label>제목 <span style={{color:"var(--red-500)"}}>*</span></label>
            <input
              type="text"
              autoFocus
              value={t.title}
              onChange={(e)=>setT({...t, title: e.target.value})}
              placeholder="예) Q-260524-204 견적 회신"
              style={{height:42, fontSize:15}}
            />
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12}}>
            <div className="inv-mod-field">
              <label>날짜</label>
              <input type="date" value={t.date} onChange={(e)=>setT({...t, date: e.target.value})} style={{height:40}} />
            </div>
            <div className="inv-mod-field">
              <label>시간</label>
              <input type="time" value={t.time} onChange={(e)=>setT({...t, time: e.target.value})} style={{height:40}} />
            </div>
          </div>
          <div className="inv-mod-field">
            <label>카테고리</label>
            <div className="sch-cat-grid">
              {Object.entries(CATS).map(([k,v]) => (
                <button
                  key={k}
                  type="button"
                  className={"sch-cat-pick " + (t.cat === k ? "on" : "")}
                  onClick={()=>setT({...t, cat: k})}
                  style={t.cat === k ? {borderColor: v.color, background: v.color, color: "#fff"} : {}}
                >
                  <i style={{background: v.color}} />
                  {v.label}
                </button>
              ))}
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12}}>
            <div className="inv-mod-field">
              <label>담당</label>
              <select value={t.who} onChange={(e)=>setT({...t, who: e.target.value})} style={{height:40, padding:"0 12px"}}>
                {S.staff.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </div>
            <div className="inv-mod-field">
              <label>우선순위</label>
              <div className="sch-prio-grid">
                {[
                  {k:"high", label:"높음", color:"var(--red-500)"},
                  {k:"med",  label:"중간", color:"var(--warning-500)"},
                  {k:"low",  label:"낮음", color:"var(--neutral-400)"},
                ].map(p => (
                  <button
                    key={p.k}
                    type="button"
                    className={"sch-prio-pick " + (t.prio === p.k ? "on" : "")}
                    onClick={()=>setT({...t, prio: p.k})}
                    style={t.prio === p.k ? {borderColor: p.color, background: p.color, color:"#fff"} : {}}
                  >
                    {p.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
          <div className="inv-mod-field">
            <label>메모 (선택)</label>
            <input type="text" value={t.note} onChange={(e)=>setT({...t, note: e.target.value})} placeholder="고객명 · 차종 · 비고" />
          </div>
        </div>
        <div className="inv-modal-actions">
          <button className="inv-tbl-action" onClick={onClose}>취소</button>
          <button className="inv-tbl-action primary" disabled={!t.title.trim()} onClick={save}>
            {isNew ? "등록" : "저장"}
          </button>
        </div>
      </div>
    </>
  );
}

// ─── FOOTER ──────────────────────────────────────────────
function Footer() {
  return (
    <footer className="cat-footer">
      <div className="cat-inner cat-footer-inner">
        <div className="cat-footer-brand">
          <img className="cat-footer-mark" src="assets/symbol-brush-sejong.svg" alt="" />
          <div>
            <div className="cat-footer-name">스케줄러 · 김성호바이크 세종점</div>
            <div className="cat-footer-sub">매장 일정 · 정비 · 발주 · 견적 통합 관리</div>
          </div>
        </div>
        <div className="cat-footer-meta">
          <span>일요일은 매장 휴무입니다</span>
          <img className="cat-footer-wordmark" src="assets/wordmark-specialized.svg" alt="Specialized" />
        </div>
      </div>
    </footer>
  );
}

// ─── APP ─────────────────────────────────────────────────
function App() {
  const [tasks, setTasks] = useState(() => S.tasks.map(t => ({...t})));
  const [filters, setFilters] = useState({ scope: "today", cat: "all", who: "all" });
  const [modal, setModal] = useState(null);
  const [selectedDate, setSelectedDate] = useState(todayStr);
  const [view, setView] = useState("week"); // day | week | month
  const [anchor, setAnchor] = useState(todayStr); // 현재 보고 있는 기간의 기준 날짜

  const shiftAnchor = (delta, unit) => {
    const [y,m,d] = anchor.split("-").map(Number);
    const dt = new Date(y, m-1, d);
    if (unit === "day")   dt.setDate(dt.getDate() + delta);
    if (unit === "week")  dt.setDate(dt.getDate() + delta * 7);
    if (unit === "month") dt.setMonth(dt.getMonth() + delta);
    setAnchor(`${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,"0")}-${String(dt.getDate()).padStart(2,"0")}`);
  };
  const goToday = () => setAnchor(todayStr);

  const onToggle = (id) => setTasks(tasks.map(t => t.id === id ? { ...t, done: !t.done } : t));
  const onDelete = (id) => {
    if (!confirm("이 태스크를 삭제하시겠습니까?")) return;
    setTasks(tasks.filter(t => t.id !== id));
  };
  const onEdit = (task) => setModal(task);
  const onAdd = () => setModal({
    id: "", title: "", date: view === "day" ? anchor : selectedDate, time: "10:00", cat: "service",
    prio: "med", who: "김성호", done: false, note: "",
  });
  const onSave = (t) => {
    if (!t.id) {
      const newId = "T" + Date.now().toString().slice(-6);
      setTasks([...tasks, { ...t, id: newId }]);
    } else {
      setTasks(tasks.map(x => x.id === t.id ? t : x));
    }
    setModal(null);
  };
  const onSelectDate = (iso) => {
    setSelectedDate(iso);
    if (view === "month") {
      setAnchor(iso);
      setView("day");
    }
    if (iso === todayStr) setFilters({...filters, scope:"today"});
    else setFilters({...filters, scope:"all"});
  };

  return (
    <div className="inv-app">
      <Header />
      <PageNav />
      <main className="inv-main">
        <div className="cat-inner">
          <div className="inv-page-head">
            <div>
              <h1 className="inv-page-h">스케줄러</h1>
              <p className="inv-page-sub" style={{marginTop:8}}>
                정비 · 견적 · 발주 · 피팅 등 매장 일정을 한 화면에서. 일간 · 주간 · 월간 보기로 전환 가능.
              </p>
            </div>
            <div className="sch-viewbar">
              <div className="cat-view-toggle" style={{padding:3}}>
                <button className={view === "day"   ? "on" : ""} onClick={()=>{ setView("day"); setAnchor(selectedDate); }}>일간</button>
                <button className={view === "week"  ? "on" : ""} onClick={()=>setView("week")}>주간</button>
                <button className={view === "month" ? "on" : ""} onClick={()=>setView("month")}>월간</button>
              </div>
              <div className="sch-cat-legend-inline">
                {Object.entries(CATS).map(([k, v]) => (
                  <span key={k}><i style={{background:v.color}} />{v.label}</span>
                ))}
              </div>
            </div>
          </div>
          <KpiStrip tasks={tasks} />
          {/* v3.11 A2: 오늘 요약 인사이트 카드 */}
          {(() => {
            const today = new Date().toISOString().slice(0,10);
            const todayTasks = tasks.filter(t => t.date === today);
            const done = todayTasks.filter(t => t.done).length;
            const overdue = tasks.filter(t => !t.done && t.date < today).length;
            const upcoming = tasks.filter(t => !t.done && t.date > today && t.date <= new Date(Date.now()+86400000*3).toISOString().slice(0,10)).length;
            if (todayTasks.length === 0 && overdue === 0 && upcoming === 0) return null;
            return (
              <div style={{marginBottom:16,padding:"14px 18px",background:"#fff",
                           border:"1px solid var(--grey-200,#E5E8EB)",borderRadius:12,
                           display:"flex",gap:24,flexWrap:"wrap",alignItems:"center"}}>
                <span style={{fontSize:14,fontWeight:700,color:"var(--grey-900)"}}>💡 오늘 요약</span>
                <span style={{fontSize:13}}>
                  진행률 <b style={{color:"var(--grey-900)",fontSize:15}}>
                    {todayTasks.length ? Math.round(done/todayTasks.length*100) : 0}%
                  </b>
                  <span style={{color:"var(--grey-500)",marginLeft:4}}>({done}/{todayTasks.length})</span>
                </span>
                {overdue > 0 && (
                  <span style={{fontSize:13,color:"var(--red-500,#E31E26)",fontWeight:600}}>
                    🔴 지연 {overdue}건
                  </span>
                )}
                {upcoming > 0 && (
                  <span style={{fontSize:13,color:"var(--grey-700)"}}>
                    📅 다음 3일 {upcoming}건 예정
                  </span>
                )}
              </div>
            );
          })()}
          {view === "day"   && <DayView   tasks={tasks} date={anchor}    onPrev={()=>shiftAnchor(-1,"day")}   onNext={()=>shiftAnchor(1,"day")}   onToday={goToday} onTaskClick={onEdit} />}
          {view === "week"  && <WeekCalendar tasks={tasks} anchor={anchor} onPrev={()=>shiftAnchor(-1,"week")}  onNext={()=>shiftAnchor(1,"week")}  onToday={goToday} onSelectDate={onSelectDate} selectedDate={selectedDate} onTaskClick={onEdit} />}
          {view === "month" && <MonthView tasks={tasks} anchor={anchor}   onPrev={()=>shiftAnchor(-1,"month")} onNext={()=>shiftAnchor(1,"month")} onToday={goToday} onSelectDate={onSelectDate} onTaskClick={onEdit} />}
          <TaskList
            tasks={tasks}
            filters={filters} setFilters={setFilters}
            onToggle={onToggle} onEdit={onEdit} onDelete={onDelete} onAdd={onAdd}
          />
        </div>
      </main>
      <Footer />
      {modal && <TaskModal task={modal} onClose={()=>setModal(null)} onSave={onSave} />}
    </div>
  );
}

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