import {Link, Outlet, useParams} from 'react-router-dom';
import {useProject} from '@/contexts';
import {Button} from '@/components/ui/button';
import {cn} from '@/lib/utils';
import {GitBranch, GitCommitHorizontal, GitPullRequest, Globe, Hash, Settings, Tag,} from 'lucide-react';

const repoTabs = [
    {value: '', label: 'Overview', icon: Globe},
    {value: 'branches', label: 'Branches', icon: GitBranch},
    {value: 'commits', label: 'Commits', icon: GitCommitHorizontal},
    {value: 'contributors', label: 'Contributors', icon: Hash},
    {value: 'files', label: 'Files', icon: Hash},
    {value: 'tags', label: 'Tags', icon: Tag},
    {value: 'pull-requests', label: 'Pull Requests', icon: GitPullRequest},
] as const;

export function RepoLayout() {
    const {project_name, repo_name} = useParams<{ project_name: string; repo_name: string }>();
    const {project} = useProject();

    const tabFromUrl = (): string => {
        const segments = location.pathname.split('/').filter(Boolean);
        const idx = segments.lastIndexOf(repo_name!);
        return segments[idx + 1] || '';
    };
    const activeTab = tabFromUrl();

    if (!project) return null;
    if (!project_name || !repo_name) return null;

    return (
        <div className="flex flex-col h-full">
            {/* Repo header */}
            <div className="border-b px-6 py-3">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <Link to={`/project/${project.name}`} className="hover:text-foreground">
                            Projects
                        </Link>
                        <span>/</span>
                        <Link to={`/project/${project.name}/repositories`} className="hover:text-foreground">
                            {project.name}
                        </Link>
                        <span>/</span>
                        <Link to={`/project/${project.name}/repositories`} className="hover:text-foreground">
                            repositories
                        </Link>
                        <span>/</span>
                        <span className="text-foreground font-medium">{repo_name}</span>
                    </div>
                    <div className="flex gap-2">
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                                (window.location.href = `/project/${project_name}/repositories/${repo_name}/settings`)
                            }
                        >
                            <Settings className="mr-2 h-4 w-4"/>
                            Settings
                        </Button>
                    </div>
                </div>
            </div>

            {/* Repo tabs */}
            <div className="border-b px-6">
                <nav className="flex gap-1 -mb-px overflow-x-auto">
                    {repoTabs.map((tab) => {
                        const href = `/project/${project_name}/repositories/${repo_name}${tab.value ? `/${tab.value}` : ''}`;
                        const isActive =
                            tab.value === ''
                                ? activeTab === ''
                                : activeTab === tab.value;
                        return (
                            <a
                                key={tab.value || 'overview'}
                                href={href}
                                className={cn(
                                    'flex items-center gap-1.5 px-3 py-2.5 text-sm border-b-2 -mb-px whitespace-nowrap transition-colors',
                                    isActive
                                        ? 'border-primary text-primary'
                                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border',
                                )}
                            >
                                <tab.icon className="h-4 w-4"/>
                                {tab.label}
                            </a>
                        );
                    })}
                </nav>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-auto">
                <Outlet/>
            </div>
        </div>
    );
}
