import type { LucideIcon } from 'lucide-react';
import { Check, Monitor, Moon, Sun } from 'lucide-react';
import type { HTMLAttributes } from 'react';
import type { Appearance } from '@/hooks/use-appearance';
import { useAppearance } from '@/hooks/use-appearance';
import { cn } from '@/lib/utils';

/**
 * The theme picker. Each option is a real control, not decoration: the active
 * one reads as a raised card so the current choice is obvious at a glance,
 * and the line underneath explains what that choice means.
 */
export default function AppearanceToggleTab({
    className = '',
    ...props
}: HTMLAttributes<HTMLDivElement>) {
    const { appearance, updateAppearance } = useAppearance();

    const tabs: {
        value: Appearance;
        icon: LucideIcon;
        label: string;
        hint: string;
    }[] = [
        {
            value: 'light',
            icon: Sun,
            label: 'Light',
            hint: 'Bright surfaces and dark text, for daytime and well-lit offices.',
        },
        {
            value: 'dark',
            icon: Moon,
            label: 'Dark',
            hint: 'Deep slate surfaces that stay comfortable in a dim room or on site at dusk.',
        },
        {
            value: 'system',
            icon: Monitor,
            label: 'System',
            hint: 'Follows your operating system setting and switches with it.',
        },
    ];

    const activeTab = tabs.find((tab) => tab.value === appearance);

    return (
        <div className={cn('flex flex-col gap-2.5', className)} {...props}>
            <div
                role="group"
                aria-label="Theme"
                className="ring-hairline inline-flex w-fit gap-1 rounded-lg bg-muted p-1 ring-1 ring-inset"
            >
                {tabs.map(({ value, icon: Icon, label }) => {
                    const isActive = appearance === value;

                    return (
                        <button
                            key={value}
                            type="button"
                            aria-pressed={isActive}
                            onClick={() => updateAppearance(value)}
                            className={cn(
                                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-colors',
                                isActive
                                    ? 'ring-hairline shadow-card bg-card text-foreground ring-1'
                                    : 'text-muted-foreground hover:text-foreground',
                            )}
                        >
                            <Icon className="size-4" aria-hidden />
                            <span>{label}</span>
                            {isActive ? (
                                <Check
                                    className="text-solar-ink size-3.5"
                                    aria-hidden
                                />
                            ) : null}
                        </button>
                    );
                })}
            </div>

            {activeTab ? (
                <p className="text-muted-foreground text-xs">
                    {activeTab.hint}
                </p>
            ) : null}
        </div>
    );
}