# scaffold/semantic_injection/directives/ui_knowledge/navigation_complex.py

"""
=================================================================================
== THE PLANES OF CONTEXT (V-Ω-NAVIGATION)                                      ==
=================================================================================
This artisan generates complex navigation structures.
"""
from textwrap import dedent
from typing import List, Tuple

from ..registry import ComponentRegistry


@ComponentRegistry.register("tabs")
def forge_tabs(name: str, props: List[Tuple[str, str]]) -> str:
    """
    Forges a Tabs component suite using @radix-ui/react-tabs.
    """
    return dedent(f"""
        import React from 'react';
        import * as TabsPrimitive from '@radix-ui/react-tabs';
        import {{ cn }} from '@/lib/utils';

        const {name} = TabsPrimitive.Root;

        const {name}List = React.forwardRef<
          React.ElementRef<typeof TabsPrimitive.List>,
          React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
        >(({{ className, ...props }}, ref) => (
          <TabsPrimitive.List
            ref={{ref}}
            className={{cn(
              "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
              className
            )}}
            {{...props}}
          />
        ));
        {name}List.displayName = TabsPrimitive.List.displayName;

        const {name}Trigger = React.forwardRef<
          React.ElementRef<typeof TabsPrimitive.Trigger>,
          React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
        >(({{ className, ...props }}, ref) => (
          <TabsPrimitive.Trigger
            ref={{ref}}
            className={{cn(
              "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
              className
            )}}
            {{...props}}
          />
        ));
        {name}Trigger.displayName = TabsPrimitive.Trigger.displayName;

        const {name}Content = React.forwardRef<
          React.ElementRef<typeof TabsPrimitive.Content>,
          React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
        >(({{ className, ...props }}, ref) => (
          <TabsPrimitive.Content
            ref={{ref}}
            className={{cn(
              "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
              className
            )}}
            {{...props}}
          />
        ));
        {name}Content.displayName = TabsPrimitive.Content.displayName;

        export {{ {name}, {name}List, {name}Trigger, {name}Content }};
    """).strip()