"use client";

import React, { useState } from 'react';
import { useUsersStatus } from '@/hooks/useUserLogs';
import { Button } from '@/components/ui/button';
import { ScrollArea } from "@/components/ui/scroll-area";
import { Loader2, Users, ChevronLeft, ChevronRight, Activity, RefreshCcw } from 'lucide-react';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';

export default function UsersListView() {
    const [page, setPage] = useState(1);
    
    const { data: usersData, isLoading, isFetching, refetch } = useUsersStatus(page);
    
    const usersList = usersData?.data || [];
    const meta = {
        current_page: usersData?.current_page || 1,
        last_page: usersData?.last_page || 1,
        total: usersData?.total || 0,
        per_page: usersData?.per_page || 50
    };

    return (
        <div className="h-full flex flex-col bg-white dark:bg-[#111b21]">
            <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
                <div className="flex items-center gap-3 text-[#00a884]">
                    <div className="p-2 bg-[#00a884]/10 rounded-lg">
                        <Users className="h-5 w-5" />
                    </div>
                    <div>
                        <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">Daftar User</h2>
                        <p className="text-sm text-gray-500">Daftar user dengan akses Whatsapp API beserta status online.</p>
                    </div>
                </div>
                <Button variant="outline" size="sm" onClick={() => refetch()} disabled={isFetching} className="gap-2">
                    <RefreshCcw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
                    Refresh
                </Button>
            </div>

            <div className="flex-1 overflow-hidden p-4 md:p-6 flex flex-col min-h-0">
                <div className="flex-1 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden flex flex-col min-h-0 bg-white dark:bg-[#111b21]">
                    <div className="flex-1 overflow-auto">
                        <table className="w-full text-sm text-left">
                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 sticky top-0 z-10 shadow-sm">
                                <tr>
                                    <th className="px-6 py-4 whitespace-nowrap">Nama User</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Status</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Waktu Log Terakhir</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
                                {isLoading ? (
                                    <tr>
                                        <td colSpan={3} className="px-6 py-8 text-center text-gray-500">
                                            <Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />
                                            Memuat data...
                                        </td>
                                    </tr>
                                ) : usersList.length === 0 ? (
                                    <tr>
                                        <td colSpan={3} className="px-6 py-8 text-center text-gray-500">
                                            Tidak ada data user.
                                        </td>
                                    </tr>
                                ) : (
                                    usersList.map((u: any, i: number) => (
                                        <tr key={i} className="bg-white dark:bg-[#111b21] hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                            <td className="px-6 py-4 font-medium flex items-center gap-2">
                                                <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-500 font-bold uppercase">
                                                    {u.user_name.substring(0, 2)}
                                                </div>
                                                {u.user_name}
                                            </td>
                                            <td className="px-6 py-4">
                                                {u.is_online ? (
                                                    <span className="px-3 py-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded-full text-xs font-medium flex items-center gap-1.5 w-fit">
                                                        <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
                                                        Online
                                                    </span>
                                                ) : (
                                                    <span className="text-gray-500">
                                                        {format(new Date(u.last_log_time), 'dd MMM yyyy, HH:mm', { locale: id })}
                                                    </span>
                                                )}
                                            </td>
                                            <td className="px-6 py-4 text-gray-500">
                                                {format(new Date(u.last_log_time), 'dd MMM yyyy, HH:mm', { locale: id })}
                                            </td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                    
                    {!isLoading && meta.total > 0 && (
                        <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/30">
                            <div className="text-sm text-gray-500">
                                Menampilkan <span className="font-medium text-gray-900 dark:text-gray-100">{(meta.current_page - 1) * meta.per_page + 1}</span> - <span className="font-medium text-gray-900 dark:text-gray-100">{Math.min(meta.current_page * meta.per_page, meta.total)}</span> dari <span className="font-medium text-gray-900 dark:text-gray-100">{meta.total}</span> data
                            </div>
                            <div className="flex items-center gap-2">
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setPage(p => Math.max(1, p - 1))}
                                    disabled={meta.current_page === 1}
                                    className="h-8 w-8 p-0"
                                >
                                    <ChevronLeft className="h-4 w-4" />
                                </Button>
                                <span className="text-sm font-medium mx-2">{meta.current_page} / {meta.last_page}</span>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setPage(p => Math.min(meta.last_page, p + 1))}
                                    disabled={meta.current_page === meta.last_page}
                                    className="h-8 w-8 p-0"
                                >
                                    <ChevronRight className="h-4 w-4" />
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}