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

const TREND_VALUES = [38, 55, 44, 73, 61, 86, 78] as const;
const TREND_LABELS = ["周一", "周二", "周三", "周四", "周五", "周六", "今天"] as const;

const ACTIVITY_ROWS = [
  ["数据探索.ipynb 发布稳定版本 v3.0", "张三", "成功", "16:42"],
  ["每日模型训练流程完成调度运行", "Scheduler", "成功", "15:25"],
  ["批量预测.py 更新工作副本", "王五", "已同步", "14:18"],
  ["风险验证流程完成 DAG 校验", "李四", "成功", "11:06"],
] as const;

function LegendDot({ className }: { className: string }) {
  return <i className={`inline-block size-[7px] rounded-full ${className}`} />;
}

export function DashboardPage({
  scriptCount,
  online,
  onNavigate,
}: {
  scriptCount: number;
  online: boolean;
  onNavigate: (page: "scripts" | "schedules" | "system") => void;
}) {
  const { user, currentWorkspace } = useAuth();
  const hasSystemView = usePermission("system:view");
  const notebookCount = Math.max(1, Math.round(scriptCount * 0.67));
  const pythonCount = Math.max(0, scriptCount - Math.round(scriptCount * 0.67));

  return (
    <section className="h-full overflow-auto bg-bg p-6">
      <div className="dashboard-hero-shell flex items-center justify-between rounded-xl px-[34px] py-[34px] text-white shadow-[0_12px_30px_rgb(19_80_137/18%)]">
        <div>
          <span className="text-[10px] tracking-[0.12em] opacity-80">
            MODEL DEVELOPMENT PLATFORM
          </span>
          <h2 className="my-2 mb-[5px] text-[25px]">
            下午好，{user?.display_name ?? "用户"}
          </h2>
          <p className="m-0 text-xs opacity-90">
            当前位于 {currentWorkspace?.workspace_name ?? "（未选择 Workspace）"}
            ，可以继续构建脚本或配置调度。
          </p>
        </div>
        <span className="rounded-[20px] bg-white/16 px-3 py-2 text-sm">
          {online ? "服务正常" : "服务连接中"}
        </span>
      </div>

      <div className="mt-[18px] grid grid-cols-4 gap-3.5">
        {[
          { icon: "script" as const, value: scriptCount, label: "工作副本" },
          { icon: "workspace" as const, value: 2, label: "Workspace" },
          { icon: "settings" as const, value: 4, label: "平台用户" },
          {
            icon: "check" as const,
            value: online ? "正常" : "检查中",
            label: "平台状态",
          },
        ].map((item) => (
          <article
            key={item.label}
            className="flex items-center gap-3.5 rounded-[9px] border border-[#e0e8ef] bg-white p-5"
          >
            <span className="text-brand">
              <Icon name={item.icon} />
            </span>
            <span className="flex flex-col">
              <b className="text-[21px] text-[#20364c]">{item.value}</b>
              <small className="text-[#8796a6]">{item.label}</small>
            </span>
          </article>
        ))}
      </div>

      <div className="mt-[18px] flex gap-3">
        <button
          type="button"
          className="flex cursor-pointer items-center gap-2 rounded-[7px] border border-[#d8e4ef] bg-white px-[18px] py-[13px] text-[#346587]"
          onClick={() => onNavigate("scripts")}
        >
          <Icon name="script" />
          构建脚本
        </button>
        <button
          type="button"
          className="flex cursor-pointer items-center gap-2 rounded-[7px] border border-[#d8e4ef] bg-white px-[18px] py-[13px] text-[#346587]"
          onClick={() => onNavigate("schedules")}
        >
          <Icon name="schedule" />
          调度配置
        </button>
        {hasSystemView && (
          <button
            type="button"
            className="flex cursor-pointer items-center gap-2 rounded-[7px] border border-[#d8e4ef] bg-white px-[18px] py-[13px] text-[#346587]"
            onClick={() => onNavigate("system")}
          >
            <Icon name="settings" />
            系统管理
          </button>
        )}
      </div>

      <div className="mt-[18px] grid gap-3.5 pb-[25px] max-[1200px]:grid-cols-1 min-[1201px]:grid-cols-[minmax(0,1.6fr)_minmax(310px,0.9fr)]">
        <section className="rounded-[10px] border border-[#dfe7ee] bg-white shadow-[0_5px_16px_rgb(33_65_97/5%)]">
          <header className="flex items-center justify-between border-b border-line-soft px-5 py-[17px]">
            <div>
              <span className="text-[9px] font-extrabold tracking-[0.09em] text-[#7890a6]">
                运行趋势
              </span>
              <h3 className="mt-1 text-sm text-[#263b50]">近 7 天调度执行</h3>
            </div>
            <b className="rounded-[13px] bg-[#e8f8f1] px-[9px] py-[5px] text-[10px] text-[#16855a]">
              成功率 92.6%
            </b>
          </header>
          <div className="trend-chart-bg flex h-[190px] items-end gap-[18px] px-7 pb-[17px] pt-[26px]">
            {TREND_VALUES.map((value, index) => (
              <div
                className="flex h-full flex-1 flex-col items-center justify-end gap-[5px]"
                key={TREND_LABELS[index]}
              >
                <span className="text-[9px] text-[#7890a3]">
                  {Math.round(value / 7)}
                </span>
                <i
                  className="block min-h-3 w-[min(36px,72%)] rounded-t-[5px] rounded-b-[2px] bg-gradient-to-b from-[#49a0eb] to-[#207bd1] shadow-[0_4px_9px_rgb(32_123_209/18%)]"
                  style={{ height: `${value}%` }}
                />
                <small className="text-[9px] text-[#7890a3]">
                  {TREND_LABELS[index]}
                </small>
              </div>
            ))}
          </div>
          <footer className="flex justify-center gap-[22px] p-2.5 text-[9px] text-[#708397]">
            <span className="flex items-center gap-[5px]">
              <LegendDot className="bg-[#27b87c]" />
              成功 75
            </span>
            <span className="flex items-center gap-[5px]">
              <LegendDot className="bg-[#ed7777]" />
              失败 6
            </span>
          </footer>
        </section>

        <section className="rounded-[10px] border border-[#dfe7ee] bg-white shadow-[0_5px_16px_rgb(33_65_97/5%)]">
          <header className="flex items-center justify-between border-b border-line-soft px-5 py-[17px]">
            <div>
              <span className="text-[9px] font-extrabold tracking-[0.09em] text-[#7890a6]">
                脚本资产
              </span>
              <h3 className="mt-1 text-sm text-[#263b50]">类型分布</h3>
            </div>
          </header>
          <div className="flex min-h-[226px] items-center justify-center gap-7 p-5">
            <div className="dashboard-donut relative grid size-32 shrink-0 place-items-center rounded-full">
              <span className="z-[1] flex flex-col items-center">
                <b className="text-xl text-[#273d53]">{scriptCount}</b>
                <small className="text-[8px] text-[#8a9aaa]">全部脚本</small>
              </span>
            </div>
            <div className="flex flex-col gap-[15px]">
              {[
                {
                  color: "bg-[#318de0]",
                  title: "Notebook",
                  detail: `${notebookCount} 个 · 67%`,
                },
                {
                  color: "bg-[#72c9b0]",
                  title: "Python",
                  detail: `${pythonCount} 个 · 33%`,
                },
                {
                  color: "bg-[#f3b75c]",
                  title: "稳定版本",
                  detail: "3 个已发布",
                },
              ].map((item) => (
                <span
                  key={item.title}
                  className="grid grid-cols-[8px_1fr] items-center gap-x-[7px]"
                >
                  <LegendDot className={item.color} />
                  <b className="text-[10px] text-[#40566c]">{item.title}</b>
                  <small className="col-start-2 text-[8px] text-[#8a9baa]">
                    {item.detail}
                  </small>
                </span>
              ))}
            </div>
          </div>
        </section>

        <section className="col-span-full rounded-[10px] border border-[#dfe7ee] bg-white shadow-[0_5px_16px_rgb(33_65_97/5%)] max-[1200px]:col-auto">
          <header className="flex items-center justify-between border-b border-line-soft px-5 py-[17px]">
            <div>
              <span className="text-[9px] font-extrabold tracking-[0.09em] text-[#7890a6]">
                ACTIVITY
              </span>
              <h3 className="mt-1 text-sm text-[#263b50]">最近平台活动</h3>
            </div>
            <button
              type="button"
              className="border-0 bg-transparent text-[10px] text-[#257bcb]"
            >
              查看全部
            </button>
          </header>
          <div>
            <div className="grid grid-cols-[2fr_0.7fr_0.55fr_0.5fr] items-center gap-[15px] bg-[#f7f9fb] px-5 py-[11px] text-[9px] font-bold text-[#8595a5]">
              <span>操作内容</span>
              <span>执行人</span>
              <span>状态</span>
              <span>时间</span>
            </div>
            {ACTIVITY_ROWS.map((row) => (
              <div
                className="grid grid-cols-[2fr_0.7fr_0.55fr_0.5fr] items-center gap-[15px] border-t border-line-soft px-5 py-[11px] text-[10px] text-[#607488]"
                key={row[0]}
              >
                <span className="flex items-center gap-[9px] text-[#344c63]">
                  <i className="grid size-[25px] place-items-center rounded-md bg-[#eaf4ff] text-[#277fcc]">
                    <Icon name="check" size={13} />
                  </i>
                  {row[0]}
                </span>
                <span>{row[1]}</span>
                <span>
                  <b className="rounded-[10px] bg-[#e9f8f2] px-[7px] py-[3px] text-[9px] text-[#16855a]">
                    {row[2]}
                  </b>
                </span>
                <span>{row[3]}</span>
              </div>
            ))}
          </div>
        </section>
      </div>
    </section>
  );
}