import Link from "next/link";
import {
  AlertCircle,
  ArrowRight,
  BookCheck,
  CheckCircle2,
  Clock,
  Dna,
  FlaskConical,
  GitBranch,
  GitFork,
  Leaf,
  ListChecks,
  MapPin,
  Package,
  Sprout,
  Tags,
  TestTube,
  TrendingUp,
  Users,
} from "lucide-react";

const stats = [
  { label: "Crop 作物", value: 4, icon: Leaf, iconBg: "bg-amber-500", change: "已配置" },
  { label: "Person 人员", value: 12, icon: Users, iconBg: "bg-blue-500", change: "+2 本月" },
  { label: "Location 地点", value: 8, icon: MapPin, iconBg: "bg-green-500", change: "3个活跃" },
  { label: "Program 项目", value: 5, icon: FlaskConical, iconBg: "bg-indigo-500", change: "进行中" },
  { label: "Study 研究", value: 16, icon: BookCheck, iconBg: "bg-purple-500", change: "+3 本季" },
  { label: "Germplasm 种质", value: 1247, icon: Dna, iconBg: "bg-teal-500", change: "已入库" },
  { label: "Observation 观测", value: "45,678", icon: TrendingUp, iconBg: "bg-violet-500", change: "今日 +238" },
  { label: "Sample 样品", value: 384, icon: TestTube, iconBg: "bg-rose-500", change: "96 待送检" },
];

const coreWorkflow = [
  { step: "第 1 步", title: "基础字典配置", desc: "录入 Crop、Person、Location、Season、Ontology", href: "/basic-dictionary/base/crop", status: "done" as const },
  { step: "第 2 步", title: "建立 Program 项目", desc: "创建育种项目，关联作物和负责人", href: "/project/program", status: "done" as const },
  { step: "第 3 步", title: "建立 Trial 试验", desc: "在 Program 下建立试验集合", href: "/project/trial", status: "done" as const },
  { step: "第 4 步", title: "建立 Study 研究", desc: "在 Trial 下建立具体实验单元，绑定地点和季节", href: "/project/study", status: "active" as const },
  { step: "第 5 步", title: "配置 ObservationVariable", desc: "建立 Trait + Method + Scale，生成采集模板", href: "/phenotyping/observation-variable", status: "pending" as const },
  { step: "第 6 步", title: "生成 ObservationUnit", desc: "导入 fieldbook，关联材料、位置、层级", href: "/phenotyping/observation-unit", status: "pending" as const },
  { step: "第 7 步", title: "录入 Observation", desc: "按矩阵表格录入田间观测数据", href: "/phenotyping/observation", status: "pending" as const },
];

const germplasmEntryOrder = [
  {
    step: "1",
    title: "维护育种方法",
    desc: "breeding_method：说明材料形成方式（杂交、回交、DH 等）",
    href: "/germplasm/breeding-method",
    icon: GitBranch,
  },
  {
    step: "2",
    title: "维护属性定义",
    desc: "germplasm_attribute_definition：配置材料可有哪些稳定属性",
    href: "/germplasm/germplasm?tab=attributes",
    icon: Tags,
  },
  {
    step: "3",
    title: "创建种质材料",
    desc: "germplasm：录入材料身份，关联作物与育种方法",
    href: "/germplasm/germplasm",
    icon: Dna,
  },
  {
    step: "4",
    title: "补充属性值",
    desc: "germplasm_attribute_value：为材料填写各属性的实际取值",
    href: "/germplasm/germplasm?tab=attribute-values",
    icon: ListChecks,
  },
  {
    step: "5",
    title: "创建杂交项目",
    desc: "crossing_project：将一组杂交计划归属到项目",
    href: "/germplasm/cross-pedigree",
    icon: GitFork,
  },
  {
    step: "6",
    title: "录入杂交与系谱",
    desc: "cross_entity / cross_parent / pedigree：计划杂交、实际杂交与亲本关系",
    href: "/germplasm/cross-pedigree",
    icon: Sprout,
  },
  {
    step: "7",
    title: "维护种子批次",
    desc: "seed_lot + seed_lot_content_mixture：实物库存与批次组成",
    href: "/germplasm/seed-lot",
    icon: Package,
  },
];

const recentActivity = [
  { time: "今天 10:23", action: "新增 Study", detail: "2026 Beijing Yield Trial", user: "Li Wei" },
  { time: "今天 09:15", action: "录入 Observation", detail: "238 条株高数据", user: "Zhang Ming" },
  { time: "昨天 16:40", action: "新增 Germplasm", detail: "15 个玉米品系", user: "Wang Fang" },
  { time: "昨天 14:22", action: "上传 Image", detail: "64 张田间照片", user: "Li Wei" },
  { time: "昨天 11:05", action: "新增 Sample", detail: "96 个 DNA 样品", user: "Chen Jian" },
];

const statusIcon = {
  done: CheckCircle2,
  active: Clock,
  pending: AlertCircle,
};

const statusClass = {
  done: "bg-green-50 dark:bg-green-400/10",
  active: "border border-blue-200 bg-blue-50 dark:border-blue-400/20 dark:bg-blue-400/10",
  pending: "bg-slate-50 dark:bg-slate-900",
};

const statusColor = {
  done: "text-green-500",
  active: "text-blue-500",
  pending: "text-slate-300",
};

export function BrapiDashboard() {
  return (
    <div className="space-y-6">
      <div className="rounded-2xl bg-gradient-to-r from-green-600 to-emerald-700 p-6 text-white shadow-agriculture">
        <h2 className="text-xl font-semibold">BrAPI 育种数据管理系统</h2>
        <p className="mt-1 text-sm text-green-100">基于 BrAPI v2 标准，覆盖种质资源、田间试验、表型采集与基因型分析全流程</p>
        <div className="mt-4 flex flex-wrap gap-6">
          <div><p className="text-2xl font-semibold text-white">2026</p><p className="text-xs text-green-200">当前年度</p></div>
          <div><p className="text-2xl font-semibold text-white">5</p><p className="text-xs text-green-200">进行中的项目</p></div>
          <div><p className="text-2xl font-semibold text-white">4</p><p className="text-xs text-green-200">活跃作物系统</p></div>
        </div>
      </div>

      <div className="rounded-xl border border-teal-200 bg-teal-50/60 p-5 dark:border-teal-400/20 dark:bg-teal-400/5">
        <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
          <div>
            <h3 className="text-sm font-medium text-teal-900 dark:text-teal-100">种质模块推荐录入顺序</h3>
            <p className="mt-1 text-xs text-teal-700/80 dark:text-teal-200/80">
              属性定义、属性值与种质材料已集中在「Germplasm 种质」页的三个 Tab；请按以下顺序录入，避免外键引用缺失。
            </p>
          </div>
          <Link
            href="/germplasm/germplasm"
            className="inline-flex items-center gap-1 rounded-lg bg-teal-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-teal-700"
          >
            进入种质页 <ArrowRight className="h-3 w-3" />
          </Link>
        </div>
        <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-3">
          {germplasmEntryOrder.map((item) => {
            const Icon = item.icon;
            return (
              <Link
                key={item.step}
                href={item.href}
                className="group flex items-start gap-3 rounded-lg border border-teal-100 bg-white p-3 transition-colors hover:border-teal-300 dark:border-teal-400/10 dark:bg-slate-950 dark:hover:border-teal-400/30"
              >
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700 dark:bg-teal-400/15 dark:text-teal-200">
                  {item.step}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <Icon className="h-3.5 w-3.5 text-teal-600 dark:text-teal-300" />
                    <span className="text-xs font-medium text-slate-800 dark:text-slate-100">{item.title}</span>
                  </div>
                  <p className="mt-1 text-[11px] leading-relaxed text-slate-500 dark:text-slate-400">{item.desc}</p>
                </div>
              </Link>
            );
          })}
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <div key={stat.label} className="rounded-xl border border-slate-200 bg-white p-4 transition-colors hover:border-slate-300 dark:border-slate-800 dark:bg-slate-950 dark:hover:border-slate-700">
              <div className="flex items-start justify-between">
                <div className={`rounded-lg p-2 ${stat.iconBg}`}><Icon className="h-4 w-4 text-white" /></div>
                <span className="text-[11px] text-slate-400">{stat.change}</span>
              </div>
              <p className="mt-3 text-2xl font-semibold text-slate-900 dark:text-slate-50">{stat.value}</p>
              <p className="mt-0.5 text-xs text-slate-500">{stat.label}</p>
            </div>
          );
        })}
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <div className="rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-950">
          <h3 className="mb-1 text-sm font-medium text-slate-700 dark:text-slate-200">试验与表型录入顺序</h3>
          <p className="mb-4 text-[11px] text-slate-400">Core → Program → Trial → Study → 表型采集</p>
          <div className="space-y-2">
            {coreWorkflow.map((step) => {
              const Icon = statusIcon[step.status];
              return (
                <Link
                  key={step.title}
                  href={step.href}
                  className={`flex items-start gap-3 rounded-lg p-3 transition-colors hover:opacity-90 ${statusClass[step.status]}`}
                >
                  <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${statusColor[step.status]}`} />
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <span className="text-[10px] text-slate-400">{step.step}</span>
                      <span className="text-xs font-medium text-slate-700 dark:text-slate-200">{step.title}</span>
                    </div>
                    <p className="mt-0.5 text-[11px] text-slate-400">{step.desc}</p>
                  </div>
                  <ArrowRight className="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-300" />
                </Link>
              );
            })}
          </div>
        </div>

        <div className="rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-950">
          <h3 className="mb-4 text-sm font-medium text-slate-700 dark:text-slate-200">最近操作记录</h3>
          <div className="space-y-3">
            {recentActivity.map((item) => (
              <div key={`${item.time}-${item.detail}`} className="flex items-start gap-3 border-b border-slate-100 pb-3 last:border-0 last:pb-0 dark:border-slate-800">
                <div className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-green-400" />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2"><span className="text-xs text-slate-700 dark:text-slate-200">{item.action}</span><span className="text-[11px] text-slate-400">— {item.detail}</span></div>
                  <div className="mt-0.5 flex items-center gap-2"><span className="text-[11px] text-slate-400">{item.time}</span><span className="text-[11px] text-slate-300">·</span><span className="text-[11px] text-slate-400">{item.user}</span></div>
                </div>
              </div>
            ))}
          </div>
          <button className="mt-4 flex items-center gap-1 text-xs text-blue-500 hover:text-blue-600" type="button">查看全部记录 <ArrowRight className="h-3 w-3" /></button>
        </div>
      </div>
    </div>
  );
}
