import { useState } from 'react';
import { Card, Button, Modal } from '@heroui/react';
import AppLayout from '@/Layouts/AppLayout';
import { FilterSelect } from '@/Components/ui/FilterSelect';
import { SearchInput } from '@/Components/ui/SearchInput';
import { DateRangeFilter } from '@/Components/ui/DateRangeFilter';
import { useAll, useList } from '@/hooks/useResource';
import { 
    ClockIcon, 
    ChevronLeftIcon, 
    ChevronRightIcon, 
    PlusIcon, 
    PencilIcon, 
    TrashIcon,
    ArrowRightIcon,
    InformationCircleIcon,
    FunnelIcon,
    XMarkIcon
} from '@heroicons/react/24/outline';

interface Change {
    field: string;
    label: string;
    before: string;
    after: string;
}

interface ActivityItem {
    id: number;
    waktu: string;
    aktor: string;
    event: 'created' | 'updated' | 'deleted';
    model: string;
    changes: Change[];
}

interface UserOption {
    id: number;
    name: string;
}

const MODEL_OPTS = [
    { id: 'kegiatan', label: 'Kegiatan' },
    { id: 'surat_masuk', label: 'Surat Masuk' },
    { id: 'surat_keluar', label: 'Surat Keluar' },
    { id: 'disposisi', label: 'Disposisi' },
    { id: 'honorarium', label: 'Honorarium' },
    { id: 'klien', label: 'Klien' },
    { id: 'narasumber', label: 'Narasumber' },
    { id: 'user', label: 'Pengguna' },
    { id: 'board', label: 'Papan Kanban' },
    { id: 'task', label: 'Tugas (Task)' },
    { id: 'file_manager', label: 'Manajer Berkas' },
    { id: 'setting', label: 'Pengaturan' },
];

const EVENT_OPTS = [
    { id: 'created', label: 'Penambahan Data' },
    { id: 'updated', label: 'Perubahan Data' },
    { id: 'deleted', label: 'Penghapusan Data' },
];

const EVENT_CONFIG: Record<string, { title: string; badgeBg: string; badgeText: string; iconBg: string; icon: typeof PlusIcon }> = {
    created: { 
        title: 'Menambahkan Data', 
        badgeBg: 'bg-emerald-50 border-emerald-200', 
        badgeText: 'text-emerald-700', 
        iconBg: 'bg-emerald-500 text-white', 
        icon: PlusIcon 
    },
    updated: { 
        title: 'Mengubah Data', 
        badgeBg: 'bg-sky-50 border-sky-200', 
        badgeText: 'text-sky-700', 
        iconBg: 'bg-sky-500 text-white', 
        icon: PencilIcon 
    },
    deleted: { 
        title: 'Menghapus Data', 
        badgeBg: 'bg-rose-50 border-rose-200', 
        badgeText: 'text-rose-700', 
        iconBg: 'bg-rose-500 text-white', 
        icon: TrashIcon 
    },
};

function formatWaktu(iso: string) {
    const date = new Date(iso);
    const now = new Date();
    const diffSec = Math.floor((now.getTime() - date.getTime()) / 1000);
    
    let timeAgo = '';
    if (diffSec < 60) timeAgo = 'Baru saja';
    else if (diffSec < 3600) timeAgo = `${Math.floor(diffSec / 60)} menit lalu`;
    else if (diffSec < 86400) timeAgo = `${Math.floor(diffSec / 3600)} jam lalu`;
    else timeAgo = `${Math.floor(diffSec / 86400)} hari lalu`;

    const fullDate = date.toLocaleString('id-ID', { 
        day: 'numeric', 
        month: 'short', 
        year: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit' 
    });

    return { timeAgo, fullDate };
}

export default function AktivitasIndex() {
    const [logName, setLogName] = useState('');
    const [causerUserId, setCauserUserId] = useState('');
    const [eventFilter, setEventFilter] = useState('');
    const [searchQuery, setSearchQuery] = useState('');
    const [dariTanggal, setDariTanggal] = useState('');
    const [sampaiTanggal, setSampaiTanggal] = useState('');
    const [page, setPage] = useState(1);
    
    const { data: usersData } = useAll<UserOption[]>('users-list', '/users', { per_page: 100 });
    const rawUsers: any[] = Array.isArray(usersData) ? usersData : Array.isArray((usersData as any)?.data) ? (usersData as any).data : [];
    const userOptions = rawUsers.map((u) => ({
        id: String(u.id),
        label: u.name ?? u.username ?? `User #${u.id}`,
    }));

    const { data, isLoading } = useList<ActivityItem>('activity-log', '/activity-log', { 
        log_name: logName || undefined,
        causer_id: causerUserId || undefined,
        event: eventFilter || undefined,
        dari_tanggal: dariTanggal || undefined,
        sampai_tanggal: sampaiTanggal || undefined,
        search: searchQuery || undefined,
        page 
    });

    const items = data?.data ?? [];

    const [filterModalOpen, setFilterModalOpen] = useState(false);
    const activeFilterCount = [causerUserId, logName, eventFilter, dariTanggal, sampaiTanggal].filter(Boolean).length;
    const isFilterActive = activeFilterCount > 0;

    function resetFilters() {
        setCauserUserId('');
        setLogName('');
        setEventFilter('');
        setDariTanggal('');
        setSampaiTanggal('');
        setPage(1);
    }

    return (
        <AppLayout>
            <div className="flex flex-col gap-5">
                {/* Standard Page Header */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm">
                    <h1 className="text-lg sm:text-xl font-bold text-slate-900">Riwayat Aktivitas Pengguna</h1>
                </div>

                {/* Filter & Search Bar */}
                <div className="flex items-center gap-2">
                    <div className="flex-1 min-w-0">
                        <SearchInput
                            value={searchQuery}
                            onChange={(v) => { setSearchQuery(v); setPage(1); }}
                            placeholder="Cari aktivitas..."
                        />
                    </div>
                    <Button 
                        variant={isFilterActive ? "primary" : "outline"} 
                        onPress={() => setFilterModalOpen(true)}
                        className={`h-9 px-3 sm:px-4 gap-1.5 sm:gap-2 font-medium shrink-0 rounded-full text-xs ${
                            isFilterActive
                                ? 'bg-sky-600 hover:bg-sky-700 text-white border-transparent'
                                : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
                        }`}
                    >
                        <FunnelIcon className="w-3.5 h-3.5" />
                        <span className="hidden sm:inline">Filter</span>
                        {isFilterActive && (
                            <span className="w-4 h-4 rounded-full bg-white text-sky-700 text-[10px] font-bold flex items-center justify-center">
                                {activeFilterCount}
                            </span>
                        )}
                    </Button>
                    {isFilterActive && (
                        <Button 
                            variant="primary" 
                            onPress={resetFilters}
                            className="h-9 px-3 sm:px-4 text-xs bg-red-600 hover:bg-red-700 text-white font-medium shrink-0 rounded-full border-transparent shadow-sm"
                        >
                            Reset
                        </Button>
                    )}
                </div>

                <Modal isOpen={filterModalOpen} onOpenChange={setFilterModalOpen}>
                    <Modal.Backdrop className="bg-black/20 backdrop-blur-none">
                        <Modal.Container>
                            <Modal.Dialog className="max-w-md w-full bg-white p-5 rounded-2xl shadow-xl space-y-4">
                                <div className="flex items-center justify-between border-b border-gray-100 pb-3">
                                    <div className="flex items-center gap-2">
                                        <FunnelIcon className="w-4 h-4 text-sky-600" />
                                        <h3 className="font-bold text-gray-900 text-sm">Filter Riwayat Aktivitas</h3>
                                    </div>
                                    <button 
                                        onClick={() => setFilterModalOpen(false)}
                                        className="p-1 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                                    >
                                        <XMarkIcon className="w-4 h-4" />
                                    </button>
                                </div>

                                <div className="space-y-3.5 text-xs">
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Pengguna</label>
                                        <FilterSelect 
                                            value={causerUserId} 
                                            onChange={(v) => { setCauserUserId(v); setPage(1); }} 
                                            placeholder="Semua Pengguna" 
                                            items={userOptions} 
                                        />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Kategori / Model</label>
                                        <FilterSelect 
                                            value={logName} 
                                            onChange={(v) => { setLogName(v); setPage(1); }} 
                                            placeholder="Semua Kategori" 
                                            items={MODEL_OPTS} 
                                        />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Aksi</label>
                                        <FilterSelect 
                                            value={eventFilter} 
                                            onChange={(v) => { setEventFilter(v); setPage(1); }} 
                                            placeholder="Semua Aksi" 
                                            items={EVENT_OPTS} 
                                        />
                                    </div>
                                    <div>
                                        <label className="block font-medium text-gray-700 mb-1">Rentang Tanggal</label>
                                        <DateRangeFilter
                                            from={dariTanggal}
                                            to={sampaiTanggal}
                                            onFromChange={(v) => { setDariTanggal(v); setPage(1); }}
                                            onToChange={(v) => { setSampaiTanggal(v); setPage(1); }}
                                        />
                                    </div>
                                </div>

                                <div className="flex items-center justify-between pt-3 border-t border-gray-100">
                                    <Button 
                                        variant="primary" 
                                        onPress={resetFilters}
                                        className="h-9 px-4 text-xs bg-red-600 hover:bg-red-700 text-white font-medium rounded-full border-transparent shadow-sm"
                                    >
                                        Reset Filter
                                    </Button>
                                    <Button 
                                        variant="primary" 
                                        onPress={() => setFilterModalOpen(false)}
                                        className="h-9 px-4 text-xs bg-sky-600 hover:bg-sky-700 text-white font-medium rounded-full"
                                    >
                                        Terapkan Filter
                                    </Button>
                                </div>
                            </Modal.Dialog>
                        </Modal.Container>
                    </Modal.Backdrop>
                </Modal>

                {/* Info Helper Box */}
                <div className="flex items-center gap-2 bg-slate-50 border border-slate-200 rounded-lg p-2.5 text-slate-700 text-xs">
                    <InformationCircleIcon className="w-4 h-4 text-sky-600 shrink-0" />
                    <div>
                        <span className="font-semibold">Petunjuk:</span> Teks <span className="font-semibold text-rose-600">merah</span> menandakan data lama dan <span className="font-semibold text-emerald-600">hijau</span> adalah data baru yang diperbarui.
                    </div>
                </div>

                {/* Loading State */}
                {isLoading && (
                    <div className="py-16 text-center text-sm text-slate-400 space-y-2">
                        <div className="w-8 h-8 border-2 border-sky-600 border-t-transparent rounded-full animate-spin mx-auto" />
                        <p>Memuat riwayat aktivitas...</p>
                    </div>
                )}

                {/* Empty State */}
                {!isLoading && items.length === 0 && (
                    <Card className="border border-slate-200/80 bg-white">
                        <Card.Content className="py-16 text-center text-slate-400 space-y-3">
                            <ClockIcon className="w-12 h-12 mx-auto text-slate-300" />
                            <div>
                                <h3 className="text-sm font-semibold text-slate-700">Belum Ada Aktivitas Tercatat</h3>
                                <p className="text-xs text-slate-400 mt-0.5">Tidak ditemukan riwayat aktivitas sesuai filter yang dipilih.</p>
                            </div>
                        </Card.Content>
                    </Card>
                )}

                {/* Simple Card List */}
                <div className="space-y-3">
                    {!isLoading && items.map((item) => {
                        const cfg = EVENT_CONFIG[item.event] ?? EVENT_CONFIG.updated;
                        const { timeAgo, fullDate } = formatWaktu(item.waktu);

                        return (
                            <Card key={item.id} className="border border-slate-200/80 shadow-2xs bg-white">
                                <Card.Content className="p-4 space-y-3">
                                    {/* Header Row */}
                                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-100 pb-2.5">
                                        <div className="flex items-center gap-3">
                                            <div className="w-8 h-8 rounded-full bg-slate-800 text-white font-bold text-xs flex items-center justify-center">
                                                {item.aktor.slice(0, 2).toUpperCase()}
                                            </div>
                                            <div>
                                                <div className="flex items-center gap-2">
                                                    <span className="text-sm font-bold text-slate-900">{item.aktor}</span>
                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${cfg.badgeBg} ${cfg.badgeText}`}>
                                                        {cfg.title}
                                                    </span>
                                                </div>
                                                <div className="text-xs text-slate-500">
                                                    Kategori Menu: <span className="font-semibold text-slate-700">{item.model}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="text-left sm:text-right">
                                            <div className="text-xs font-semibold text-sky-700 bg-sky-50 px-2 py-0.5 rounded inline-block">
                                                {timeAgo}
                                            </div>
                                            <div className="text-[11px] text-slate-400 mt-0.5">{fullDate}</div>
                                        </div>
                                    </div>

                                    {/* Changes Detail List */}
                                    {item.changes.length > 0 ? (
                                        <div className="space-y-2 pt-0.5">
                                            <div className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">Rincian Perubahan Data:</div>
                                            <div className="grid grid-cols-1 gap-1.5">
                                                {item.changes.map((c, idx) => (
                                                    <div key={idx} className="p-2 rounded-lg bg-slate-50 border border-slate-100 text-xs flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                                                        <span className="font-semibold text-slate-700 w-36 shrink-0">{c.label}</span>
                                                        <div className="flex items-center gap-2 flex-1 min-w-0 flex-wrap">
                                                            <span className="px-2 py-0.5 rounded bg-rose-100/70 text-rose-700 font-mono text-[11px] max-w-[200px] truncate" title={c.before}>
                                                                {c.before || '-'}
                                                            </span>
                                                            <ArrowRightIcon className="w-3.5 h-3.5 text-slate-400 shrink-0" />
                                                            <span className="px-2 py-0.5 rounded bg-emerald-100/70 text-emerald-800 font-semibold font-mono text-[11px] max-w-[200px] truncate" title={c.after}>
                                                                {c.after || '-'}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    ) : (
                                        <div className="text-xs text-slate-500 italic bg-slate-50 p-2 rounded-lg border border-slate-100">
                                            Pengguna melakukan {item.event === 'created' ? 'pembuatan' : item.event === 'deleted' ? 'penghapusan' : 'pembaruan'} record pada {item.model}.
                                        </div>
                                    )}
                                </Card.Content>
                            </Card>
                        );
                    })}
                </div>

                {/* Pagination Controls */}
                {data && data.last_page > 1 && (
                    <div className="flex flex-col sm:flex-row items-center justify-between gap-2 bg-white border border-slate-200/80 p-3 rounded-2xl shadow-sm">
                        <Button
                            variant="outline"
                            size="sm"
                            isDisabled={page <= 1}
                            onPress={() => setPage((p) => Math.max(1, p - 1))}
                            className="gap-1 text-xs"
                        >
                            <ChevronLeftIcon className="w-4 h-4" /> <span className="hidden sm:inline">Halaman Sebelumnya</span>
                        </Button>
                        <span className="text-xs font-semibold text-slate-600">
                            Halaman {data.current_page} dari {data.last_page}
                        </span>
                        <Button
                            variant="outline"
                            size="sm"
                            isDisabled={page >= data.last_page}
                            onPress={() => setPage((p) => p + 1)}
                            className="gap-1 text-xs"
                        >
                            <span className="hidden sm:inline">Halaman Selanjutnya</span> <ChevronRightIcon className="w-4 h-4" />
                        </Button>
                    </div>
                )}
            </div>
        </AppLayout>
    );
}