import { useQuery } from "@tanstack/react-query";
import { Link, useNavigate } from "@tanstack/react-router";
import { api } from "../api/client";
import { Button } from "../components/ui/Button";
import { Card } from "../components/ui/Card";

export function DashboardPage() {
  const navigate = useNavigate();

  const { data: user, isError: noUser } = useQuery({
    queryKey: ["me"],
    queryFn: api.me.get,
    retry: false,
  });

  const { data: repos = [], isLoading } = useQuery({
    queryKey: ["me", "repos"],
    queryFn: api.me.repos,
    enabled: !!user,
  });

  if (noUser) {
    return (
      <div className="max-w-2xl mx-auto px-6 py-24 text-center">
        <div className="text-5xl mb-6">◆</div>
        <h1 className="text-[34px] font-semibold text-[#1d1d1f] tracking-tight mb-3">
          Welcome to Pijulab
        </h1>
        <p className="text-[17px] text-[#6e6e73] mb-8 leading-relaxed">
          A beautiful home for your Pijul repositories.
        </p>
        <div className="flex items-center justify-center gap-3">
          <Button size="lg" onClick={() => navigate({ to: "/signup" })}>
            Get started
          </Button>
          <Button size="lg" variant="secondary" onClick={() => navigate({ to: "/login" })}>
            Sign in
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-5xl mx-auto px-6 py-10">
      <div className="flex items-center justify-between mb-8">
        <h1 className="text-[22px] font-semibold text-[#1d1d1f] tracking-tight">
          Your repositories
        </h1>
        <Button onClick={() => navigate({ to: "/new" })}>New repository</Button>
      </div>

      {isLoading ? (
        <div className="flex items-center justify-center py-20 text-[#6e6e73]">Loading…</div>
      ) : repos.length === 0 ? (
        <Card className="flex flex-col items-center py-16 text-center">
          <div className="text-3xl mb-4">📦</div>
          <p className="text-[15px] text-[#6e6e73] mb-5">No repositories yet</p>
          <Button onClick={() => navigate({ to: "/new" })}>Create your first repository</Button>
        </Card>
      ) : (
        <div className="flex flex-col gap-2">
          {repos.map((repo) => (
            <Link
              key={repo.id}
              to="/$owner/$name"
              params={{ owner: repo.owner.username, name: repo.name }}
              className="block"
            >
              <Card className="px-5 py-4 hover:border-[#0071e3]/30 hover:shadow-[0_1px_3px_rgba(0,0,0,0.08),0_4px_20px_rgba(0,113,227,0.08)] transition-all duration-200 cursor-pointer">
                <div className="flex items-start justify-between gap-4">
                  <div className="min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-[15px] font-medium text-[#0071e3]">{repo.name}</span>
                      <span className="text-[11px] text-[#6e6e73] border border-black/[0.08] rounded-full px-2 py-0.5">
                        {repo.visibility}
                      </span>
                    </div>
                    {repo.description && (
                      <p className="text-[13px] text-[#6e6e73] truncate">{repo.description}</p>
                    )}
                  </div>
                  <span className="text-[12px] text-[#6e6e73] shrink-0">
                    {new Date(repo.updatedAt).toLocaleDateString()}
                  </span>
                </div>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}