import { Badge, Card, PageTitle } from "../components/ui";

const priorityOne = [
  {
    title: "自動補庫存",
    desc: "目前 publish queue 只支援手動新增單篇。下一步要支援每天目標篇數、時段槽、來源人設/任務、低庫存自動生成。"
  },
  {
    title: "智慧時段",
    desc: "先做規則版 weekday/time slots，再用 1h/24h/7d 成效回填建議。"
  },
  {
    title: "草稿批量排程",
    desc: "copy draft 目前可直接發布，但缺少批量排入 publish_queue 的 API 與前端流程。"
  },
  {
    title: "發文重試與告警",
    desc: "queue 有 failed 狀態，但缺 retry endpoint、漏發偵測、連續失敗 pause 與通知。"
  }
];

const priorityTwo = [
  "內容日曆：用 queue scheduled_at 做週/月視圖，後端補 date range query。",
  "多帳號營運儀表板：前端先聚合，後端補 summary endpoint。",
  "發文頻率護欄：每日上限、最小間隔、連續失敗暫停。",
  "語調/CTA/禁用詞庫：把 8D style_profile 變成可操作的 preset。"
];

export function GapsPage() {
  return (
    <div className="page-grid">
      <PageTitle title="補功能 Roadmap" subtitle="對標 Threads 自動發文工具後，真正能拉開差距的能力清單。" />
      <div className="grid-2">
        {priorityOne.map((item) => (
          <Card key={item.title}>
            <div className="button-row" style={{ justifyContent: "space-between" }}>
              <h2 style={{ margin: 0 }}>{item.title}</h2>
              <Badge variant="brand">P1</Badge>
            </div>
            <p className="muted">{item.desc}</p>
          </Card>
        ))}
      </div>
      <Card title="P2 產品完整度">
        <div className="page-grid">
          {priorityTwo.map((item) => (
            <div key={item} className="button-row">
              <Badge variant="neutral">P2</Badge>
              <span>{item}</span>
            </div>
          ))}
        </div>
      </Card>
      <Card title="目前定位">
        <p>
          這版前端先把現有後端能力串成可操作 Console。下一輪後端再補「自動補庫存」與「智慧時段」，
          才會從一般排程工具升級成真正的 Threads 自動營運系統。
        </p>
      </Card>
    </div>
  );
}
