import { Vehicle } from "@/types";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

type Props = {
    data: Vehicle[];
    latestTimestamp: string;
}


export default function CheckSize({ data, latestTimestamp }: Props) {

    const [search, setSearch] = useState('');
    const [category, setCategory] = useState('mobil');

    const [size, setSize] = useState('');

    // Format the timestamp
    const formatDate = (timestamp: string | undefined) => {
        if (!timestamp) return ""
        return new Date(timestamp).toLocaleString('id-ID', {
            day: '2-digit',
            month: 'long',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        })
    }

    // Get the action message
    const getActionMessage = (action: string | undefined) => {
        if (!action) return "Tidak ada perubahan"

        const timestamp = formatDate(latestTimestamp)

        switch (action) {
            case 'created':
                return `Mobil baru ditambahkan ${timestamp}`
            case 'updated':
                return `Mobil diperbarui ${timestamp}`
            case 'deleted':
                return `Mobil dihapus ${timestamp}`
            default:
                return `Terakhir update ${timestamp}`
        }
    }

    return (
        <>
            <div className="items-center bg-white p-[.4em] font-medium text-black text-center">
                <small className="leading-none animate-pulse"> {getActionMessage(latestTimestamp)}</small>
            </div>
            <div className="mx-auto mt-6 p-4 container">
                <div className="flex flex-col">
                    <div className="mb-4">
                        <h1 className="font-bold text-2xl">Daftar Ukuran Kendaraan</h1>
                        <p className="text-muted-foreground">Cek kategori kendaraan Anda</p>
                    </div>
                    <div className="flex gap-4">
                        <div>
                            <p className="mb-2 text-muted-foreground">Kategori</p>
                            <div className="flex items-center gap-2">
                                <button
                                    onClick={() => { setCategory('mobil'); setSize('all') }}
                                    className={category === 'mobil' ? 'font-black border rounded-md p-1.5 px-4 transition-colors duration-300 bg-white text-black' : 'text-muted-foreground font-black border rounded-md p-1.5 px-4 transition-colors duration-300 hover:bg-white hover:text-black'}
                                >Mobil</button>
                                <button
                                    onClick={() => { setCategory('motor'); setSize('all') }}
                                    className={category === 'motor' ? 'font-black border rounded-md p-1.5 px-4 transition-colors duration-300 bg-white text-[#ed1c25]' : 'text-muted-foreground font-black border rounded-md p-1.5 px-4 transition-colors duration-300 hover:bg-white hover:text-[#ed1c25]'}
                                >Motor</button>
                            </div>
                        </div>
                    </div>

                    <div className="gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-4">
                        <div className="col-span-2">
                            <Input
                                type="text"
                                placeholder="Cari..."
                                className="w-full"
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                            />
                        </div>
                        <div className="col-span-1">
                            <Select
                                value={size}
                                onValueChange={setSize}
                            >
                                <SelectTrigger>
                                    <SelectValue placeholder="Ukuran" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value='all'>Semua</SelectItem>

                                    {data
                                        .filter((abj, index, self) => index === self.findIndex((t) => t.size === abj.size))
                                        .filter((vehicle) => {
                                            return vehicle.category.toLowerCase().includes(category.toLowerCase());
                                        })
                                        .map((vehicle, index) => (
                                            <SelectItem key={index} value={vehicle.size}>{vehicle.size}</SelectItem>
                                        ))}
                                </SelectContent>
                            </Select>
                        </div>
                    </div>
                </div>

                <div className="gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-8">
                    {data
                        .filter((vehicle) => {
                            return vehicle.category.toLowerCase().includes(category.toLowerCase());
                        })
                        .filter((vehicle) => {
                            return vehicle.brand.toLowerCase().includes(search.toLowerCase()) ||
                                vehicle.type.toLowerCase().includes(search.toLowerCase()) ||
                                vehicle.size.toLowerCase().includes(search.toLowerCase());
                        })
                        .filter((vehicle) => {
                            if (size === 'all') {
                                return true;
                            }
                            return vehicle.size.toLowerCase().includes(size.toLowerCase());
                        }).map((vehicle) => (
                            <div key={vehicle.id} className="p-4 border rounded-lg">
                                <div className="flex justify-between items-center">
                                    <div>
                                        <p className="text-muted-foreground text-xs">{vehicle.brand}</p>
                                        <h2 className="font-bold text-lg">{vehicle.type}</h2>
                                    </div>
                                    <div>
                                        <p className="text-muted-foreground text-sm">{vehicle.size}</p>
                                    </div>
                                </div>
                            </div>
                        ))}
                </div>
            </div>
        </>
    );
}