import type { ColumnDef } from "@tanstack/react-table"
import { useMemo, useState } from "react"
import DataTable from "@/components/data-table"
import Page from "@/components/page"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  formatPackType,
  HTTP_USE_PACK_TYPE_OPTIONS,
  type HttpUsedLogItem,
} from "@/lib/models/record"
import { MOCK_USED_LOGS, MOCK_USED_SUMMARY } from "./mock"

const columns: ColumnDef<HttpUsedLogItem>[] = [
  {
    accessorKey: "packType",
    header: "使用类型",
    cell: ({ row }) => formatPackType(row.original.packType),
  },
  {
    accessorKey: "userIp",
    header: "客户端IP",
  },
  {
    accessorKey: "ip",
    header: "使用IP",
  },
  {
    accessorKey: "port",
    header: "端口号",
  },
  {
    accessorKey: "createTime",
    header: "使用时间",
  },
]

function StatCard(props: {
  label: string
  value: number
  accent: "amber" | "blue"
}) {
  return (
    <div
      className={`rounded-lg p-4 flex flex-col gap-1 ${
        props.accent === "amber" ? "bg-amber-100" : "bg-blue-100"
      }`}
    >
      <span className="text-sm text-gray-600">{props.label}</span>
      <span className="text-2xl font-semibold">{props.value} 个</span>
    </div>
  )
}

export default function RecordPage() {
  const [packType, setPackType] = useState(HTTP_USE_PACK_TYPE_OPTIONS[0])
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  const filtered = useMemo(
    () => MOCK_USED_LOGS.filter(log => log.packType === packType),
    [packType],
  )

  const paged = useMemo(
    () => filtered.slice((page - 1) * pageSize, page * pageSize),
    [filtered, page, pageSize],
  )

  const handlePackTypeChange = (value: string) => {
    setPackType(Number(value))
    setPage(1)
  }

  return (
    <Page>
      <div className="bg-white rounded-lg p-4 flex flex-col gap-4">
        <h3 className="font-semibold text-lg">包天包量使用概况</h3>
        <div className="grid grid-cols-4 sm:grid-cols-4 gap-4">
          <StatCard
            label="当日使用IP数量"
            value={MOCK_USED_SUMMARY.todayShortPackIpUsed}
            accent="amber"
          />
          <StatCard
            label="累计使用IP数量"
            value={MOCK_USED_SUMMARY.shortPackIpUsed}
            accent="blue"
          />
        </div>
      </div>

      <div className="bg-white rounded-lg p-4 flex flex-col gap-4">
        <div className="flex flex-col gap-4">
          <p className="text-sm text-orange-600">
            明细 最多允许查看72小时内记录（短效无限量套餐暂无记录）
          </p>

          <Select value={String(packType)} onValueChange={handlePackTypeChange}>
            <SelectTrigger className="w-44">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {HTTP_USE_PACK_TYPE_OPTIONS.map(type => (
                <SelectItem key={type} value={String(type)}>
                  {formatPackType(type)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <DataTable
          data={paged}
          status="done"
          columns={columns}
          pagination={{
            page,
            size: pageSize,
            total: filtered.length,
            onPageChange: setPage,
            onSizeChange: size => {
              setPageSize(size)
              setPage(1)
            },
          }}
        />
      </div>
    </Page>
  )
}
