import { Users } from 'lucide-react';
import { motion } from 'framer-motion';
import { GlassCard } from '../shared/GlassCard';
import { AnalyticsIconInfo } from '../shared/AnalyticsIconInfo';
import { CardIcon } from '../shared/CardIcon';
import { CardEmptyState } from '../shared/CardEmptyState';
import { StatusPill } from '../shared/StatusPill';

interface HumanLog {
    timestamp: string;
    source: string;
    url: string;
    ip: string;
    device?: string;
    browser?: string;
    os?: string;
}

interface HumanLogsCardProps {
    logs: HumanLog[];
    className?: string;
    delay?: number;
}

function formatDate(ts: string) {
    if (!ts) return '—';
    const d = new Date(ts);
    if (Number.isNaN(d.getTime())) return '—';
    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

function deviceLabel(log: HumanLog) {
    const parts = [log.device, log.browser].filter((p) => p && p !== 'Unknown' && p !== 'unknown');
    return parts.length > 0 ? parts.join(' · ') : '—';
}

export function HumanLogsCard({ logs, className = '', delay = 0 }: HumanLogsCardProps) {
    return (
        <GlassCard className={`p-5 h-[360px] flex flex-col ${className}`} delay={delay}>
            <div className="flex items-center gap-3 mb-5">
                <AnalyticsIconInfo
                    widgetLabel="Human Logs"
                    content={
                        <p>
                            Recent human visitor events with IP, country, URL, device and date. Use this to sanity-check real user traffic alongside bot activity.
                        </p>
                    }
                >
                    <CardIcon icon={Users} />
                </AnalyticsIconInfo>
                <h3 className="text-[16px] font-medium text-white tracking-[-0.32px]">Human Logs</h3>
            </div>

            <div className="mb-3 grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_52px] sm:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_minmax(0,1.4fr)_minmax(0,1.1fr)_52px] items-center gap-x-3 px-3 text-[11px] font-medium uppercase tracking-[0.06em] text-white/50">
                <span>IP</span>
                <span>Referral</span>
                <span className="hidden sm:block">URL</span>
                <span className="hidden sm:block">Device</span>
                <span className="text-right">Date</span>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto glass-scrollbar -mr-1 pr-1">
                <div className="space-y-2">
                    {logs.length === 0 ? (
                        <CardEmptyState
                            minHeight={200}
                            title="Watching for human visitors"
                            subtitle="Real visitor sessions populate this list as people land on your pages."
                        />
                    ) : (
                        logs.map((log, i) => (
                            <motion.div
                                key={`${log.ip || 'ip'}:${log.timestamp}:${i}`}
                                initial={{ opacity: 0, x: -10 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.3, delay: Math.min(delay + 0.1 + i * 0.08, delay + 0.5) }}
                                className="grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_52px] sm:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_minmax(0,1.4fr)_minmax(0,1.1fr)_52px] items-center gap-x-3 rounded-lg border border-white/[0.08] bg-white/[0.03] px-3 py-1.5"
                            >
                                <span className="truncate text-[12px] text-white tracking-[-0.24px] tabular-nums">{log.ip || '—'}</span>
                                <span className="truncate text-[12px] text-white/85 tracking-[-0.24px]" title={log.source}>
                                    {log.source && log.source.toLowerCase() !== 'direct' ? log.source : 'Direct'}
                                </span>
                                <span className="hidden sm:block truncate text-[12px] text-white tracking-[-0.24px]" title={log.url}>
                                    {log.url}
                                </span>
                                <span className="hidden sm:block truncate text-[12px] text-white/70 tracking-[-0.24px]" title={deviceLabel(log)}>
                                    {deviceLabel(log)}
                                </span>
                                <span className="text-right text-[12px] text-white/70 whitespace-nowrap tracking-[-0.24px] tabular-nums">
                                    {formatDate(log.timestamp)}
                                </span>
                            </motion.div>
                        ))
                    )}
                </div>
            </div>

            {logs.length > 0 ? (
                <div className="mt-4">
                    <StatusPill text="Tracking real visitors" variant="success" />
                </div>
            ) : null}
        </GlassCard>
    );
}