export default function MESUIMockup() {
  const workers = [
    { id: 'P001', alias: '貞', name: '淑貞', station: 'G22 裁縫站' },
    { id: 'P002', alias: '光', name: '光耀', station: 'G25 釘布站' },
    { id: 'P003', alias: '龍', name: '志龍', station: 'G24 穿布站' },
    { id: 'P004', alias: '泉', name: '玉泉', station: 'G21 曲木站' },
    { id: 'P005', alias: '聯', name: '生聯', station: 'G26 釘背站' },
    { id: 'P006', alias: '錦', name: '叔錦', station: 'G33 品保站' }
  ];

  const urgentTasks = [
    { billNo: 'SO240901', rowNo: 1, prodId: 'A-CHAIR-01', prodName: '辦公椅 60"黑', preInDate: '2026-04-09', process: '裁縫', points: 1.5, alias: '貞', qty: 20, done: 8 },
    { billNo: 'SO240902', rowNo: 2, prodId: 'B-CHAIR-09', prodName: '主管椅座墊', preInDate: '2026-04-09', process: '釘布', points: 1.2, alias: '光', qty: 15, done: 0 }
  ];

  const todayTasks = [
    { billNo: 'SO240915', rowNo: 1, prodId: 'C-ARM-03', prodName: '扶手組', preInDate: '2026-04-10', process: '鎖配件', points: 0.8, alias: '聯', qty: 30, done: 12 },
    { billNo: 'SO240916', rowNo: 3, prodId: 'D-SEAT-11', prodName: '座墊穿布', preInDate: '2026-04-10', process: '穿布', points: 1.1, alias: '龍', qty: 24, done: 5 },
    { billNo: 'SO240917', rowNo: 1, prodId: 'E-WOOD-02', prodName: '曲木椅背', preInDate: '2026-04-10', process: '曲木', points: 1.7, alias: '泉', qty: 18, done: 0 }
  ];

  const advanceTasks = [
    { billNo: 'SO240930', rowNo: 1, prodId: 'PK-SET-21', prodName: '包裝紙箱組', preInDate: '2026-04-11', process: '包裝', points: 0.5, alias: '錦', qty: 50, done: 0 },
    { billNo: 'SO240933', rowNo: 2, prodId: 'QA-CHK-10', prodName: '品保檢驗單', preInDate: '2026-04-12', process: '品保', points: 0.6, alias: '錦', qty: 35, done: 0 }
  ];

  const activeWorks = [
    { status: '生產中', billNo: 'SO240916', prodName: '座墊穿布', process: '穿布', start: '09:12', pause: 0, qty: 5 },
    { status: '暫停中', billNo: 'SO240915', prodName: '扶手組', process: '鎖配件', start: '08:20', pause: 18, qty: 12 }
  ];

  const completed = [
    { time: '10:06', billNo: 'SO240880', prodName: '曲木椅背', qty: 12, points: 20.4 },
    { time: '11:40', billNo: 'SO240886', prodName: '主管椅座墊', qty: 8, points: 9.6 },
    { time: '13:15', billNo: 'SO240891', prodName: '扶手組', qty: 16, points: 12.8 }
  ];

  const ranking = [
    { name: '淑貞', alias: '貞', score: 86.5, completed: 42 },
    { name: '光耀', alias: '光', score: 80.2, completed: 39 },
    { name: '志龍', alias: '龍', score: 74.8, completed: 33 },
    { name: '玉泉', alias: '泉', score: 69.7, completed: 28 }
  ];

  const stationSummary = [
    { station: 'G22 裁縫站', wip: 7, completed: 21 },
    { station: 'G25 釘布站', wip: 5, completed: 18 },
    { station: 'G24 穿布站', wip: 6, completed: 15 },
    { station: 'G33 品保站', wip: 3, completed: 12 }
  ];

  const progress = [
    { order: 'SO240915', customer: '新竹醫院案', percent: 72 },
    { order: 'SO240916', customer: '台中學校案', percent: 46 },
    { order: 'SO240917', customer: '高雄辦公案', percent: 28 }
  ];

  const badge = (status) => {
    if (status === '生產中') return 'bg-emerald-100 text-emerald-700';
    if (status === '暫停中') return 'bg-amber-100 text-amber-700';
    return 'bg-slate-100 text-slate-700';
  };

  const sectionTitle = (title, hint) => (
    <div className="flex items-center justify-between mb-3">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
        <p className="text-sm text-slate-500">{hint}</p>
      </div>
    </div>
  );

  const taskTable = (rows, tone) => (
    <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
      <div className={`px-4 py-3 text-sm font-medium ${tone}`}>共 {rows.length} 筆</div>
      <div className="overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead className="bg-slate-50 text-slate-600">
            <tr>
              <th className="px-4 py-3 text-left">單號</th>
              <th className="px-4 py-3 text-left">品名 / 工序</th>
              <th className="px-4 py-3 text-left">交期</th>
              <th className="px-4 py-3 text-left">指定</th>
              <th className="px-4 py-3 text-left">進度</th>
              <th className="px-4 py-3 text-left">點數</th>
              <th className="px-4 py-3 text-right">操作</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((t, i) => {
              const remain = t.qty - t.done;
              const percent = Math.round((t.done / t.qty) * 100);
              return (
                <tr key={i} className="border-t border-slate-100">
                  <td className="px-4 py-3 font-medium text-slate-800">{t.billNo}-{t.rowNo}</td>
                  <td className="px-4 py-3">
                    <div className="font-medium text-slate-800">{t.prodName}</div>
                    <div className="text-slate-500">{t.prodId} / {t.process}</div>
                  </td>
                  <td className="px-4 py-3 text-slate-700">{t.preInDate}</td>
                  <td className="px-4 py-3">
                    <span className="rounded-full bg-sky-100 px-2.5 py-1 text-xs font-medium text-sky-700">{t.alias}</span>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-3">
                      <div className="w-32 rounded-full bg-slate-100">
                        <div className="h-2 rounded-full bg-slate-700" style={{ width: `${percent}%` }} />
                      </div>
                      <span className="text-slate-600">{t.done}/{t.qty}，剩 {remain}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-slate-700">{t.points}</td>
                  <td className="px-4 py-3 text-right">
                    <div className="flex justify-end gap-2">
                      <button className="rounded-xl bg-slate-900 px-3 py-2 text-white">開工</button>
                      <button className="rounded-xl border border-slate-300 px-3 py-2 text-slate-700">詳情</button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-100 p-6 text-slate-900">
      <div className="mx-auto max-w-7xl space-y-6">
        <div className="rounded-3xl bg-gradient-to-r from-slate-900 to-slate-700 p-6 text-white shadow-xl">
          <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <p className="text-sm uppercase tracking-[0.2em] text-slate-300">新傳 MES 報工系統</p>
              <h1 className="mt-2 text-3xl font-bold">ASP.NET Core MVC + Bootstrap 5 + jQuery AJAX 操作模擬</h1>
              <p className="mt-2 text-slate-200">展示登入、人員看板、開工 / 暫停 / 完工、個人戰績與管理儀表板。</p>
            </div>
            <div className="grid grid-cols-2 gap-3 text-sm lg:w-[360px]">
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur">
                <div className="text-slate-300">今日總待辦</div>
                <div className="mt-1 text-2xl font-bold">7</div>
              </div>
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur">
                <div className="text-slate-300">進行中</div>
                <div className="mt-1 text-2xl font-bold">2</div>
              </div>
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur">
                <div className="text-slate-300">今日產值</div>
                <div className="mt-1 text-2xl font-bold">42.8</div>
              </div>
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur">
                <div className="text-slate-300">管理者檢視</div>
                <div className="mt-1 text-2xl font-bold">啟用中</div>
              </div>
            </div>
          </div>
        </div>

        <div className="grid gap-6 xl:grid-cols-[340px_1fr]">
          <div className="space-y-6">
            <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
              {sectionTitle('1. 人員登入區', '支援 G02 人員大按鈕 + 工號 / 簡稱搜尋')}
              <div className="rounded-2xl border border-slate-200 bg-slate-50 p-3">
                <div className="mb-3 flex gap-2">
                  <input className="flex-1 rounded-xl border border-slate-300 px-3 py-2" placeholder="輸入工號、姓名或簡稱，例如：貞 / P001" />
                  <button className="rounded-xl bg-slate-900 px-4 py-2 text-white">搜尋</button>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  {workers.map((w) => (
                    <button key={w.id} className="rounded-2xl border border-slate-200 bg-white p-3 text-left transition hover:border-slate-400 hover:shadow-sm">
                      <div className="flex items-center justify-between">
                        <div className="font-semibold">{w.name}</div>
                        <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs">{w.alias}</span>
                      </div>
                      <div className="mt-1 text-xs text-slate-500">{w.id}</div>
                      <div className="mt-2 text-xs text-slate-600">{w.station}</div>
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
              {sectionTitle('2. 進行中 / 暫停中', '報工金三角的第二步，顯示當前工作狀態')}
              <div className="space-y-3">
                {activeWorks.map((a, i) => (
                  <div key={i} className="rounded-2xl border border-slate-200 p-4">
                    <div className="flex items-center justify-between gap-3">
                      <div>
                        <div className="font-semibold text-slate-800">{a.billNo} / {a.prodName}</div>
                        <div className="text-sm text-slate-500">工序：{a.process} ・ 開工：{a.start}</div>
                      </div>
                      <span className={`rounded-full px-3 py-1 text-xs font-medium ${badge(a.status)}`}>{a.status}</span>
                    </div>
                    <div className="mt-3 grid grid-cols-2 gap-3 text-sm text-slate-600">
                      <div className="rounded-xl bg-slate-50 p-3">目前已報：<span className="font-semibold text-slate-900">{a.qty}</span></div>
                      <div className="rounded-xl bg-slate-50 p-3">累計暫停：<span className="font-semibold text-slate-900">{a.pause} 分</span></div>
                    </div>
                    <div className="mt-3 flex gap-2">
                      {a.status === '生產中' ? (
                        <button className="rounded-xl border border-amber-300 bg-amber-50 px-4 py-2 text-amber-700">暫停</button>
                      ) : (
                        <button className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-emerald-700">恢復</button>
                      )}
                      <button className="rounded-xl bg-slate-900 px-4 py-2 text-white">完工</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
              {sectionTitle('3. 個人即時戰績', '完工後以 AJAX 即時更新，需防快取')}
              <div className="grid grid-cols-2 gap-3">
                <div className="rounded-2xl bg-emerald-50 p-4">
                  <div className="text-sm text-emerald-700">今日產值</div>
                  <div className="mt-1 text-3xl font-bold text-emerald-800">42.8</div>
                </div>
                <div className="rounded-2xl bg-sky-50 p-4">
                  <div className="text-sm text-sky-700">今日完工筆數</div>
                  <div className="mt-1 text-3xl font-bold text-sky-800">3</div>
                </div>
              </div>
              <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200">
                <table className="min-w-full text-sm">
                  <thead className="bg-slate-50 text-slate-600">
                    <tr>
                      <th className="px-4 py-3 text-left">時間</th>
                      <th className="px-4 py-3 text-left">單號 / 品名</th>
                      <th className="px-4 py-3 text-left">數量</th>
                      <th className="px-4 py-3 text-left">點數</th>
                    </tr>
                  </thead>
                  <tbody>
                    {completed.map((c, i) => (
                      <tr key={i} className="border-t border-slate-100">
                        <td className="px-4 py-3">{c.time}</td>
                        <td className="px-4 py-3">
                          <div className="font-medium text-slate-800">{c.billNo}</div>
                          <div className="text-slate-500">{c.prodName}</div>
                        </td>
                        <td className="px-4 py-3">{c.qty}</td>
                        <td className="px-4 py-3 font-medium text-slate-800">{c.points}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
              {sectionTitle('4. 今日待完工明系列表', '分成逾期趕工、今日應做、可提前施作，主管與作業員都看得懂')}
              <div className="space-y-5">
                <div>
                  <div className="mb-2 flex items-center gap-2">
                    <div className="h-3 w-3 rounded-full bg-rose-500" />
                    <h3 className="font-semibold text-rose-700">昨日未完成 / 今日優先趕工</h3>
                  </div>
                  {taskTable(urgentTasks, 'bg-rose-50 text-rose-700')}
                </div>
                <div>
                  <div className="mb-2 flex items-center gap-2">
                    <div className="h-3 w-3 rounded-full bg-sky-500" />
                    <h3 className="font-semibold text-sky-700">今日應做</h3>
                  </div>
                  {taskTable(todayTasks, 'bg-sky-50 text-sky-700')}
                </div>
                <div>
                  <div className="mb-2 flex items-center gap-2">
                    <div className="h-3 w-3 rounded-full bg-violet-500" />
                    <h3 className="font-semibold text-violet-700">有空可提早施作</h3>
                  </div>
                  {taskTable(advanceTasks, 'bg-violet-50 text-violet-700')}
                </div>
              </div>
            </div>

            <div className="grid gap-6 lg:grid-cols-2">
              <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                {sectionTitle('5. 管理儀表板：員工排行', '顯示員工點數與完工量，適合主管每日巡檢')}
                <div className="space-y-3">
                  {ranking.map((r, i) => (
                    <div key={i} className="rounded-2xl border border-slate-200 p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <div className="font-semibold">#{i + 1} {r.name}</div>
                          <div className="text-sm text-slate-500">簡稱：{r.alias}</div>
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-bold text-slate-900">{r.score}</div>
                          <div className="text-sm text-slate-500">完工 {r.completed} 件</div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                {sectionTitle('6. 管理儀表板：站別摘要', '看各站在製與今日完工，判斷瓶頸站別')}
                <div className="space-y-3">
                  {stationSummary.map((s, i) => (
                    <div key={i} className="rounded-2xl border border-slate-200 p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <div className="font-semibold text-slate-800">{s.station}</div>
                          <div className="text-sm text-slate-500">在製 {s.wip} 筆</div>
                        </div>
                        <div className="rounded-xl bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">今日完工 {s.completed}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
              {sectionTitle('7. 訂單完工進度條', '近期訂單的完工進度，可作為管理端首頁重點區塊')}
              <div className="space-y-4">
                {progress.map((p, i) => (
                  <div key={i} className="rounded-2xl border border-slate-200 p-4">
                    <div className="mb-2 flex items-center justify-between text-sm">
                      <div>
                        <div className="font-semibold text-slate-800">{p.order}</div>
                        <div className="text-slate-500">{p.customer}</div>
                      </div>
                      <div className="font-semibold text-slate-700">{p.percent}%</div>
                    </div>
                    <div className="h-3 rounded-full bg-slate-100">
                      <div className="h-3 rounded-full bg-slate-800" style={{ width: `${p.percent}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}