import { BookOpen, Eye, GitBranch, Lock, Plus, Star } from 'lucide-react';
import { useState } from 'react';
import { Link, useParams } from 'react-router-dom';

import { CreateRepoModal } from '@/components/CreateRepoModal';
import { useWorkspaceRepos } from '@/hooks/workspace/useWorkspaceRepos';
import { cn, timeAgo } from '@/lib/utils';

export function WorkspaceReposPage() {
  const { workspaceName } = useParams<{ workspaceName: string }>();
  const { data: repos, isLoading, error } = useWorkspaceRepos(workspaceName ?? null);
  const [createOpen, setCreateOpen] = useState(false);

  return (
    <div className="px-6 pt-8 pb-16">
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-foreground">Repositories</h1>
          <p className="mt-1 text-[13px] text-muted-foreground">
            Manage repositories in this workspace.
          </p>
        </div>
        <button
          type="button"
          onClick={() => setCreateOpen(true)}
          className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-[6px] text-[13px] font-medium text-primary-foreground transition-colors hover:bg-primary/85"
        >
          <Plus className="size-3.5" />
          New repository
        </button>
      </div>

      {isLoading && (
        <div className="flex items-center gap-2 p-8 text-[14px] text-muted-foreground">
          <span className="inline-block size-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
          Loading repositories...
        </div>
      )}

      {error && (
        <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-[14px] text-destructive">
          Failed to load repositories.
        </div>
      )}

      {!isLoading && !error && (repos ?? []).length === 0 && (
        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-center">
          <BookOpen className="size-8 text-muted-foreground/40" />
          <p className="mt-3 text-[14px] text-muted-foreground">
            No repositories yet. Create your first one.
          </p>
        </div>
      )}

      {repos && repos.length > 0 && (
        <div className="space-y-2">
          {repos.map((repo) => (
            <Link
              key={repo.id}
              to={`/${workspaceName}/repos/${repo.name}`}
              className="flex items-start gap-4 rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/30"
            >
              <BookOpen className="mt-0.5 size-5 shrink-0 text-muted-foreground" />
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-[15px] font-semibold text-foreground">{repo.name}</h3>
                  <VisibilityBadge visibility={repo.visibility} />
                  {repo.archived_at && (
                    <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-[11px] font-medium text-amber-600">
                      Archived
                    </span>
                  )}
                </div>
                {repo.description && (
                  <p className="mt-1 text-[13px] text-muted-foreground">{repo.description}</p>
                )}
                <div className="mt-2 flex items-center gap-4 text-[12px] text-muted-foreground">
                  <span className="flex items-center gap-1">
                    <GitBranch className="size-3" />
                    {repo.default_branch}
                  </span>
                  {repo.is_fork && <span className="text-muted-foreground/60">Forked</span>}
                  <span>{timeAgo(repo.updated_at)}</span>
                </div>
              </div>

              <div className="flex shrink-0 items-center gap-1">
                <button
                  type="button"
                  className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                  onClick={(e) => e.preventDefault()}
                >
                  <Eye className="size-4" />
                </button>
                <button
                  type="button"
                  className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                  onClick={(e) => e.preventDefault()}
                >
                  <Star className="size-4" />
                </button>
              </div>
            </Link>
          ))}
        </div>
      )}

      <CreateRepoModal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        workspaceName={workspaceName ?? null}
      />
    </div>
  );
}

function VisibilityBadge({ visibility }: { visibility: string }) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium',
        visibility === 'Private'
          ? 'bg-muted text-muted-foreground'
          : visibility === 'Internal'
            ? 'bg-blue-500/10 text-blue-600'
            : 'bg-green-500/10 text-green-600',
      )}
    >
      {visibility === 'Private' && <Lock className="size-2.5" />}
      {visibility}
    </span>
  );
}
