import { useQuery } from "@tanstack/react-query";
import { Link } from "react-router";
import { client } from "@/client";
import { GitFork, Search, ChevronRight } from "lucide-react";
import { workspaceColor, workspaceInitial } from "@/components/shell/shared";
import { Input } from "@/components/ui/input";

export default function MeReposPage() {
  const { data: workspaces = [], isLoading } = useQuery({
    queryKey: ["workspace", "my"],
    queryFn: async () => {
      const res = await client.workspaceMyWorkspaces();
      return res.data;
    },
    retry: false,
  });

  return (
    <div className="mx-auto max-w-3xl px-8 py-10">
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-xl font-heading font-bold text-foreground">Repositories</h1>
          <p className="mt-1 text-sm text-muted-foreground">Browse your workspaces and their repositories</p>
        </div>
        <div className="relative w-56">
          <Search className="absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input className="h-9 rounded-lg border-border bg-card pl-8 text-sm" placeholder="Search..." />
        </div>
      </div>

      <div className="mt-8 space-y-3">
        <h2 className="font-mono text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
          Your workspaces
        </h2>

        {isLoading ? (
          <div className="space-y-4 mt-4">
            {Array.from({ length: 3 }).map((_, i) => (
              <div className="h-16 animate-pulse rounded-lg bg-muted" key={i} />
            ))}
          </div>
        ) : workspaces.length > 0 ? (
          <div className="mt-4 space-y-3">
            {workspaces.map((ws) => (
              <Link
                className="group flex items-center gap-4 rounded-lg border border-border bg-card px-5 py-4 transition-colors hover:border-primary/20"
                key={ws.name}
                to={`/${ws.name}/repos`}
              >
                <span
                  className={`grid size-8 place-items-center rounded-lg bg-gradient-to-br text-xs font-bold text-white ${workspaceColor(ws.name)}`}
                >
                  {ws.avatar_url ? <img alt="" className="size-full object-cover" src={ws.avatar_url} /> : workspaceInitial(ws.name)}
                </span>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-heading font-semibold text-foreground">{ws.name}</span>
                    {ws.owner && (
                      <span className="rounded-md border border-border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">Owner</span>
                    )}
                    {ws.admin && !ws.owner && (
                      <span className="rounded-md border border-border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">Admin</span>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground truncate">{ws.description}</p>
                </div>
                <ChevronRight className="size-4 text-muted-foreground group-hover:text-foreground transition-colors" />
              </Link>
            ))}
          </div>
        ) : (
          <div className="mt-8 text-center py-8">
            <GitFork className="mx-auto size-6 text-muted-foreground/30" />
            <p className="mt-4 text-sm text-muted-foreground">No workspaces yet</p>
          </div>
        )}
      </div>
    </div>
  );
}