import { Link, useLocation } from 'react-router-dom';
import { ChevronRight, Home } from 'lucide-react';

interface BreadcrumbItem {
    label: string;
    path: string;
}

// Route configuration for breadcrumbs
const ROUTE_CONFIG: Record<string, { label: string; parent?: string }> = {
    '/': { label: 'Dashboard' },
    '/walkthrough': { label: 'Daily Walkthrough', parent: '/' },
    '/tasks': { label: 'Tasks', parent: '/' },
    '/tasks/templates': { label: 'SOP Templates', parent: '/tasks' },
    '/batches': { label: 'Batches', parent: '/' },
    '/rooms': { label: 'Rooms', parent: '/' },
    '/timeclock': { label: 'Timeclock', parent: '/' },
    '/supplies': { label: 'Inventory', parent: '/' },
    '/reports': { label: 'Reports', parent: '/' },
    '/ipm': { label: 'IPM Dashboard', parent: '/' },
    '/touch-points': { label: 'Quick Actions', parent: '/' },
    '/visitors': { label: 'Visitors', parent: '/' },
    // Compliance section
    '/compliance/audit': { label: 'Audit Log', parent: '/' },
    '/compliance/documents': { label: 'SOP Library', parent: '/' },
    // Advanced dashboards
    '/environment': { label: 'Environment', parent: '/' },
    '/financial': { label: 'Financial', parent: '/' },
    '/insights': { label: 'AI Insights', parent: '/' },
    // Settings
    '/roles': { label: 'Roles', parent: '/settings' },
    '/settings': { label: 'Settings', parent: '/' },
    '/settings/walkthrough': { label: 'Walkthrough Settings', parent: '/settings' },
};

// Dynamic route patterns
const DYNAMIC_ROUTES: { pattern: RegExp; getLabel: (match: RegExpMatchArray) => string; parent: string }[] = [
    { pattern: /^\/batches\/(.+)$/, getLabel: () => 'Batch Details', parent: '/batches' },
    { pattern: /^\/rooms\/(.+)$/, getLabel: () => 'Room Details', parent: '/rooms' },
    { pattern: /^\/tasks\/(.+)$/, getLabel: () => 'Task Details', parent: '/tasks' },
];

function getBreadcrumbs(pathname: string): BreadcrumbItem[] {
    const crumbs: BreadcrumbItem[] = [];
    let currentPath = pathname;

    // Check for dynamic routes first
    for (const route of DYNAMIC_ROUTES) {
        const match = pathname.match(route.pattern);
        if (match) {
            crumbs.unshift({ label: route.getLabel(match), path: pathname });
            currentPath = route.parent;
            break;
        }
    }

    // Build breadcrumb chain from static routes
    while (currentPath && ROUTE_CONFIG[currentPath]) {
        const config = ROUTE_CONFIG[currentPath];
        // Don't add if already in crumbs (from dynamic route)
        if (!crumbs.find(c => c.path === currentPath)) {
            crumbs.unshift({ label: config.label, path: currentPath });
        }
        currentPath = config.parent || '';
    }

    return crumbs;
}

export function Breadcrumbs() {
    const location = useLocation();
    const crumbs = getBreadcrumbs(location.pathname);

    // Don't show breadcrumbs on dashboard
    if (location.pathname === '/' || crumbs.length <= 1) {
        return null;
    }

    return (
        <nav aria-label="Breadcrumb" className="mb-4">
            <ol className="flex items-center gap-1 text-sm flex-wrap">
                <li>
                    <Link
                        to="/"
                        className="p-1.5 rounded-md hover:bg-tertiary text-tertiary hover:text-primary transition-colors flex items-center"
                        aria-label="Home"
                    >
                        <Home size={16} />
                    </Link>
                </li>

                {crumbs.map((crumb, index) => {
                    const isLast = index === crumbs.length - 1;

                    // Skip dashboard in the crumb list (we have the home icon)
                    if (crumb.path === '/') return null;

                    return (
                        <li key={crumb.path} className="flex items-center gap-1">
                            <ChevronRight size={14} className="text-tertiary flex-shrink-0" />
                            {isLast ? (
                                <span className="px-2 py-1 font-medium text-primary">
                                    {crumb.label}
                                </span>
                            ) : (
                                <Link
                                    to={crumb.path}
                                    className="px-2 py-1 rounded-md text-tertiary hover:text-primary hover:bg-tertiary transition-colors"
                                >
                                    {crumb.label}
                                </Link>
                            )}
                        </li>
                    );
                })}
            </ol>
        </nav>
    );
}

// Page title helper
export function getPageTitle(pathname: string): string {
    // Check dynamic routes first
    for (const route of DYNAMIC_ROUTES) {
        const match = pathname.match(route.pattern);
        if (match) {
            return `${route.getLabel(match)} | 777 Wolfpack`;
        }
    }

    const config = ROUTE_CONFIG[pathname];
    if (config) {
        return `${config.label} | 777 Wolfpack`;
    }
    return '777 Wolfpack - Grow Ops Manager';
}

