"use client";

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


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-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",
};

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

const EMPTY_FORM: FormData = {
  chargePointIdentifier: "",
  chargePointVendor: "",
  chargePointModel: "",
  registrationStatus: "Pending",
  feePerKwh: "0",
};

export default function ChargePointsPage() {
  const [chargePoints, setChargePoints] = useState<ChargePoint[]>([]);
  const [formOpen, setFormOpen] = useState(false);
  const [formTarget, setFormTarget] = useState<ChargePoint | null>(null);
  const [formData, setFormData] = useState<FormData>(EMPTY_FORM);
  const [formBusy, setFormBusy] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<ChargePoint | null>(null);
  const [deleting, setDeleting] = useState(false);
  const hasFetched = useRef(false);

  const load = useCallback(async () => {
    const data = await api.chargePoints.list().catch(() => []);
    setChargePoints(data);
  }, []);

  useEffect(() => {
    if (!hasFetched.current) {
      hasFetched.current = true;
      load();
    }
  }, [load]);

  const openCreate = () => {
    setFormTarget(null);
    setFormData(EMPTY_FORM);
    setFormOpen(true);
  };

  const openEdit = (cp: ChargePoint) => {
    setFormTarget(cp);
    setFormData({
      chargePointIdentifier: cp.chargePointIdentifier,
      chargePointVendor: cp.chargePointVendor ?? "",
      chargePointModel: cp.chargePointModel ?? "",
      registrationStatus: cp.registrationStatus as FormData["registrationStatus"],
      feePerKwh: String(cp.feePerKwh),
    });
    setFormOpen(true);
  };

  const handleSubmit = async () => {
    if (!formData.chargePointIdentifier.trim()) return;
    setFormBusy(true);
    try {
      const fee = Math.max(0, Math.round(Number(formData.feePerKwh) || 0));
      if (formTarget) {
        // Edit
        const updated = await api.chargePoints.update(String(formTarget.id), {
          chargePointVendor: formData.chargePointVendor,
          chargePointModel: formData.chargePointModel,
          registrationStatus: formData.registrationStatus,
          feePerKwh: fee,
        });
        setChargePoints((prev) =>
          prev.map((cp) => (cp.id === formTarget.id ? { ...updated, connectors: cp.connectors } : cp)),
        );
      } else {
        // Create
        const created = await api.chargePoints.create({
          chargePointIdentifier: formData.chargePointIdentifier.trim(),
          chargePointVendor: formData.chargePointVendor.trim() || undefined,
          chargePointModel: formData.chargePointModel.trim() || undefined,
          registrationStatus: formData.registrationStatus,
          feePerKwh: fee,
        });
        setChargePoints((prev) => [created, ...prev]);
      }
      setFormOpen(false);
    } finally {
      setFormBusy(false);
    }
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      await api.chargePoints.delete(String(deleteTarget.id));
      setChargePoints((prev) => prev.filter((cp) => cp.id !== deleteTarget.id));
      setDeleteTarget(null);
    } finally {
      setDeleting(false);
    }
  };

  const isEdit = formTarget !== null;

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold text-foreground">充电桩管理</h1>
          <p className="mt-0.5 text-sm text-muted">共 {chargePoints.length} 台设备</p>
        </div>
        <Button size="sm" variant="secondary" onPress={openCreate}>
          <Plus className="size-4" />
          新建充电桩
        </Button>
      </div>

      {/* Create / Edit modal */}
      <Modal isOpen={formOpen} onOpenChange={(open) => { if (!formBusy) setFormOpen(open); }}>
        <Modal.Backdrop>
          <Modal.Container scroll="outside">
            <Modal.Dialog className="sm:max-w-md">
              <Modal.CloseTrigger />
              <Modal.Header>
                <Modal.Heading>{isEdit ? "编辑充电桩" : "新建充电桩"}</Modal.Heading>
              </Modal.Header>
              <Modal.Body className="space-y-3">
                <TextField fullWidth isRequired isReadOnly={isEdit}>
                  <Label className="text-sm font-medium">标识符</Label>
                  <Input
                    placeholder="CP001"
                    value={formData.chargePointIdentifier}
                    onChange={(e) => setFormData((f) => ({ ...f, chargePointIdentifier: e.target.value }))}
                  />
                </TextField>
                <div className="grid grid-cols-2 gap-3">
                  <TextField fullWidth>
                    <Label className="text-sm font-medium">品牌</Label>
                    <Input
                      placeholder="ABB"
                      value={formData.chargePointVendor}
                      onChange={(e) => setFormData((f) => ({ ...f, chargePointVendor: e.target.value }))}
                    />
                  </TextField>
                  <TextField fullWidth>
                    <Label className="text-sm font-medium">型号</Label>
                    <Input
                      placeholder="Terra AC"
                      value={formData.chargePointModel}
                      onChange={(e) => setFormData((f) => ({ ...f, chargePointModel: e.target.value }))}
                    />
                  </TextField>
                </div>
                <div className="space-y-1.5">
                  <Label className="text-sm font-medium">注册状态</Label>
                  <Select
                    fullWidth
                    selectedKey={formData.registrationStatus}
                    onSelectionChange={(key) =>
                      setFormData((f) => ({ ...f, registrationStatus: String(key) as FormData["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={formData.feePerKwh}
                    onChange={(e) => setFormData((f) => ({ ...f, feePerKwh: e.target.value }))}
                  />
                </TextField>
                {!isEdit && (
                  <p className="text-xs text-muted">
                    手动创建的充电桩默认注册状态为 Pending，需手动改为 Accepted 后才可正常充电。
                  </p>
                )}
              </Modal.Body>
              <Modal.Footer className="flex justify-end gap-2">
                <Button variant="ghost" onPress={() => setFormOpen(false)}>
                  取消
                </Button>
                <Button
                  isDisabled={formBusy || !formData.chargePointIdentifier.trim()}
                  onPress={handleSubmit}
                >
                  {formBusy ? <Spinner size="sm" /> : isEdit ? "保存" : "创建"}
                </Button>
              </Modal.Footer>
            </Modal.Dialog>
          </Modal.Container>
        </Modal.Backdrop>
      </Modal>

      <Table>
        <Table.ScrollContainer>
          <Table.Content aria-label="充电桩列表" className="min-w-200">
            <Table.Header>
              <Table.Column isRowHeader>标识符</Table.Column>
              <Table.Column>品牌 / 型号</Table.Column>
              <Table.Column>注册状态</Table.Column>
              <Table.Column>电价（分/kWh）</Table.Column>
              <Table.Column>最后心跳</Table.Column>
              <Table.Column>接口状态</Table.Column>
              <Table.Column>{""}</Table.Column>
            </Table.Header>
            <Table.Body>
              {chargePoints.length === 0 && (
                <Table.Row id="empty">
                  <Table.Cell>
                    <span className="text-muted text-sm">暂无设备</span>
                  </Table.Cell>
                  <Table.Cell>{""}</Table.Cell>
                  <Table.Cell>{""}</Table.Cell>
                  <Table.Cell>{""}</Table.Cell>
                  <Table.Cell>{""}</Table.Cell>
                  <Table.Cell>{""}</Table.Cell>
                  <Table.Cell>{""}</Table.Cell>
                </Table.Row>
              )}
              {chargePoints.map((cp) => (
                <Table.Row key={cp.id} id={String(cp.id)}>
                  <Table.Cell>
                    <Link
                      href={`/dashboard/charge-points/${cp.id}`}
                      className="font-mono font-medium text-accent hover:underline"
                    >
                      {cp.chargePointIdentifier}
                    </Link>
                  </Table.Cell>
                  <Table.Cell>
                    {cp.chargePointVendor && cp.chargePointModel ? (
                      `${cp.chargePointVendor} / ${cp.chargePointModel}`
                    ) : (
                      <span className="text-muted">—</span>
                    )}
                  </Table.Cell>
                  <Table.Cell>
                    <Chip
                      color={registrationColorMap[cp.registrationStatus] ?? "warning"}
                      size="sm"
                      variant="soft"
                    >
                      {cp.registrationStatus}
                    </Chip>
                  </Table.Cell>
                  <Table.Cell className="tabular-nums">
                    {cp.feePerKwh > 0 ? (
                      <span>
                        {cp.feePerKwh} 分
                        <span className="ml-1 text-xs text-muted">
                          (¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
                        </span>
                      </span>
                    ) : (
                      <span className="text-muted">免费</span>
                    )}
                  </Table.Cell>
                  <Table.Cell>
                    {cp.lastHeartbeatAt ? (
                      new Date(cp.lastHeartbeatAt).toLocaleString("zh-CN")
                    ) : (
                      <span className="text-muted">—</span>
                    )}
                  </Table.Cell>
                  <Table.Cell>
                    <div className="flex flex-wrap gap-1.5">
                      {cp.connectors.length === 0 ? (
                        <span className="text-muted text-sm">—</span>
                      ) : (
                        [...cp.connectors].sort((a, b) => a.connectorId - b.connectorId).map((conn) => (
                          <div
                            key={conn.id}
                            className="flex items-center gap-1.5 rounded-lg border border-border bg-surface-secondary px-2 py-1"
                          >
                            <PlugConnection className="size-3 shrink-0 text-muted" />
                            <span className="text-xs font-medium tabular-nums text-muted">
                              #{conn.connectorId}
                            </span>
                            <span className="h-3 w-px bg-border" />
                            <span
                              className={`size-1.5 shrink-0 rounded-full ${
                                statusDotClass[conn.status] ?? "bg-warning"
                              }`}
                            />
                            <span className="text-xs text-foreground text-nowrap">
                              {statusLabelMap[conn.status] ?? conn.status}
                            </span>
                          </div>
                        ))
                      )}
                    </div>
                  </Table.Cell>
                  <Table.Cell>
                    <div className="flex items-center gap-1">
                      <Button isIconOnly size="sm" variant="tertiary" onPress={() => openEdit(cp)}>
                        <Pencil className="size-4" />
                      </Button>
                      <Modal>
                        <Button
                          isIconOnly
                          size="sm"
                          variant="danger-soft"
                          onPress={() => setDeleteTarget(cp)}
                        >
                          <TrashBin className="size-4" />
                        </Button>
                        <Modal.Backdrop>
                          <Modal.Container scroll="outside">
                            <Modal.Dialog className="sm:max-w-96">
                              <Modal.CloseTrigger />
                              <Modal.Header>
                                <Modal.Heading>确认删除充电桩</Modal.Heading>
                              </Modal.Header>
                              <Modal.Body>
                                <p className="text-sm text-muted">
                                  将删除充电桩{" "}
                                  <span className="font-mono font-medium text-foreground">
                                    {cp.chargePointIdentifier}
                                  </span>
                                  及其所有连接器和充电记录，此操作不可恢复。
                                </p>
                              </Modal.Body>
                              <Modal.Footer className="flex justify-end gap-2">
                                <Button slot="close" variant="ghost">
                                  取消
                                </Button>
                                <Button
                                  slot="close"
                                  variant="danger"
                                  isDisabled={deleting}
                                  onPress={handleDelete}
                                >
                                  {deleting ? <Spinner size="sm" /> : "确认删除"}
                                </Button>
                              </Modal.Footer>
                            </Modal.Dialog>
                          </Modal.Container>
                        </Modal.Backdrop>
                      </Modal>
                    </div>
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table.Content>
        </Table.ScrollContainer>
      </Table>
    </div>
  );
}