import { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';

/**
 * Linear-inspired UI primitives
 * Consistent components for the new design system
 */

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

export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
    return (
        <header className="flex justify-between items-start mb-6">
            <div>
                <h1 className="text-2xl font-semibold text-primary tracking-tight">
                    {title}
                </h1>
                {subtitle && (
                    <p className="text-secondary text-sm mt-1">{subtitle}</p>
                )}
            </div>
            {actions && (
                <div className="flex items-center gap-2">
                    {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: 'bg-tertiary text-secondary',
        accent: 'bg-accent-muted text-accent',
        success: 'bg-success-muted text-success',
        warning: 'bg-warning-muted text-warning',
        destructive: 'bg-destructive-muted text-destructive',
    };

    return (
        <div className="flex items-center gap-2 mb-3">
            {Icon && (
                <div className={`w-7 h-7 rounded-md flex items-center justify-center ${accentClasses[accent]}`}>
                    <Icon size={14} />
                </div>
            )}
            <h3 className="text-xs font-medium text-tertiary uppercase tracking-wider">
                {title}
            </h3>
            {count !== undefined && (
                <span className="badge">{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="text-center py-12 px-4">
            <div className="w-12 h-12 mx-auto bg-tertiary rounded-xl flex items-center justify-center mb-4">
                <Icon size={24} className="text-tertiary" />
            </div>
            <h3 className="text-sm font-medium text-primary">{title}</h3>
            {description && (
                <p className="text-tertiary text-sm mt-1 max-w-sm mx-auto">{description}</p>
            )}
            {action && <div className="mt-4">{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 accentClasses = {
        default: 'bg-tertiary text-secondary',
        accent: 'bg-accent-muted text-accent',
        success: 'bg-success-muted text-success',
        warning: 'bg-warning-muted text-warning',
        destructive: 'bg-destructive-muted text-destructive',
    };

    return (
        <div className="card card-interactive p-4">
            <div className={`w-8 h-8 rounded-md flex items-center justify-center mb-3 ${accentClasses[accent]}`}>
                <Icon size={16} />
            </div>
            <p className="text-2xl font-semibold text-primary tracking-tight">{value}</p>
            <div className="flex items-center gap-2 mt-1">
                <p className="text-xs text-tertiary">{label}</p>
                {trend && (
                    <span className={`text-xs font-medium ${trend.positive ? 'text-success' : 'text-destructive'}`}>
                        {trend.positive ? '+' : ''}{trend.value}%
                    </span>
                )}
            </div>
            {subtitle && <p className="text-[10px] text-tertiary mt-1">{subtitle}</p>}
        </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={`
                flex items-center gap-3 p-3 rounded-md
                transition-colors duration-fast
                ${onClick ? 'cursor-pointer' : ''}
                ${active
                    ? 'bg-accent-muted border border-accent/20'
                    : 'hover:bg-tertiary'
                }
                ${className}
            `}
        >
            {children}
        </div>
    );
}

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

export function ActionButton({ icon: Icon, label, onClick, variant = 'default' }: ActionButtonProps) {
    const variantClasses = {
        default: 'text-secondary hover:text-primary hover:bg-tertiary',
        accent: 'text-secondary hover:text-accent hover:bg-accent-muted',
        success: 'text-secondary hover:text-success hover:bg-success-muted',
        warning: 'text-secondary hover:text-warning hover:bg-warning-muted',
        destructive: 'text-secondary hover:text-destructive hover:bg-destructive-muted',
    };

    return (
        <button
            onClick={onClick}
            title={label}
            className={`p-2 rounded-md transition-colors duration-fast ${variantClasses[variant]}`}
        >
            <Icon size={16} />
        </button>
    );
}

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

export function StatusBadge({ status, label }: StatusBadgeProps) {
    const statusClasses = {
        active: 'badge-success',
        pending: 'badge-warning',
        completed: 'badge-accent',
        error: 'badge-destructive',
        default: 'badge',
    };

    const statusLabels = {
        active: 'Active',
        pending: 'Pending',
        completed: 'Completed',
        error: 'Error',
        default: label || 'Unknown',
    };

    return (
        <span className={`badge ${statusClasses[status]}`}>
            {label || statusLabels[status]}
        </span>
    );
}

// Skeleton loader
export function Skeleton({ className = '' }: { className?: string }) {
    return <div className={`skeleton ${className}`} />;
}

// Card skeleton
export function CardSkeleton() {
    return (
        <div className="card p-4 space-y-3">
            <Skeleton className="w-8 h-8 rounded-md" />
            <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={`divider my-4 ${className}`} />;
}
