import { Head, router } from '@inertiajs/react';
import { useState } from 'react';
import { DataTable } from '@/components/data-table';
import { Card, CardContent } from '@/components/ui/card';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue
} from "@/components/ui/select";
import system from '@/routes/system';
import type { SystemLog } from '@/types';
import { getColumns } from './partials/columns';
import { LogDetailModal } from './partials/log-detail-modal';

interface Props {
    logFiles: string[];
    selectedFile: string;
    logs: SystemLog[];
}

export default function SystemLogIndex({ logFiles, selectedFile, logs }: Props) {
    const [viewingLog, setViewingLog] = useState<SystemLog | null>(null);

    const columns = getColumns({
        onView: (log) => setViewingLog(log)
    });

    const onFileChange = (file: string) => {
        router.get(system.logs.index().url, { file }, {
            preserveState: true,
            preserveScroll: true,
            only: ['logs', 'selectedFile']
        });
    };

    return (

        <div className="flex flex-col gap-6 p-6">
            <Head title="Logs" />

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Logs</h1>
                </div>

                <div className="flex items-center gap-2">
                    <span className="text-sm font-medium">File Log:</span>
                    <Select value={selectedFile} onValueChange={onFileChange}>
                        <SelectTrigger className="w-[250px]">
                            <SelectValue placeholder="Pilih file" />
                        </SelectTrigger>
                        <SelectContent align="end">
                            {logFiles.map((file) => (
                                <SelectItem key={file} value={file}>
                                    {file}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
                <CardContent className="p-0">
                    <DataTable
                        columns={columns}
                        data={logs}
                        filters={[
                            {
                                columnId: 'level',
                                title: 'Level',
                                options: [
                                    { label: 'ERROR', value: 'ERROR' },
                                    { label: 'WARNING', value: 'WARNING' },
                                    { label: 'INFO', value: 'INFO' },
                                    { label: 'DEBUG', value: 'DEBUG' },
                                ]
                            }
                        ]}
                        showSelection={false}
                    />
                </CardContent>
            </Card>

            <LogDetailModal
                log={viewingLog}
                onClose={() => setViewingLog(null)}
            />
        </div>
    );
}

SystemLogIndex.layout = {
    breadcrumbs: [
        { title: 'Sistem' },
    ],
};
