"use client";

/**
 * DeviceList — 裝置卡片網格 + 空狀態 + skeleton
 *
 * 來源：`local-tool/frontend/src/components/devices/device-list.tsx`（雲端版改造）
 *
 * 對齊：
 *   - `.autoflow/03-design/pages.md` §5.3（空狀態）
 *
 * 改動：
 *   - 空狀態導向 `/devices/pair`（F7 的 Pairing 頁），不再是 scan
 *   - 排序：在線優先（online → reconnecting → unknown → offline → error）
 */

import Link from "next/link";
import { useRouter } from "next/navigation";
import { Link2 } from "lucide-react";

import { DeviceCard } from "@/components/devices/device-card";
import { EmptyState } from "@/components/ui/empty-state";
import { Skeleton } from "@/components/ui/skeleton";
import { useT } from "@/lib/i18n/context";
import type { DeviceSummary, RemoteStatus } from "@/stores/device-store";

interface DeviceListProps {
  devices: DeviceSummary[];
  loading?: boolean;
}

const STATUS_ORDER: Record<RemoteStatus, number> = {
  online: 0,
  reconnecting: 1,
  unknown: 2,
  offline: 3,
  error: 4,
};

export function DeviceList({ devices, loading }: DeviceListProps) {
  const t = useT();
  const router = useRouter();

  if (loading) {
    return (
      <div
        className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
        data-testid="device-list-skeleton"
      >
        {Array.from({ length: 3 }).map((_, i) => (
          <Skeleton key={i} className="h-48 rounded-lg" />
        ))}
      </div>
    );
  }

  if (devices.length === 0) {
    return (
      <EmptyState
        icon={Link2}
        title={t("devices.empty.title")}
        description={t("devices.empty.description")}
        action={{
          label: t("devices.empty.action"),
          onClick: () => router.push("/devices/pair"),
        }}
        secondaryAction={{
          label: t("devices.empty.secondaryAction"),
          onClick: () => {
            // F7 會補 `/help/pairing`；Phase 0 先導到 pair 頁讓使用者至少能走完流程
            router.push("/devices/pair");
          },
        }}
      />
    );
  }

  const sorted = [...devices].sort(
    (a, b) => STATUS_ORDER[a.remoteStatus] - STATUS_ORDER[b.remoteStatus],
  );

  return (
    <div
      className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
      data-testid="device-list"
    >
      {sorted.map((device) => (
        <DeviceCard key={device.id} device={device} />
      ))}
      {/* 附一個 CTA 讓使用者能配對更多裝置，避免空間死角 */}
      <Link
        href="/devices/pair"
        data-testid="pair-new-device-cta"
        className="border-border hover:border-primary hover:bg-accent focus-visible:ring-ring flex min-h-[12rem] flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors focus-visible:ring-2 focus-visible:outline-none"
      >
        <Link2 aria-hidden="true" className="text-muted-foreground size-6" />
        <span className="text-muted-foreground text-sm font-medium">
          {t("devices.addMore")}
        </span>
      </Link>
    </div>
  );
}