import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import {
    DollarSign,
    Hash,
    Lock,
    Settings,
    Users,
    Webhook,
} from 'lucide-react';
import { useProject } from '@/contexts';

const settingTabs = [
    { value: 'general', label: 'General', icon: Settings },
    { value: 'labels', label: 'Labels', icon: Hash },
    { value: 'billing', label: 'Billing', icon: DollarSign },
    { value: 'members', label: 'Members', icon: Users },
    { value: 'oauth', label: 'OAuth App', icon: Lock },
    { value: 'webhook', label: 'Webhooks', icon: Webhook },
] as const;

const settingTabValues = new Set(settingTabs.map((tab) => tab.value));

export function ProjectSettings() {
    const { project } = useProject();
    const navigate = useNavigate();
    const location = useLocation();

    if (!project) return null;

    const tabFromPath = location.pathname.split('/').pop() || 'general';
    const activeTab = settingTabValues.has(tabFromPath as (typeof settingTabs)[number]['value'])
        ? tabFromPath
        : 'general';

    return (
        <div className="flex flex-col h-full">
            {/* Header */}
            <div className="border-b">
                <div className="flex items-center justify-between px-6 py-3">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <Link to="/" className="hover:text-foreground">
                            Projects
                        </Link>
                        <span>/</span>
                        <Link to={`/project/${project.name}`} className="hover:text-foreground font-medium">
                            {project.name}
                        </Link>
                        <span>/</span>
                        <span className="text-foreground">Settings</span>
                    </div>
                </div>
            </div>

            <div className="flex-1 overflow-auto p-6">
                <div className="mx-auto max-w-5xl">
                    <div className="mb-6">
                        <h1 className="text-xl font-semibold">Project Settings</h1>
                        <p className="text-sm text-muted-foreground mt-1">
                            Manage your project configuration and integrations.
                        </p>
                    </div>

                    {/* Tabs */}
                    <div className="mb-6 flex flex-wrap gap-1">
                        {settingTabs.map((tab) => {
                            const isActive = activeTab === tab.value;
                            return (
                                <button
                                    key={tab.value}
                                    onClick={() => navigate(`/project/${project.name}/settings/${tab.value}`)}
                                    className={`flex items-center gap-2 px-4 py-2 text-sm rounded-md border transition-colors ${
                                        isActive
                                            ? 'border-primary bg-primary/10 text-primary'
                                            : 'border-transparent hover:bg-muted'
                                    }`}
                                >
                                    <tab.icon className="h-4 w-4" />
                                    {tab.label}
                                </button>
                            );
                        })}
                    </div>

                    {/* Content */}
                    <div className="w-full">
                        <Outlet />
                    </div>
                </div>
            </div>
        </div>
    );
}
