"use client";

import { use, useCallback, useEffect, useState } from "react";
import Link from "next/link";
import {
  Button,
  Chip,
  Input,
  Label,
  ListBox,
  Modal,
  Pagination,
  Select,
  Spinner,
  Table,
  TextField,
} from "@heroui/react";
import { ArrowLeft, Pencil, PlugConnection } from "@gravity-ui/icons";
import { api, type ChargePointDetail, type PaginatedTransactions } from "@/lib/api";

// ── Status maps ────────────────────────────────────────────────────────────

const statusLabelMap: Record<string, string> = {
  Available: "空闲",
  Charging: "充电中",
  Preparing: "准备中",
  Finishing: "结束中",
  SuspendedEV: "EV 暂停",
  SuspendedEVSE: "EVSE 暂停",
  Reserved: "已预约",
  Faulted: "故障",
  Unavailable: "不可用",
  Occupied: "占用",
};

const statusDotClass: Record<string, string> = {
  Available: "bg-success",
  Charging: "bg-[var(--accent)] animate-pulse",
  Preparing: "bg-warning animate-pulse",
  Finishing: "bg-warning",
  SuspendedEV: "bg-warning",
  SuspendedEVSE: "bg-warning",
  Reserved: "bg-warning",
  Faulted: "bg-danger",
  Unavailable: "bg-danger",
  Occupied: "bg-warning",
};

const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
  Accepted: "success",
  Pending: "warning",
  Rejected: "danger",
};

const TX_LIMIT = 10;

// ── Helpers ────────────────────────────────────────────────────────────────

function formatDuration(start: string, stop: string | null): string {
  if (!stop) return "进行中";
  const ms = new Date(stop).getTime() - new Date(start).getTime();
  const min = Math.floor(ms / 60000);
  if (min < 60) return `${min} 分钟`;
  const h = Math.floor(min / 60);
  const m = min % 60;
  return `${h}h ${m}m`;
}

function relativeTime(iso: string): string {
  const diff = Date.now() - new Date(iso).getTime();
  const s = Math.floor(diff / 1000);
  if (s < 60) return `${s} 秒前`;
  const m = Math.floor(s / 60);
  if (m < 60) return `${m} 分钟前`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h} 小时前`;
  const d = Math.floor(h / 24);
  return `${d} 天前`;
}

// ── Edit form type ─────────────────────────────────────────────────────────

type EditForm = {
  chargePointVendor: string;
  chargePointModel: string;
  registrationStatus: "Accepted" | "Pending" | "Rejected";
  feePerKwh: string;
};

// ── Component ──────────────────────────────────────────────────────────────

export default function ChargePointDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);

  const [cp, setCp] = useState<ChargePointDetail | null>(null);
  const [notFound, setNotFound] = useState(false);
  const [loading, setLoading] = useState(true);

  // transactions
  const [txData, setTxData] = useState<PaginatedTransactions | null>(null);
  const [txPage, setTxPage] = useState(1);
  const [txLoading, setTxLoading] = useState(true);

  // edit modal
  const [editOpen, setEditOpen] = useState(false);
  const [editBusy, setEditBusy] = useState(false);
  const [editForm, setEditForm] = useState<EditForm>({
    chargePointVendor: "",
    chargePointModel: "",
    registrationStatus: "Pending",
    feePerKwh: "0",
  });

  const loadCp = useCallback(async () => {
    setLoading(true);
    try {
      const data = await api.chargePoints.get(id);
      setCp(data);
    } catch {
      setNotFound(true);
    } finally {
      setLoading(false);
    }
  }, [id]);

  const loadTx = useCallback(
    async (p: number) => {
      setTxLoading(true);
      try {
        const data = await api.transactions.list({
          page: p,
          limit: TX_LIMIT,
          chargePointId: id,
        });
        setTxData(data);
      } finally {
        setTxLoading(false);
      }
    },
    [id],
  );

  useEffect(() => {
    loadCp();
  }, [loadCp]);

  useEffect(() => {
    loadTx(txPage);
  }, [txPage, loadTx]);

  const openEdit = () => {
    if (!cp) return;
    setEditForm({
      chargePointVendor: cp.chargePointVendor ?? "",
      chargePointModel: cp.chargePointModel ?? "",
      registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
      feePerKwh: String(cp.feePerKwh),
    });
    setEditOpen(true);
  };

  const handleEditSubmit = async () => {
    if (!cp) return;
    setEditBusy(true);
    try {
      const fee = Math.max(0, Math.round(Number(editForm.feePerKwh) || 0));
      const updated = await api.chargePoints.update(cp.id, {
        chargePointVendor: editForm.chargePointVendor,
        chargePointModel: editForm.chargePointModel,
        registrationStatus: editForm.registrationStatus,
        feePerKwh: fee,
      });
      setCp((prev) => (prev ? { ...prev, ...updated, connectors: prev.connectors } : prev));
      setEditOpen(false);
    } finally {
      setEditBusy(false);
    }
  };

  // Online if last heartbeat within 3× interval
  const isOnline =
    cp?.lastHeartbeatAt != null &&
    Date.now() - new Date(cp.lastHeartbeatAt).getTime() < (cp.heartbeatInterval ?? 60) * 3 * 1000;

  // ── Render: loading / not found ──────────────────────────────────────────

  if (loading) {
    return (
      <div className="flex h-48 items-center justify-center">
        <Spinner />
      </div>
    );
  }

  if (notFound || !cp) {
    return (
      <div className="space-y-4">
        <Link
          href="/dashboard/charge-points"
          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
        >
          <ArrowLeft className="size-4" />
          充电桩管理
        </Link>
        <p className="text-sm text-danger">充电桩不存在或已被删除。</p>
      </div>
    );
  }

  const sortedConnectors = [...cp.connectors].sort((a, b) => a.connectorId - b.connectorId);

  // ── Render ───────────────────────────────────────────────────────────────

  return (
    <div className="space-y-6">
      {/* Breadcrumb back */}
      <Link
        href="/dashboard/charge-points"
        className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
      >
        <ArrowLeft className="size-4" />
        充电桩管理
      </Link>

      {/* Header */}
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-1.5">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="font-mono text-2xl font-semibold text-foreground">
              {cp.chargePointIdentifier}
            </h1>
            <Chip
              color={registrationColorMap[cp.registrationStatus] ?? "warning"}
              size="sm"
              variant="soft"
            >
              {cp.registrationStatus}
            </Chip>
            <div className="flex items-center gap-1.5">
              <span
                className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`}
              />
              <span className="text-xs text-muted">{isOnline ? "在线" : "离线"}</span>
            </div>
          </div>
          {(cp.chargePointVendor || cp.chargePointModel) && (
            <p className="text-sm text-muted">
              {[cp.chargePointVendor, cp.chargePointModel].filter(Boolean).join(" · ")}
            </p>
          )}
        </div>
        <Button size="sm" variant="secondary" onPress={openEdit}>
          <Pencil className="size-4" />
          编辑
        </Button>
      </div>

      {/* Info grid */}
      <div className="grid gap-4 md:grid-cols-2">
        {/* Device info */}
        <div className="rounded-xl border border-border bg-surface p-4">
          <h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
          <dl className="divide-y divide-border">
            {[
              { label: "品牌", value: cp.chargePointVendor },
              { label: "型号", value: cp.chargePointModel },
              { label: "序列号", value: cp.chargePointSerialNumber },
              { label: "固件版本", value: cp.firmwareVersion },
              { label: "电表型号", value: cp.meterType },
              { label: "电表序列号", value: cp.meterSerialNumber },
              { label: "ICCID", value: cp.iccid },
              { label: "IMSI", value: cp.imsi },
            ].map(({ label, value }) => (
              <div key={label} className="flex items-center justify-between gap-4 py-2">
                <dt className="shrink-0 text-sm text-muted">{label}</dt>
                <dd className="truncate text-sm text-foreground">
                  {value ?? <span className="text-muted">—</span>}
                </dd>
              </div>
            ))}
          </dl>
        </div>

        {/* Operation info */}
        <div className="rounded-xl border border-border bg-surface p-4">
          <h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
          <dl className="divide-y divide-border">
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">注册状态</dt>
              <dd>
                <Chip
                  color={registrationColorMap[cp.registrationStatus] ?? "warning"}
                  size="sm"
                  variant="soft"
                >
                  {cp.registrationStatus}
                </Chip>
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">电价</dt>
              <dd className="text-sm text-foreground">
                {cp.feePerKwh > 0 ? (
                  <span>
                    {cp.feePerKwh} 分/kWh
                    <span className="ml-1 text-xs text-muted">
                      (¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
                    </span>
                  </span>
                ) : (
                  "免费"
                )}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">心跳间隔</dt>
              <dd className="text-sm text-foreground">
                {cp.heartbeatInterval != null ? (
                  `${cp.heartbeatInterval} 秒`
                ) : (
                  <span className="text-muted">—</span>
                )}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">最后心跳</dt>
              <dd className="text-right text-sm text-foreground">
                {cp.lastHeartbeatAt ? (
                  <span title={new Date(cp.lastHeartbeatAt).toLocaleString("zh-CN")}>
                    {relativeTime(cp.lastHeartbeatAt)}
                  </span>
                ) : (
                  <span className="text-muted">—</span>
                )}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">最后启动通知</dt>
              <dd className="text-right text-sm text-foreground">
                {cp.lastBootNotificationAt ? (
                  <span title={new Date(cp.lastBootNotificationAt).toLocaleString("zh-CN")}>
                    {relativeTime(cp.lastBootNotificationAt)}
                  </span>
                ) : (
                  <span className="text-muted">—</span>
                )}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">注册时间</dt>
              <dd className="text-sm text-foreground">
                {new Date(cp.createdAt).toLocaleDateString("zh-CN")}
              </dd>
            </div>
          </dl>
        </div>
      </div>

      {/* Connectors */}
      {sortedConnectors.length > 0 && (
        <div className="space-y-3">
          <h2 className="text-sm font-semibold text-foreground">接口状态</h2>
          <div className="flex flex-wrap gap-3">
            {sortedConnectors.map((conn) => (
              <div
                key={conn.id}
                className="flex min-w-40 flex-col gap-2 rounded-xl border border-border bg-surface p-3"
              >
                <div className="flex items-center gap-2">
                  <PlugConnection className="size-4 shrink-0 text-muted" />
                  <span className="text-sm font-medium text-foreground">
                    接口 #{conn.connectorId}
                  </span>
                  <span className="ml-auto flex items-center gap-1">
                    <span
                      className={`size-2 shrink-0 rounded-full ${statusDotClass[conn.status] ?? "bg-warning"}`}
                    />
                    <span className="text-xs text-muted">
                      {statusLabelMap[conn.status] ?? conn.status}
                    </span>
                  </span>
                </div>
                {conn.errorCode && conn.errorCode !== "NoError" && (
                  <p className="text-xs text-danger">错误: {conn.errorCode}</p>
                )}
                {conn.info && <p className="text-xs text-muted">{conn.info}</p>}
                <p className="text-xs text-muted">
                  更新于{" "}
                  {new Date(conn.lastStatusAt).toLocaleString("zh-CN", {
                    month: "2-digit",
                    day: "2-digit",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Transactions */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-semibold text-foreground">充电记录</h2>
          {txData && <span className="text-xs text-muted">共 {txData.total} 条</span>}
        </div>

        <Table>
          <Table.ScrollContainer>
            <Table.Content aria-label="充电记录">
              <Table.Header>
                <Table.Column isRowHeader>ID</Table.Column>
                <Table.Column>接口</Table.Column>
                <Table.Column>充电卡</Table.Column>
                <Table.Column>开始时间</Table.Column>
                <Table.Column>时长</Table.Column>
                <Table.Column>用电量</Table.Column>
                <Table.Column>费用</Table.Column>
                <Table.Column>停止原因</Table.Column>
              </Table.Header>
              <Table.Body
                renderEmptyState={() => (
                  <div className="py-8 text-center text-sm text-muted">
                    {txLoading ? "加载中…" : "暂无充电记录"}
                  </div>
                )}
              >
                {(txData?.data ?? []).map((tx) => (
                  <Table.Row key={tx.id} id={tx.id}>
                    <Table.Cell className="font-mono text-sm text-muted">#{tx.id}</Table.Cell>
                    <Table.Cell>
                      {tx.connectorNumber != null ? (
                        `#${tx.connectorNumber}`
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </Table.Cell>
                    <Table.Cell className="font-mono">{tx.idTag}</Table.Cell>
                    <Table.Cell className="tabular-nums text-sm">
                      {new Date(tx.startTimestamp).toLocaleString("zh-CN", {
                        month: "2-digit",
                        day: "2-digit",
                        hour: "2-digit",
                        minute: "2-digit",
                      })}
                    </Table.Cell>
                    <Table.Cell>{formatDuration(tx.startTimestamp, tx.stopTimestamp)}</Table.Cell>
                    <Table.Cell className="tabular-nums">
                      {tx.energyWh != null ? (
                        `${(tx.energyWh / 1000).toFixed(2)} kWh`
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </Table.Cell>
                    <Table.Cell className="tabular-nums">
                      {tx.chargeAmount != null ? (
                        `¥${(tx.chargeAmount / 100).toFixed(2)}`
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </Table.Cell>
                    <Table.Cell>
                      {tx.stopReason ?? <span className="text-muted">—</span>}
                    </Table.Cell>
                  </Table.Row>
                ))}
              </Table.Body>
            </Table.Content>
          </Table.ScrollContainer>
        </Table>

        {txData && txData.totalPages > 1 && (
          <div className="flex justify-center">
            <Pagination size="sm">
              <Pagination.Content>
                <Pagination.Item>
                  <Pagination.Previous
                    isDisabled={txPage === 1}
                    onPress={() => setTxPage((p) => Math.max(1, p - 1))}
                  >
                    <Pagination.PreviousIcon />
                    上一页
                  </Pagination.Previous>
                </Pagination.Item>
                {Array.from({ length: txData.totalPages }, (_, i) => i + 1).map((p) => (
                  <Pagination.Item key={p}>
                    <Pagination.Link isActive={p === txPage} onPress={() => setTxPage(p)}>
                      {p}
                    </Pagination.Link>
                  </Pagination.Item>
                ))}
                <Pagination.Item>
                  <Pagination.Next
                    isDisabled={txPage === txData.totalPages}
                    onPress={() => setTxPage((p) => Math.min(txData.totalPages, p + 1))}
                  >
                    下一页
                    <Pagination.NextIcon />
                  </Pagination.Next>
                </Pagination.Item>
              </Pagination.Content>
            </Pagination>
          </div>
        )}
      </div>

      {/* Edit modal */}
      <Modal
        isOpen={editOpen}
        onOpenChange={(open) => {
          if (!editBusy) setEditOpen(open);
        }}
      >
        <Modal.Backdrop>
          <Modal.Container scroll="outside">
            <Modal.Dialog className="sm:max-w-md">
              <Modal.CloseTrigger />
              <Modal.Header>
                <Modal.Heading>编辑充电桩</Modal.Heading>
              </Modal.Header>
              <Modal.Body className="space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <TextField fullWidth>
                    <Label className="text-sm font-medium">品牌</Label>
                    <Input
                      placeholder="Unknown"
                      value={editForm.chargePointVendor}
                      onChange={(e) =>
                        setEditForm((f) => ({ ...f, chargePointVendor: e.target.value }))
                      }
                    />
                  </TextField>
                  <TextField fullWidth>
                    <Label className="text-sm font-medium">型号</Label>
                    <Input
                      placeholder="Unknown"
                      value={editForm.chargePointModel}
                      onChange={(e) =>
                        setEditForm((f) => ({ ...f, chargePointModel: e.target.value }))
                      }
                    />
                  </TextField>
                </div>
                <div className="space-y-1.5">
                  <Label className="text-sm font-medium">注册状态</Label>
                  <Select
                    fullWidth
                    selectedKey={editForm.registrationStatus}
                    onSelectionChange={(key) =>
                      setEditForm((f) => ({
                        ...f,
                        registrationStatus: String(key) as EditForm["registrationStatus"],
                      }))
                    }
                  >
                    <Select.Trigger>
                      <Select.Value />
                      <Select.Indicator />
                    </Select.Trigger>
                    <Select.Popover>
                      <ListBox>
                        <ListBox.Item id="Accepted">Accepted</ListBox.Item>
                        <ListBox.Item id="Pending">Pending</ListBox.Item>
                        <ListBox.Item id="Rejected">Rejected</ListBox.Item>
                      </ListBox>
                    </Select.Popover>
                  </Select>
                </div>
                <TextField fullWidth>
                  <Label className="text-sm font-medium">电价（分/kWh）</Label>
                  <Input
                    type="number"
                    min="0"
                    step="1"
                    placeholder="0"
                    value={editForm.feePerKwh}
                    onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
                  />
                </TextField>
              </Modal.Body>
              <Modal.Footer className="flex justify-end gap-2">
                <Button variant="ghost" onPress={() => setEditOpen(false)}>
                  取消
                </Button>
                <Button isDisabled={editBusy} onPress={handleEditSubmit}>
                  {editBusy ? <Spinner size="sm" /> : "保存"}
                </Button>
              </Modal.Footer>
            </Modal.Dialog>
          </Modal.Container>
        </Modal.Backdrop>
      </Modal>
    </div>
  );
}