"use client";

import React, { useState } from 'react';
import { useUserLogs } from '@/hooks/useUserLogs';
import { useBranch } from '@/hooks/useClientApp';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Loader2, Activity, Search, ChevronLeft, ChevronRight, RefreshCcw } from 'lucide-react';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';
import { useAuth } from '@/contexts/auth-context';

export default function UserLogsView() {
    const { user } = useAuth();
    const [page, setPage] = useState(1);
    const [search, setSearch] = useState("");
    const [searchInput, setSearchInput] = useState("");
    const [branchId, setBranchId] = useState<string | null>(null);

    const { data: branchesData } = useBranch();
    const branches = branchesData || [];

    const { data: logsData, isLoading, isFetching, refetch } = useUserLogs(page, search, branchId);
    
    const logs = logsData?.data || [];
    const meta = {
        current_page: logsData?.current_page || 1,
        last_page: logsData?.last_page || 1,
        total: logsData?.total || 0,
        per_page: logsData?.per_page || 50
    };

    const handleSearch = () => {
        setSearch(searchInput);
        setPage(1);
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            handleSearch();
        }
    };

    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 flex-col md:flex-row md:items-center justify-between gap-4">
                <div className="flex items-center gap-3 text-[#00a884]">
                    <div className="p-2 bg-[#00a884]/10 rounded-lg">
                        <Activity className="h-5 w-5" />
                    </div>
                    <div>
                        <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">User Log</h2>
                        <p className="text-sm text-gray-500">Log aktivitas klik chat dari user.</p>
                    </div>
                </div>

                <div className="flex items-center gap-2 flex-wrap">
                    <div className="relative w-[250px]">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input
                            placeholder="Cari user, nama pelanggan, kontak..."
                            className="pl-9 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"
                            value={searchInput}
                            onChange={(e) => setSearchInput(e.target.value)}
                            onKeyDown={handleKeyDown}
                        />
                    </div>
                    <Button variant="secondary" onClick={handleSearch}>Cari</Button>

                    <Select
                        value={branchId || "all"}
                        onValueChange={(value) => {
                            setBranchId(value === "all" ? null : value);
                            setPage(1);
                        }}
                    >
                        <SelectTrigger className="w-[180px] bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700">
                            <SelectValue placeholder="Semua Cabang" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">Semua Cabang</SelectItem>
                            {branches.map((b: any) => (
                                <SelectItem key={b.id} value={b.id.toString()}>
                                    {b.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    <Button variant="outline" size="icon" onClick={() => refetch()} disabled={isFetching} title="Refresh Data">
                        <RefreshCcw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
                    </Button>
                </div>
            </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">Waktu</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Nama User</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Aktivitas</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Pelanggan</th>
                                    <th className="px-6 py-4 whitespace-nowrap">No Kontak</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Cabang</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
                                {isLoading ? (
                                    <tr>
                                        <td colSpan={6} 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>
                                ) : logs.length === 0 ? (
                                    <tr>
                                        <td colSpan={6} className="px-6 py-8 text-center text-gray-500">
                                            Tidak ada data user log.
                                        </td>
                                    </tr>
                                ) : (
                                    logs.map((log: any) => (
                                        <tr key={log.id} className="bg-white dark:bg-[#111b21] hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                            <td className="px-6 py-3 whitespace-nowrap">
                                                {format(new Date(log.created_at), 'dd MMM yyyy, HH:mm', { locale: id })}
                                            </td>
                                            <td className="px-6 py-3 font-medium">
                                                {log.user_name}
                                            </td>
                                            <td className="px-6 py-3">
                                                {log.action === 'open_chat' ? 'Membuka Chat' : log.action}
                                            </td>
                                            <td className="px-6 py-3">
                                                {log.contact?.name || '-'}
                                            </td>
                                            <td className="px-6 py-3">
                                                {log.contact?.phone_number || '-'}
                                            </td>
                                            <td className="px-6 py-3">
                                                {log.contact?.branch_name ? (
                                                    <span className="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded-md text-xs">
                                                        {log.contact.branch_name}
                                                    </span>
                                                ) : '-'}
                                            </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>
    );
}