import Link from "next/link"

export type DashboardPageProps = {}

export default function DashboardPage(props: DashboardPageProps) {
  return (
    <div className="space-y-5">
      {/* 欢迎区域 - 全宽 */}
      <div className="bg-white border border-gray-200 rounded-md">
        <div className="flex items-center justify-between p-5">
          <div>
            <h1 className="text-xl font-bold text-gray-800">
              IP代理管理控制台
            </h1>
            <p className="text-gray-500 mt-1">上次更新: -</p>
          </div>
          <div className="flex space-x-3">
            <button className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
              查看使用报告
            </button>
            <button className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
              添加新代理
            </button>
          </div>
        </div>
      </div>

      {/* 主体内容 - 双栏布局 */}
      <div className="flex flex-col lg:flex-row space-y-5 lg:space-y-0 lg:space-x-5">
        {/* 左侧栏 - 占比较大 */}
        <div className="w-full lg:w-8/12 space-y-5">
          {/* 代理资源统计卡片组 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5">
            <DataCard
              title="在线代理"
              value="14,283"
              change="+12.5%"
              isIncrease={true}
              icon={
                <svg
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 12h14M12 5l7 7-7 7"
                  />
                </svg>
              }
            />
            <DataCard
              title="总请求数"
              value="851,492"
              change="+8.2%"
              isIncrease={true}
              icon={
                <svg
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                  />
                </svg>
              }
            />
            <DataCard
              title="成功率"
              value="98.5%"
              change="+2.4%"
              isIncrease={true}
              icon={
                <svg
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              }
            />
            <DataCard
              title="平均响应时间"
              value="0.82s"
              change="-12.3%"
              isIncrease={true}
              icon={
                <svg
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              }
            />
          </div>

          {/* 代理使用图表 */}
          <div className="bg-white border border-gray-200 rounded-md">
            <div className="flex justify-between items-center p-5 border-b border-gray-200">
              <h2 className="font-bold text-gray-800">代理使用趋势</h2>
              <div className="flex items-center space-x-2">
                <select className="text-sm border border-gray-200 rounded-md px-3 py-1 bg-white">
                  <option>今日</option>
                  <option>本周</option>
                  <option>本月</option>
                  <option>全年</option>
                </select>
              </div>
            </div>
            <div className="h-80 bg-white p-5 flex items-center justify-center text-gray-400 border-b border-gray-200">
              请求量与响应时间统计图表
            </div>
            <div className="flex justify-between p-5 text-sm">
              <div className="text-gray-500">
                <span className="inline-block w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
                请求数量
              </div>
              <div className="text-gray-500">
                <span className="inline-block w-3 h-3 rounded-full bg-green-500 mr-1"></span>
                成功率
              </div>
              <div className="text-gray-500">
                <span className="inline-block w-3 h-3 rounded-full bg-orange-500 mr-1"></span>
                响应时间
              </div>
            </div>
          </div>

          {/* IP代理列表 */}
          <div className="bg-white border border-gray-200 rounded-md">
            <div className="p-5 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="font-bold text-gray-800">活跃代理IP</h2>
                <Link
                  href="/proxies"
                  className="text-blue-600 text-sm hover:underline"
                >
                  查看全部
                </Link>
              </div>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
                    <th className="px-5 py-3">IP地址</th>
                    <th className="px-5 py-3">位置</th>
                    <th className="px-5 py-3">状态</th>
                    <th className="px-5 py-3">请求次数</th>
                    <th className="px-5 py-3">成功率</th>
                    <th className="px-5 py-3">操作</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {[1, 2, 3, 4, 5].map(item => (
                    <ContentRow
                      key={item}
                      ip={`192.168.${item}.${item * 10}`}
                      location={item % 2 === 0 ? "中国" : "美国"}
                      status={
                        item % 3 === 0
                          ? "error"
                          : item % 2 === 0
                            ? "warning"
                            : "active"
                      }
                      requests={1}
                      successRate={`2%`}
                    />
                  ))}
                </tbody>
              </table>
            </div>
            <div className="p-3 bg-gray-50 border-t border-gray-200 flex justify-end">
              <button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">
                上一页
              </button>
              <button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">
                下一页
              </button>
            </div>
          </div>
        </div>

        {/* 右侧栏 - 占比较小 */}
        <div className="w-full lg:w-4/12 space-y-5">
          {/* 代理资源分布 */}
          <div className="bg-white border border-gray-200 rounded-md">
            <div className="p-5 border-b border-gray-200">
              <h2 className="font-bold text-gray-800">资源分布</h2>
            </div>
            <div className="h-64 bg-white p-5 flex items-center justify-center text-gray-400">
              IP地区分布饼图
            </div>
            <div className="grid grid-cols-2 gap-3 p-5 border-t border-gray-200">
              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
                <span className="text-xs text-gray-600">中国</span>
                <span className="text-xs font-medium">42%</span>
              </div>
              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
                <span className="text-xs text-gray-600">美国</span>
                <span className="text-xs font-medium">28%</span>
              </div>
              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
                <span className="text-xs text-gray-600">欧洲</span>
                <span className="text-xs font-medium">16%</span>
              </div>
              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
                <span className="text-xs text-gray-600">其他</span>
                <span className="text-xs font-medium">14%</span>
              </div>
            </div>
          </div>

          {/* 系统告警 */}
          <div className="bg-white border border-gray-200 rounded-md">
            <div className="p-5 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="font-bold text-gray-800">告警通知</h2>
                <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">
                  3 个新告警
                </span>
              </div>
            </div>
            <div className="p-3 space-y-3">
              <AlertItem
                title="IP不足告警"
                severity="high"
                time="10分钟前"
                message="特定地区(美国加州)代理IP资源不足，影响用户请求。"
              />
              <AlertItem
                title="响应延迟"
                severity="medium"
                time="30分钟前"
                message="欧洲区域代理响应时间超过阈值(1.5s)，请检查网络状况。"
              />
              <AlertItem
                title="异常请求"
                severity="low"
                time="2小时前"
                message="检测到异常请求模式，可能存在爬虫攻击行为。"
              />
            </div>
            <div className="p-4 border-t border-gray-200">
              <button className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
                查看全部告警
              </button>
            </div>
          </div>

          {/* 系统状态 */}
          <div className="bg-white border border-gray-200 rounded-md">
            <div className="p-5 border-b border-gray-200">
              <div className="flex justify-between items-center">
                <h2 className="font-bold text-gray-800">系统状态</h2>
                <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">
                  运行正常
                </span>
              </div>
            </div>
            <div className="p-3 space-y-3">
              <StatusBar title="代理服务器负载" value={28} status="normal" />
              <StatusBar title="带宽使用率" value={65} status="normal" />
              <StatusBar title="存储空间" value={82} status="warning" />
              <StatusBar title="API请求队列" value={45} status="normal" />
            </div>
            <div className="p-4 border-t border-gray-200">
              <Link
                href="/system/status"
                className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors"
              >
                查看详细状态
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// 数据卡片组件 - 显示关键指标
function DataCard({
  title,
  value,
  change,
  isIncrease,
  icon,
}: {
  title: string
  value: string
  change: string
  isIncrease: boolean
  icon: React.ReactNode
}) {
  return (
    <div className="bg-white border border-gray-200 rounded-md p-5">
      <div className="flex justify-between items-center">
        <div>
          <h3 className="text-sm text-gray-500">{title}</h3>
          <p className="text-xl font-bold mt-1 text-gray-800">{value}</p>
          <div className="flex items-center mt-2">
            <span
              className={`text-xs font-medium ${isIncrease ? "text-green-600" : "text-red-600"}`}
            >
              {change}
            </span>
            <span className="text-xs text-gray-400 ml-1">相比上周期</span>
          </div>
        </div>
        <div
          className={`p-3 rounded-md ${isIncrease ? "bg-blue-50 text-blue-600" : "bg-orange-50 text-orange-500"} border ${isIncrease ? "border-blue-100" : "border-orange-100"}`}
        >
          {icon}
        </div>
      </div>
    </div>
  )
}

// 代理IP内容行组件
function ContentRow({
  ip,
  location,
  status,
  requests,
  successRate,
}: {
  ip: string
  location: string
  status: "active" | "warning" | "error"
  requests: number
  successRate: string
}) {
  const statusConfig = {
    active: {
      color: "bg-green-100 text-green-800 border-green-200",
      label: "在线",
    },
    warning: {
      color: "bg-yellow-100 text-yellow-800 border-yellow-200",
      label: "不稳定",
    },
    error: { color: "bg-red-100 text-red-800 border-red-200", label: "离线" },
  }

  return (
    <tr className="hover:bg-gray-50">
      <td className="px-5 py-4">
        <div className="font-mono text-sm">{ip}</div>
      </td>
      <td className="px-5 py-4">
        <div className="text-sm text-gray-700">{location}</div>
      </td>
      <td className="px-5 py-4">
        <span
          className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}
        >
          {statusConfig[status].label}
        </span>
      </td>
      <td className="px-5 py-4 text-sm text-gray-700">
        {requests.toLocaleString()}
      </td>
      <td className="px-5 py-4 text-sm text-gray-700">{successRate}</td>
      <td className="px-5 py-4">
        <div className="flex space-x-2">
          <button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
            <svg
              className="h-4 w-4 text-gray-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
              />
            </svg>
          </button>
          <button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
            <svg
              className="h-4 w-4 text-gray-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
              />
            </svg>
          </button>
          <button className="p-1 border border-red-200 rounded-md hover:bg-red-50">
            <svg
              className="h-4 w-4 text-red-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </td>
    </tr>
  )
}

// 告警通知组件
function AlertItem({
  title,
  severity,
  time,
  message,
}: {
  title: string
  severity: "high" | "medium" | "low"
  time: string
  message: string
}) {
  const severityConfig = {
    high: { color: "bg-red-50 border-red-200", dot: "bg-red-500" },
    medium: { color: "bg-yellow-50 border-yellow-200", dot: "bg-yellow-500" },
    low: { color: "bg-blue-50 border-blue-200", dot: "bg-blue-500" },
  }

  return (
    <div className={`p-3 rounded-md ${severityConfig[severity].color} border`}>
      <div className="flex justify-between items-start">
        <div className="flex items-center">
          <span
            className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}
          ></span>
          <span className="font-medium text-gray-800 text-sm">{title}</span>
        </div>
        <span className="text-xs text-gray-500">{time}</span>
      </div>
      <p className="mt-2 text-xs text-gray-600">{message}</p>
    </div>
  )
}

// 系统状态条组件
function StatusBar({
  title,
  value,
  status,
}: {
  title: string
  value: number
  status: "normal" | "warning" | "error"
}) {
  const statusConfig = {
    normal: { color: "bg-green-500", bgColor: "bg-green-100" },
    warning: { color: "bg-yellow-500", bgColor: "bg-yellow-100" },
    error: { color: "bg-red-500", bgColor: "bg-red-100" },
  }

  return (
    <div className="p-3 border border-gray-200 rounded-md">
      <div className="flex justify-between mb-2">
        <span className="text-sm text-gray-700">{title}</span>
        <span className="text-sm font-medium">{value}%</span>
      </div>
      <div
        className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}
      >
        <div
          className={`h-2 ${statusConfig[status].color} rounded-full`}
          style={{ width: `${value}%` }}
        ></div>
      </div>
    </div>
  )
}