ca-grow-ops-manager/frontend/src/components/ui/LinearPrimitives.tsx

import { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';
import { motion } from 'framer-motion';
import { cn } from '../../lib/utils';

/**
 * 777 Wolfpack UI Primitives
 * High-performance, high-density components for operational management.
 */

// Page header with title and optional actions
interface PageHeaderProps {
    title: string;
    subtitle?: string;
    actions?: ReactNode;
    className?: string;
}

export function PageHeader({ title, subtitle, actions, className }: PageHeaderProps) {
    return (
        <header className={cn("flex flex-col md:flex-row md:items-center justify-between gap-4 mb-2 animate-in fade-in slide-in-from-top-4 duration-500", className)}>
            <div className="space-y-1">
                <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-slate-900 to-slate-500 dark:from-white dark:to-slate-400 bg-clip-text text-transparent">
                    {title}
                </h1>
                {subtitle && (
                    <p className="text-sm font-medium text-slate-500 dark:text-slate-400 max-w-2xl leading-relaxed">
                        {subtitle}
                    </p>
                )}
            </div>
            {actions && (
                <div className="flex items-center gap-2 md:self-end">
                    {actions}
                </div>
            )}
        </header>
    );
}

// Section header for groupings
interface SectionHeaderProps {
    icon?: LucideIcon;
    title: string;
    count?: number;
    accent?: 'default' | 'accent' | 'success' | 'warning' | 'destructive';
}

export function SectionHeader({ icon: Icon, title, count, accent = 'default' }: SectionHeaderProps) {
    const accentClasses = {
        default: 'text-slate-500 bg-slate-100 dark:bg-slate-800/50',
        accent: 'text-indigo-500 bg-indigo-500/10',
        success: 'text-emerald-500 bg-emerald-500/10',
        warning: 'text-amber-500 bg-amber-500/10',
        destructive: 'text-rose-500 bg-rose-500/10',
    };

    return (
        <div className="flex items-center gap-2.5 mb-4 group">
            {Icon && (
                <div className={cn("w-6 h-6 rounded-md flex items-center justify-center transition-transform group-hover:scale-110", accentClasses[accent])}>
                    <Icon size={12} />
                </div>
            )}
            <h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]">
                {title}
            </h3>
            {count !== undefined && (
                <span className="px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-[10px] font-bold text-slate-500 border border-slate-200 dark:border-slate-700/50">
                    {count}
                </span>
            )}
        </div>
    );
}

// Empty state component
interface EmptyStateProps {
    icon: LucideIcon;
    title: string;
    description?: string;
    action?: ReactNode;
}

export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
    return (
        <div className="flex flex-col items-center justify-center py-20 px-4 text-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl bg-slate-50/30 dark:bg-slate-900/10">
            <div className="w-16 h-16 bg-white dark:bg-slate-900 rounded-2xl flex items-center justify-center shadow-xl mb-6 ring-1 ring-slate-200 dark:ring-slate-800">
                <Icon size={32} className="text-slate-300 dark:text-slate-700" />
            </div>
            <h3 className="text-base font-bold text-slate-900 dark:text-slate-100">{title}</h3>
            {description && (
                <p className="text-sm text-slate-500 mt-2 max-w-sm mx-auto leading-relaxed">{description}</p>
            )}
            {action && <div className="mt-8">{action}</div>}
        </div>
    );
}

// Metric card for dashboards
interface MetricCardProps {
    icon: LucideIcon;
    label: string;
    value: string | number;
    subtitle?: string;
    accent?: 'default' | 'accent' | 'success' | 'warning' | 'destructive';
    trend?: { value: number; positive: boolean };
}

export function MetricCard({ icon: Icon, label, value, subtitle, accent = 'default', trend }: MetricCardProps) {
    const accentColor = {
        default: 'text-slate-500 dark:text-slate-400',
        accent: 'text-indigo-500',
        success: 'text-emerald-500',
        warning: 'text-amber-500',
        destructive: 'text-rose-500',
    };

    return (
        <motion.div
            whileHover={{ y: -2 }}
            className="group relative overflow-hidden bg-white dark:bg-[#0C0C0C] border border-slate-200 dark:border-slate-800/60 p-5 rounded-2xl transition-all hover:shadow-2xl hover:shadow-indigo-500/5"
        >
            <div className="flex justify-between items-start mb-4">
                <div className={cn("p-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-slate-800 transition-colors group-hover:ring-indigo-500/30", accentColor[accent])}>
                    <Icon size={18} />
                </div>
                {trend && (
                    <div className={cn(
                        "text-[10px] font-bold px-2 py-0.5 rounded-full",
                        trend.positive ? "text-emerald-600 bg-emerald-500/10" : "text-rose-600 bg-rose-500/10"
                    )}>
                        {trend.positive ? '↑' : '↓'} {trend.value}%
                    </div>
                )}
            </div>
            <div className="space-y-0.5">
                <p className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{value}</p>
                <p className="text-[11px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{label}</p>
            </div>
            {subtitle && (
                <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800/50">
                    <p className="text-[10px] text-slate-500 dark:text-slate-500">{subtitle}</p>
                </div>
            )}
        </motion.div>
    );
}

// List item for tables/lists
interface ListItemProps {
    children: ReactNode;
    onClick?: () => void;
    active?: boolean;
    className?: string;
}

export function ListItem({ children, onClick, active, className }: ListItemProps) {
    return (
        <div
            onClick={onClick}
            className={cn(
                "flex items-center gap-3 p-4 rounded-xl transition-all duration-300",
                onClick && "cursor-pointer",
                active
                    ? "bg-indigo-500/10 ring-1 ring-indigo-500/20"
                    : "hover:bg-slate-50 dark:hover:bg-slate-900/50",
                className
            )}
        >
            {children}
        </div>
    );
}

// Action button (icon button)
interface ActionButtonProps {
    icon: LucideIcon;
    label: string;
    onClick: (e: React.MouseEvent) => void;
    variant?: 'default' | 'accent' | 'success' | 'warning' | 'destructive';
}

export function ActionButton({ icon: Icon, label, onClick, variant = 'default' }: ActionButtonProps) {
    const variants = {
        default: 'text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800',
        accent: 'text-indigo-500 hover:bg-indigo-500/10',
        success: 'text-emerald-500 hover:bg-emerald-500/10',
        warning: 'text-amber-500 hover:bg-amber-500/10',
        destructive: 'text-rose-500 hover:bg-rose-500/10',
    };

    return (
        <button
            onClick={onClick}
            title={label}
            className={cn("p-2 rounded-lg transition-all active:scale-95", variants[variant])}
        >
            <Icon size={16} />
        </button>
    );
}

// Status badge
interface StatusBadgeProps {
    status: 'active' | 'pending' | 'completed' | 'error' | 'default';
    label?: string;
    className?: string;
}

export function StatusBadge({ status, label, className }: StatusBadgeProps) {
    const variants = {
        active: 'text-emerald-600 bg-emerald-500/10 border-emerald-500/20',
        pending: 'text-amber-600 bg-amber-500/10 border-amber-500/20',
        completed: 'text-indigo-600 bg-indigo-500/10 border-indigo-500/20',
        error: 'text-rose-600 bg-rose-500/10 border-rose-500/20',
        default: 'text-slate-500 bg-slate-100 border-slate-200 dark:bg-slate-800 dark:border-slate-700',
    };

    return (
        <span className={cn(
            "inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border",
            variants[status],
            className
        )}>
            {label || status.charAt(0).toUpperCase() + status.slice(1)}
        </span>
    );
}

// Skeleton loader
export function Skeleton({ className }: { className?: string }) {
    return <div className={cn("animate-pulse bg-slate-100 dark:bg-slate-800 rounded", className)} />;
}

// Card skeleton
export function CardSkeleton() {
    return (
        <div className="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-4 rounded-xl space-y-3">
            <Skeleton className="w-8 h-8 rounded-lg" />
            <Skeleton className="w-3/4 h-5" />
            <Skeleton className="w-1/2 h-4" />
        </div>
    );
}

// Divider
export function Divider({ className }: { className?: string }) {
    return <div className={cn("h-px w-full bg-slate-100 dark:bg-slate-800 my-4", className)} />;
}