import { IconKitSvg } from "../components/IconKitSvg";
import { CornerMark } from "../components/app-shell";
import type { NavigateFn, Page } from "./route-config";

export function ExactDashboardApp({ navigate, logout }: { navigate: NavigateFn; logout: () => void }) {
  const go = (next: Page) => (event: { preventDefault: () => void }) => {
    event.preventDefault();
    navigate(next);
  };

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="sidebar-head"><a className="brand" href="/dashboard" onClick={go("dashboard")}><span className="brand-clip"><img className="brand-logo" src="/assets/logo.png" alt="Airshelf" /></span></a></div>
        <div className="search-box"><IconKitSvg name="search" /><input placeholder="搜索" readOnly /><span className="kbd">Ctrl K</span></div>
        <div className="nav-section">主要</div>
        <nav>
          <a href="/dashboard" className="active" onClick={go("dashboard")}><IconKitSvg name="dashboard" /><span>工作台</span></a>
          <a href="/products" onClick={go("products")}><IconKitSvg name="package" /><span>商品库</span><span className="pill-mini">7</span></a>
          <a href="/projects" onClick={go("projects")}><IconKitSvg name="clapperboard" /><span>视频项目</span><span className="pill-mini">8</span></a>
          <a href="/asset-factory" onClick={go("assetFactory")}><IconKitSvg name="sparkles" /><span>图片生成</span></a>
          <a href="/library" onClick={go("library")}><IconKitSvg name="library" /><span>资产库</span></a>
          <a href="/team" onClick={go("team")}><IconKitSvg name="users" /><span>团队</span></a>
          <a href="/account" onClick={go("account")}><IconKitSvg name="creditCard" /><span>消费</span></a>
          <a href="/settings" onClick={go("settings")}><IconKitSvg name="settings" /><span>设置</span></a>
        </nav>
        <div className="aside-foot"><div className="user"><div className="av">李</div><div className="em">小李的店</div></div></div>
      </aside>
      <main>
        <div className="grid-bg"></div>
        <header className="topbar">
          <div className="crumbs"><span className="here">工作台</span></div>
          <div className="right">
            <button className="balance-chip" type="button" onClick={() => navigate("account")}><IconKitSvg name="creditCard" />余额 <strong>¥327.40</strong></button>
            <button className="icon-btn" type="button" onClick={() => navigate("messages")}><IconKitSvg name="bell" /><span className="count-noti">12</span></button>
            <button className="topbar-avatar" type="button" onDoubleClick={logout}><span>李</span></button>
          </div>
        </header>
        <div className="content" id="page-content">
          <CornerMark pos="tl" /><CornerMark pos="tr" /><CornerMark pos="bl" /><CornerMark pos="br" />
          <div className="page-head">
            <div><h1>欢迎回来，小李</h1><div className="sub"><span className="mono">// 05.14 · 周三</span><span>·</span><span>你有 <b>3 个项目</b> 正在进行中</span></div></div>
            <div className="actions"><a className="btn btn-create" href="/products/new" onClick={go("productCreateUpload")}><IconKitSvg name="productPlus" />新建商品</a><a className="btn btn-primary btn-lg btn-create" href="/projects/new" onClick={go("projectWizard")}><IconKitSvg name="clapperboard" />新建项目</a></div>
          </div>
          <div className="stats with-corners">
            <span className="corner-tr" /><span className="corner-bl" />
            <a className="stat" href="/projects" onClick={go("projects")}><div className="lbl">总项目 <span className="badge">ALL</span></div><div className="v">8</div><div className="delta up"><IconKitSvg name="arrowUp" size={14} /> 本月 +3</div></a>
            <a className="stat" href="/projects" onClick={go("projects")}><div className="lbl">进行中 <span className="badge">WIP</span></div><div className="v">3</div><div className="delta">2 个待审核</div></a>
            <a className="stat" href="/projects" onClick={go("projects")}><div className="lbl">本月成片 <span className="badge">DONE</span></div><div className="v">3</div><div className="delta up">较上月 +33%</div></a>
            <a className="stat" href="/account" onClick={go("account")}><div className="lbl">余额 <span className="badge">¥</span></div><div className="v">¥327<small>.40</small></div><div className="bar"><span style={{ width: "33%" }} /></div><div className="sub">已用 ¥162.60 / ¥500</div></a>
          </div>
          <div className="dash-grid">
            <div><div className="section-h"><h2>最近项目</h2><a className="more" href="/projects" onClick={go("projects")}>[ ALL · 8 ]</a></div><div className="card-hard">{["补水面膜 · 痛点种草 · v3", "透真防晒 · 通勤对比", "蓝牙耳机 · 开箱测评", "春日新品 · 立体口红"].map((title) => <ExactRecentRow key={title} title={title} go={go("pipeline")} />)}</div></div>
            <div className="dash-side"><div className="section-h"><h2>快捷入口</h2><span className="more">[ /shortcuts ]</span></div><div className="shortcuts">{[["商品库", "products"], ["资产库", "library"], ["充值", "account"], ["所有项目", "projects"]].map(([label, target]) => <a className="shortcut" href={`/${target}`} onClick={go(target as Page)} key={label}><div className="ic"><IconKitSvg name="package" /></div><div><div className="t">{label}</div><div className="d">快速进入</div></div></a>)}</div></div>
          </div>
        </div>
      </main>
    </div>
  );
}

export function ExactRecentRow({ title, go }: { title: string; go: (event: { preventDefault: () => void }) => void }) {
  return (
    <a className="recent-row" href="/pipeline" onClick={go}>
      <div className="placeholder thumb"><span className="ph-frame">9:16</span></div>
      <div className="recent-meta"><div className="name">{title}</div><div className="sub">AI 全生 / 4 段</div></div>
      <div className="prog"><span className="done" /><span className="done" /><span className="cur" /><span /><span /></div>
      <span className="pill info"><span className="dot" />进行中</span>
      <span className="btn btn-sm">继续</span>
    </a>
  );
}
