import { useEffect, useState } from 'react';
import {
    Clock, LogIn, LogOut, QrCode, Smartphone, MapPin,
    Timer, CalendarDays, Users, TrendingUp, ChevronRight,
    CheckCircle2, AlertCircle, MoreHorizontal, History
} from 'lucide-react';
import api from '../lib/api';
import { Card } from '../components/ui/card';
import { cn } from '../lib/utils';
import { motion, AnimatePresence } from 'framer-motion';

// Types
interface TimeLog {
    id: string;
    startTime: string;
    endTime?: string;
    activityType: string;
    method?: 'manual' | 'qr' | 'nfc' | 'gps';
    location?: string;
}

interface ShiftStats {
    hoursToday: number;
    hoursThisWeek: number;
    shiftsThisWeek: number;
    averageShift: number;
}

// Clock-in method types (scaffolded)
type ClockMethod = 'manual' | 'qr' | 'nfc' | 'gps';

const CLOCK_METHODS: { id: ClockMethod; label: string; icon: any; available: boolean; description: string }[] = [
    { id: 'manual', label: 'Manual', icon: Clock, available: true, description: 'Standard clock in/out' },
    { id: 'qr', label: 'QR Code', icon: QrCode, available: false, description: 'Scan facility QR code' },
    { id: 'nfc', label: 'NFC Tap', icon: Smartphone, available: false, description: 'Tap your badge' },
    { id: 'gps', label: 'Location', icon: MapPin, available: false, description: 'Verify by location' },
];

export default function TimeClockPage() {
    const [logs, setLogs] = useState<TimeLog[]>([]);
    const [status, setStatus] = useState<'CLOCKED_OUT' | 'CLOCKED_IN'>('CLOCKED_OUT');
    const [loading, setLoading] = useState(true);
    const [clockLoading, setClockLoading] = useState(false);
    const [activeMethod, setActiveMethod] = useState<ClockMethod>('manual');
    const [currentSession, setCurrentSession] = useState<TimeLog | null>(null);
    const [elapsedTime, setElapsedTime] = useState(0);

    // Stats (mock - would come from API)
    const stats: ShiftStats = {
        hoursToday: currentSession ? elapsedTime / 3600 : 0,
        hoursThisWeek: 32.5,
        shiftsThisWeek: 4,
        averageShift: 8.1
    };

    useEffect(() => {
        fetchLogs();
    }, []);

    // Timer for active session
    useEffect(() => {
        if (currentSession && !currentSession.endTime) {
            const interval = setInterval(() => {
                const start = new Date(currentSession.startTime).getTime();
                const now = Date.now();
                setElapsedTime(Math.floor((now - start) / 1000));
            }, 1000);
            return () => clearInterval(interval);
        }
    }, [currentSession]);

    const fetchLogs = async () => {
        setLoading(true);
        try {
            const { data } = await api.get('/timeclock/logs');
            setLogs(data);
            const active = data.find((l: TimeLog) => !l.endTime);
            setStatus(active ? 'CLOCKED_IN' : 'CLOCKED_OUT');
            setCurrentSession(active || null);
        } catch (e) {
            console.error(e);
        } finally {
            setLoading(false);
        }
    };

    const handleClock = async (action: 'in' | 'out') => {
        setClockLoading(true);
        try {
            if (action === 'in') {
                await api.post('/timeclock/clock-in', {
                    activityType: 'General',
                    method: activeMethod
                });
            } else {
                await api.post('/timeclock/clock-out', {});
            }
            await fetchLogs();
        } catch (e: any) {
            console.error(e.response?.data?.message || 'Error clocking');
        } finally {
            setClockLoading(false);
        }
    };

    const formatDuration = (seconds: number) => {
        const h = Math.floor(seconds / 3600);
        const m = Math.floor((seconds % 3600) / 60);
        const s = seconds % 60;
        return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    };

    const formatHours = (hours: number) => hours.toFixed(1);

    return (
        <div className="space-y-8 pb-12">
            {/* Header */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h1 className="text-2xl font-bold tracking-tight text-[var(--color-text-primary)]">
                        Shift Tracking
                    </h1>
                    <div className="flex items-center gap-3 mt-2">
                        <span className="text-[var(--color-text-tertiary)] text-sm">
                            {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
                        </span>
                        <div className={cn(
                            "flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border",
                            status === 'CLOCKED_IN'
                                ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)] border-[var(--color-primary)]/20"
                                : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] border-[var(--color-border-subtle)]"
                        )}>
                            <div className={cn(
                                "w-1.5 h-1.5 rounded-full",
                                status === 'CLOCKED_IN' ? "bg-[var(--color-primary)] animate-pulse" : "bg-[var(--color-text-tertiary)]"
                            )} />
                            {status === 'CLOCKED_IN' ? 'On Shift' : 'Off Shift'}
                        </div>
                    </div>
                </div>
            </div>

            {/* Stats Grid */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <StatCard
                    label="Today"
                    value={formatHours(stats.hoursToday) + 'h'}
                    icon={Timer}
                    active={status === 'CLOCKED_IN'}
                />
                <StatCard
                    label="This Week"
                    value={formatHours(stats.hoursThisWeek) + 'h'}
                    icon={CalendarDays}
                />
                <StatCard
                    label="Shifts"
                    value={stats.shiftsThisWeek.toString()}
                    icon={Users}
                />
                <StatCard
                    label="Avg Shift"
                    value={formatHours(stats.averageShift) + 'h'}
                    icon={TrendingUp}
                />
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                {/* Left: Clock Controls */}
                <div className="lg:col-span-5 space-y-6">
                    {/* Active Session Timer */}
                    <Card className="p-8 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] text-center">
                        {status === 'CLOCKED_IN' && currentSession ? (
                            <motion.div
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                            >
                                <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider mb-2">
                                    Current Session
                                </p>
                                <div className="text-5xl font-mono font-bold text-[var(--color-primary)] tracking-tight mb-4">
                                    {formatDuration(elapsedTime)}
                                </div>
                                <p className="text-sm text-[var(--color-text-tertiary)]">
                                    Started {new Date(currentSession.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                </p>
                            </motion.div>
                        ) : (
                            <div>
                                <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider mb-2">
                                    Ready to Clock In
                                </p>
                                <div className="text-5xl font-mono font-bold text-[var(--color-text-quaternary)] tracking-tight mb-4">
                                    00:00:00
                                </div>
                                <p className="text-sm text-[var(--color-text-tertiary)]">
                                    Select a method below
                                </p>
                            </div>
                        )}
                    </Card>

                    {/* Clock Method Selector */}
                    <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
                        <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider mb-4 px-2">
                            Clock-In Method
                        </p>
                        <div className="grid grid-cols-2 gap-2">
                            {CLOCK_METHODS.map(method => (
                                <button
                                    key={method.id}
                                    onClick={() => method.available && setActiveMethod(method.id)}
                                    disabled={!method.available}
                                    className={cn(
                                        "p-4 rounded-xl text-left transition-all border",
                                        method.available && activeMethod === method.id
                                            ? "bg-[var(--color-primary)]/10 border-[var(--color-primary)] text-[var(--color-primary)]"
                                            : method.available
                                                ? "bg-[var(--color-bg-tertiary)] border-[var(--color-border-subtle)] text-[var(--color-text-secondary)] hover:border-[var(--color-primary)]/50"
                                                : "bg-[var(--color-bg-tertiary)]/50 border-[var(--color-border-subtle)] text-[var(--color-text-quaternary)] cursor-not-allowed opacity-50"
                                    )}
                                >
                                    <div className="flex items-center gap-3 mb-2">
                                        <method.icon size={18} />
                                        <span className="font-medium text-sm">{method.label}</span>
                                        {!method.available && (
                                            <span className="text-[8px] font-bold uppercase bg-[var(--color-accent)]/10 text-[var(--color-accent)] px-1.5 py-0.5 rounded">
                                                Soon
                                            </span>
                                        )}
                                    </div>
                                    <p className="text-[10px] text-[var(--color-text-tertiary)]">
                                        {method.description}
                                    </p>
                                </button>
                            ))}
                        </div>
                    </Card>

                    {/* Clock Action Button */}
                    <button
                        onClick={() => handleClock(status === 'CLOCKED_IN' ? 'out' : 'in')}
                        disabled={clockLoading}
                        className={cn(
                            "w-full h-16 rounded-2xl font-bold text-lg flex items-center justify-center gap-3 transition-all shadow-lg",
                            status === 'CLOCKED_IN'
                                ? "bg-[var(--color-error)] hover:bg-[var(--color-error)]/80 text-white"
                                : "bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)]"
                        )}
                    >
                        {clockLoading ? (
                            <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                        ) : status === 'CLOCKED_IN' ? (
                            <>
                                <LogOut size={22} />
                                Clock Out
                            </>
                        ) : (
                            <>
                                <LogIn size={22} />
                                Clock In
                            </>
                        )}
                    </button>
                </div>

                {/* Right: History */}
                <div className="lg:col-span-7">
                    <Card className="bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] overflow-hidden">
                        <div className="px-5 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                <History size={16} className="text-[var(--color-text-tertiary)]" />
                                <h3 className="font-medium text-[var(--color-text-primary)]">Recent Shifts</h3>
                            </div>
                            <button className="text-xs font-medium text-[var(--color-primary)] hover:underline">
                                View All
                            </button>
                        </div>

                        {loading ? (
                            <div className="p-8 text-center">
                                <div className="w-8 h-8 border-2 border-[var(--color-border-default)] border-t-[var(--color-primary)] rounded-full animate-spin mx-auto" />
                            </div>
                        ) : logs.length === 0 ? (
                            <div className="p-12 text-center">
                                <Clock size={32} className="mx-auto text-[var(--color-text-quaternary)] mb-3" />
                                <p className="text-sm text-[var(--color-text-tertiary)]">No shifts recorded yet</p>
                            </div>
                        ) : (
                            <div className="divide-y divide-[var(--color-border-subtle)]">
                                <AnimatePresence>
                                    {logs.slice(0, 8).map((log, idx) => (
                                        <motion.div
                                            key={log.id}
                                            initial={{ opacity: 0, y: 10 }}
                                            animate={{ opacity: 1, y: 0 }}
                                            transition={{ delay: idx * 0.05 }}
                                            className="flex items-center justify-between px-5 py-4 hover:bg-[var(--color-bg-tertiary)]/50 transition-colors group"
                                        >
                                            <div className="flex items-center gap-4">
                                                <div className={cn(
                                                    "w-10 h-10 rounded-xl flex items-center justify-center",
                                                    !log.endTime
                                                        ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]"
                                                        : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)]"
                                                )}>
                                                    {!log.endTime ? <CheckCircle2 size={18} /> : <Clock size={18} />}
                                                </div>
                                                <div>
                                                    <p className="font-medium text-sm text-[var(--color-text-primary)]">
                                                        {new Date(log.startTime).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
                                                    </p>
                                                    <p className="text-xs text-[var(--color-text-tertiary)]">
                                                        {log.activityType}
                                                        {log.method && log.method !== 'manual' && (
                                                            <span className="ml-2 text-[var(--color-accent)]">• {log.method.toUpperCase()}</span>
                                                        )}
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="text-right">
                                                <p className="font-mono text-sm text-[var(--color-text-primary)]">
                                                    {new Date(log.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                                    {' → '}
                                                    {log.endTime
                                                        ? new Date(log.endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
                                                        : <span className="text-[var(--color-primary)] font-bold">Active</span>
                                                    }
                                                </p>
                                                {log.endTime && (
                                                    <p className="text-xs text-[var(--color-text-tertiary)]">
                                                        {((new Date(log.endTime).getTime() - new Date(log.startTime).getTime()) / 3600000).toFixed(1)}h
                                                    </p>
                                                )}
                                            </div>
                                            <ChevronRight size={16} className="text-[var(--color-text-quaternary)] opacity-0 group-hover:opacity-100 transition-opacity ml-2" />
                                        </motion.div>
                                    ))}
                                </AnimatePresence>
                            </div>
                        )}
                    </Card>
                </div>
            </div>
        </div>
    );
}

function StatCard({ label, value, icon: Icon, active = false }: { label: string; value: string; icon: any; active?: boolean }) {
    return (
        <Card className={cn(
            "p-4 border-[var(--color-border-subtle)]",
            active ? "bg-[var(--color-primary)]/5 border-[var(--color-primary)]/20" : "bg-[var(--color-bg-elevated)]"
        )}>
            <div className="flex items-center justify-between">
                <div>
                    <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
                    <p className={cn(
                        "text-2xl font-bold mt-1",
                        active ? "text-[var(--color-primary)]" : "text-[var(--color-text-primary)]"
                    )}>
                        {value}
                    </p>
                </div>
                <div className={cn(
                    "p-2.5 rounded-lg",
                    active
                        ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]"
                        : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)]"
                )}>
                    <Icon size={18} />
                </div>
            </div>
        </Card>
    );
}
