import {
  BookOpen,
  Eye,
  GitBranch,
  GitFork,
  GitPullRequest,
  HardDrive,
  Star,
  Tag,
} from 'lucide-react';
import { useParams } from 'react-router-dom';

import { Spinner } from '@/components/ui/spinner';
import { useRepo } from '@/hooks/repo/useRepo';
import { useRepoStats } from '@/hooks/repo/useRepoStats';

export function RepoOverviewPage() {
  const { workspaceName = '', repoName = '' } = useParams();
  const { data: repo } = useRepo(workspaceName, repoName);
  const { data: stats, isLoading } = useRepoStats(workspaceName, repoName);

  if (isLoading || !repo) {
    return (
      <div className="flex items-center gap-2 p-4 text-[14px] text-muted-foreground">
        <Spinner />
      </div>
    );
  }

  const cards = [
    { icon: GitBranch, label: 'Branches', value: stats?.branches_count ?? 0 },
    { icon: Tag, label: 'Tags', value: stats?.tags_count ?? 0 },
    { icon: BookOpen, label: 'Commits', value: stats?.commits_count ?? 0 },
    { icon: Star, label: 'Stars', value: stats?.stars_count ?? 0 },
    { icon: Eye, label: 'Watchers', value: stats?.watchers_count ?? 0 },
    { icon: GitFork, label: 'Forks', value: stats?.forks_count ?? 0 },
    { icon: GitPullRequest, label: 'Open PRs', value: stats?.open_pull_requests_count ?? 0 },
    { icon: HardDrive, label: 'Size', value: formatSize(stats?.size_bytes ?? 0) },
  ];

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {cards.map((card) => (
          <div
            key={card.label}
            className="flex items-center gap-3 rounded-xl border border-border bg-card p-4"
          >
            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
              <card.icon className="size-4 text-muted-foreground" />
            </div>
            <div className="min-w-0">
              <p className="text-lg font-semibold text-foreground">{card.value}</p>
              <p className="text-[11px] text-muted-foreground">{card.label}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="rounded-xl border border-border bg-card p-5">
        <h2 className="text-[15px] font-semibold text-foreground">Repository info</h2>
        <dl className="mt-3 space-y-2 text-[13px]">
          <div className="flex gap-2">
            <dt className="w-28 shrink-0 text-muted-foreground">Default branch</dt>
            <dd className="text-foreground">{repo.default_branch}</dd>
          </div>
          <div className="flex gap-2">
            <dt className="w-28 shrink-0 text-muted-foreground">Visibility</dt>
            <dd className="text-foreground">{repo.visibility}</dd>
          </div>
          <div className="flex gap-2">
            <dt className="w-28 shrink-0 text-muted-foreground">Git service</dt>
            <dd className="text-foreground">{repo.git_service}</dd>
          </div>
          <div className="flex gap-2">
            <dt className="w-28 shrink-0 text-muted-foreground">Created</dt>
            <dd className="text-foreground">{new Date(repo.created_at).toLocaleDateString()}</dd>
          </div>
          <div className="flex gap-2">
            <dt className="w-28 shrink-0 text-muted-foreground">Updated</dt>
            <dd className="text-foreground">{new Date(repo.updated_at).toLocaleDateString()}</dd>
          </div>
          {stats?.last_push_at && (
            <div className="flex gap-2">
              <dt className="w-28 shrink-0 text-muted-foreground">Last push</dt>
              <dd className="text-foreground">
                {new Date(stats.last_push_at).toLocaleDateString()}
              </dd>
            </div>
          )}
        </dl>
      </div>
    </div>
  );
}

function formatSize(bytes: number): string {
  if (bytes === 0) return '0 B';
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
