import Icon from "../../components/common/Icon";
import { useAuth } from "../../context/AuthContext";

import "../../styles/admin.css";
import "../../styles/dashboard.css";

export function DashboardPage({
  scriptCount,
  online,
  onNavigate,
}: {
  scriptCount: number;
  online: boolean;
  onNavigate: (page: "scripts" | "schedules" | "system") => void;
}) {
  const { user, currentWorkspace } = useAuth();
  const isSystemAdmin = user?.is_system_admin ?? false;

  return (
    <section className="dashboard-page">
      <div className="dashboard-hero">
        <div>
          <span>MODEL DEVELOPMENT PLATFORM</span>
          <h2>下午好，{user?.display_name ?? "用户"}</h2>
          <p>
            当前位于 {currentWorkspace?.workspace_name ?? "（未选择 Workspace）"}
            ，可以继续构建脚本或配置调度。
          </p>
        </div>
        <span className="dashboard-hero__badge">{online ? "服务正常" : "服务连接中"}</span>
      </div>
      <div className="dashboard-metrics">
        <article><Icon name="script" /><span><b>{scriptCount}</b><small>工作副本</small></span></article>
        <article><Icon name="workspace" /><span><b>2</b><small>Workspace</small></span></article>
        <article><Icon name="settings" /><span><b>4</b><small>平台用户</small></span></article>
        <article><Icon name="check" /><span><b>{online ? "正常" : "检查中"}</b><small>平台状态</small></span></article>
      </div>
      <div className="dashboard-actions">
        <button type="button" onClick={() => onNavigate("scripts")}><Icon name="script" />构建脚本</button>
        <button type="button" onClick={() => onNavigate("schedules")}><Icon name="schedule" />调度配置</button>
        {isSystemAdmin && (
          <button type="button" onClick={() => onNavigate("system")}><Icon name="settings" />系统管理</button>
        )}
      </div>
      <div className="dashboard-grid">
        <section className="dashboard-panel dashboard-panel--trend">
          <header><div><span>运行趋势</span><h3>近 7 天调度执行</h3></div><b>成功率 92.6%</b></header>
          <div className="trend-chart">
            {[38, 55, 44, 73, 61, 86, 78].map((value, index) => (
              <div className="trend-column" key={index}>
                <span className="trend-column__value">{Math.round(value / 7)}</span>
                <i style={{ height: `${value}%` }} />
                <small>{["周一", "周二", "周三", "周四", "周五", "周六", "今天"][index]}</small>
              </div>
            ))}
          </div>
          <footer><span><i className="legend-dot is-success" />成功 75</span><span><i className="legend-dot is-failed" />失败 6</span></footer>
        </section>
        <section className="dashboard-panel dashboard-panel--donut">
          <header><div><span>脚本资产</span><h3>类型分布</h3></div></header>
          <div className="donut-layout">
            <div className="donut-chart"><span><b>{scriptCount}</b><small>全部脚本</small></span></div>
            <div className="donut-legend">
              <span><i className="legend-dot is-notebook" /><b>Notebook</b><small>{Math.max(1, Math.round(scriptCount * .67))} 个 · 67%</small></span>
              <span><i className="legend-dot is-python" /><b>Python</b><small>{Math.max(0, scriptCount - Math.round(scriptCount * .67))} 个 · 33%</small></span>
              <span><i className="legend-dot is-version" /><b>稳定版本</b><small>3 个已发布</small></span>
            </div>
          </div>
        </section>
        <section className="dashboard-panel dashboard-panel--activity">
          <header><div><span>ACTIVITY</span><h3>最近平台活动</h3></div><button type="button">查看全部</button></header>
          <div className="activity-table">
            <div className="activity-table__head"><span>操作内容</span><span>执行人</span><span>状态</span><span>时间</span></div>
            {[
              ["数据探索.ipynb 发布稳定版本 v3.0", "张三", "成功", "16:42"],
              ["每日模型训练流程完成调度运行", "Scheduler", "成功", "15:25"],
              ["批量预测.py 更新工作副本", "王五", "已同步", "14:18"],
              ["风险验证流程完成 DAG 校验", "李四", "成功", "11:06"],
            ].map((row) => (
              <div className="activity-row" key={row[0]}>
                <span><i className="activity-icon"><Icon name="check" size={13} /></i>{row[0]}</span>
                <span>{row[1]}</span><span><b>{row[2]}</b></span><span>{row[3]}</span>
              </div>
            ))}
          </div>
        </section>
      </div>
    </section>
  );
}