import { RefreshCcw } from 'lucide-react';
import { motion } from 'framer-motion';
import { TimeRangePills } from './TimeRangePills';
import { FaviconImage } from './shared/FaviconImage';
import { cn } from '@/lib/utils';
import type { Period } from '@/lib/api';

export function Header({
    period,
    onPeriodChange,
    onRefresh,
    mode,
    refreshing,
    domain,
}: {
    period: Period;
    onPeriodChange: (p: Period) => void;
    onRefresh: () => void;
    mode: 'standalone' | 'connected';
    refreshing: boolean;
    domain?: string;
}) {
    return (
        <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, ease: 'easeOut' }}
            className="mb-6 md:mb-10"
        >
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 w-full min-w-0">
                <div className="flex items-center gap-3 min-w-0">
                    {domain ? (
                        <FaviconImage
                            domain={domain}
                            siteIcon={window.ezyAiBoot?.siteIcon}
                            className="size-8 sm:size-12 rounded-xl shrink-0"
                            fallbackClassName="size-8 sm:size-12 text-white/60 shrink-0"
                        />
                    ) : null}
                    <div className="min-w-0">
                        <div className="flex items-center gap-2">
                            <h1 className="text-[18px] sm:text-[22px] font-medium text-white tracking-[-0.44px]">
                                Performance
                            </h1>
                            {mode === 'connected' && (
                                <span className="rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-300">
                                    Connected
                                </span>
                            )}
                        </div>
                        <p className="text-[13px] sm:text-[16px] text-white/70 tracking-[-0.32px]">
                            Understand how AI discovers, ranks, and recommends your website
                        </p>
                    </div>
                </div>

                <div className="flex flex-col gap-2 w-full min-w-0 sm:flex-row sm:items-center sm:justify-end sm:gap-3 sm:w-auto sm:shrink-0">
                    <div className="w-full min-w-0 flex justify-center sm:justify-end">
                        <TimeRangePills value={period} onChange={onPeriodChange} />
                    </div>
                    <div className="flex shrink-0 justify-end gap-2 sm:gap-3">
                        <button
                            onClick={onRefresh}
                            className="size-11 sm:size-10 rounded-md text-white/50 hover:text-white hover:bg-white/10 flex items-center justify-center transition-colors"
                            aria-label="Refresh"
                        >
                            <RefreshCcw className={cn('size-4 sm:size-5', refreshing && 'animate-spin')} />
                        </button>
                    </div>
                </div>
            </div>
        </motion.div>
    );
}