import { useNavigate } from "react-router-dom"
import { GitBranch, Lock } from "lucide-react"
import type { UserRepoInfo } from "@/client/model"
import { Card } from "@/components/ui/card"
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { Skeleton } from "@/components/ui/skeleton"
import { t } from "@/i18n/T"

interface RepoListProps {
  repos: UserRepoInfo[]
  isLoading?: boolean
}

export function RepoList({ repos, isLoading }: RepoListProps) {
  const navigate = useNavigate()

  if (isLoading) {
    return (
      <div className="grid gap-3 md:grid-cols-2">
        {[...Array(4)].map((_, i) => (
          <Card key={i} size="sm">
            <div className="space-y-3 px-3">
              <div className="flex items-center gap-2">
                <Skeleton className="size-4 rounded-full" />
                <Skeleton className="h-4 w-32" />
              </div>
              <Skeleton className="h-3 w-full" />
              <Skeleton className="h-3 w-2/3" />
              <div className="flex items-center gap-4 pt-1">
                <Skeleton className="h-3 w-16" />
                <Skeleton className="h-3 w-24" />
              </div>
            </div>
          </Card>
        ))}
      </div>
    )
  }

  if (repos.length === 0) {
    return (
      <Empty className="border-[var(--border-subtle)] bg-[var(--surface-secondary)]">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <GitBranch />
          </EmptyMedia>
          <EmptyTitle>{t("me.recent_repos")}</EmptyTitle>
          <EmptyDescription>暂无仓库</EmptyDescription>
        </EmptyHeader>
      </Empty>
    )
  }

  return (
    <div className="grid gap-3 md:grid-cols-2">
      {repos.map((repo) => (
        <Card
          key={repo.uid}
          size="sm"
          className="cursor-pointer transition-all hover:-translate-y-0.5 hover:ring-[var(--accent)]/20"
          onClick={() =>
            navigate(`/${repo.project_name}/repo/${repo.repo_name}`)
          }
        >
          <div className="px-3">
            <div className="flex items-center gap-2">
              <GitBranch
                className="size-4"
                style={{ color: "var(--text-tertiary)" }}
              />
              <h3
                className="truncate text-[13px] font-semibold"
                style={{ color: "var(--text-info)" }}
              >
                {repo.repo_name}
              </h3>
              {repo.is_private && (
                <Lock
                  className="size-3.5"
                  style={{ color: "var(--text-tertiary)" }}
                />
              )}
            </div>
            <p
              className="mt-3 line-clamp-2 min-h-[2.5rem] text-[12px]"
              style={{ color: "var(--text-secondary)" }}
            >
              {repo.description || "暂无描述"}
            </p>
            <div
              className="mt-3 flex items-center gap-4 text-[11px]"
              style={{ color: "var(--text-tertiary)" }}
            >
              <div className="flex items-center gap-1.5">
                <div
                  className="size-2 rounded-full"
                  style={{ backgroundColor: "var(--accent)" }}
                />
                <span
                  className="font-medium"
                  style={{ color: "var(--text-secondary)" }}
                >
                  {repo.default_branch}
                </span>
              </div>
              <span>
                Updated {new Date(repo.updated_at).toLocaleDateString()}
              </span>
            </div>
          </div>
        </Card>
      ))}
    </div>
  )
}