import React from "react";

type Metric = {
  label: string;
  value: string;
  sub: string;
};

type TaskCard = {
  name: string;
  region: string;
  completed: number;
  assigned: number;
  converted: number;
  progress: number;
  due: string;
  source: string;
};

const metrics: Metric[] = [
  { label: "已发现线索", value: "1,286", sub: "较昨日 +6.2%" },
  { label: "已生成客户", value: "372", sub: "客户转化率 28.9%" },
  { label: "高意向客户", value: "94", sub: "7日提升 +14" },
  { label: "运行中任务", value: "5", sub: "2 个高优先级" },
  { label: "平均触达成本", value: "¥18.7", sub: "较上周 -9.4%" },
];

const tasks: TaskCard[] = [
  {
    name: "中东SSD寻客",
    region: "中东 · 区域渠道",
    completed: 168,
    assigned: 840,
    converted: 26,
    progress: 65,
    due: "2026-03-18 20:00",
    source: "LinkedIn",
  },
  {
    name: "欧洲企业级存储",
    region: "欧洲 · 企业分销",
    completed: 93,
    assigned: 520,
    converted: 14,
    progress: 43,
    due: "2026-03-17 14:00",
    source: "Google Leads",
  },
  {
    name: "东南亚分销商",
    region: "东南亚 · 行业扩展",
    completed: 47,
    assigned: 310,
    converted: 9,
    progress: 29,
    due: "2026-03-18 18:00",
    source: "Alibaba",
  },
];

const styles = {
  page: {
    background: "#0B1220",
    color: "#D7E1F6",
    minHeight: "100vh",
    padding: 20,
    fontFamily: "Inter, PingFang SC, Microsoft YaHei, sans-serif",
  },
  sectionTitle: { fontSize: 16, fontWeight: 700, margin: "8px 0 12px 0" },
  cardGrid: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 },
  metricCard: {
    background: "#111B32",
    border: "1px solid #253458",
    borderRadius: 12,
    padding: 14,
  },
  value: { fontSize: 24, fontWeight: 800, color: "#F4F7FF", margin: "6px 0" },
  sub: { color: "#8CA0C9", fontSize: 12 },
  board: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 12 },
  taskCard: {
    background: "#111B32",
    border: "1px solid #253458",
    borderRadius: 12,
    padding: 14,
  },
  progressBg: {
    height: 8,
    borderRadius: 999,
    background: "#1B2745",
    overflow: "hidden",
    marginTop: 8,
  },
  progressBar: (p: number) => ({
    width: `${p}%`,
    height: "100%",
    background: "linear-gradient(90deg,#6A5CFF,#5AA3FF)",
  }),
  chip: {
    display: "inline-block",
    border: "1px solid #33508A",
    color: "#8FB1FF",
    borderRadius: 999,
    padding: "2px 8px",
    fontSize: 11,
    marginTop: 8,
  },
};

export default function IntelligentLeadsDashboardCanvas() {
  return (
    <div style={styles.page}>
      <div style={styles.sectionTitle}>智能寻客 - 经营总览</div>
      <div style={styles.cardGrid}>
        {metrics.map((m) => (
          <div key={m.label} style={styles.metricCard}>
            <div style={{ color: "#9AB0DA", fontSize: 12 }}>{m.label}</div>
            <div style={styles.value}>{m.value}</div>
            <div style={styles.sub}>{m.sub}</div>
          </div>
        ))}
      </div>

      <div style={{ ...styles.sectionTitle, marginTop: 18 }}>进行中的任务</div>
      <div style={styles.board}>
        {tasks.map((t) => (
          <div key={t.name} style={styles.taskCard}>
            <div style={{ fontSize: 15, fontWeight: 700, color: "#F0F4FF" }}>{t.name}</div>
            <div style={{ color: "#8CA0C9", fontSize: 12, marginTop: 4 }}>{t.region}</div>
            <div style={{ display: "flex", gap: 14, marginTop: 12, fontSize: 12 }}>
              <span>已采集 {t.completed}</span>
              <span>已分配 {t.assigned}</span>
              <span>已转化 {t.converted}</span>
            </div>
            <div style={styles.progressBg}>
              <div style={styles.progressBar(t.progress)} />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 12, color: "#8CA0C9" }}>
              <span>进度 {t.progress}%</span>
              <span>截止 {t.due}</span>
            </div>
            <span style={styles.chip}>来源: {t.source}</span>
          </div>
        ))}
      </div>
    </div>
  );
}