import { Head, usePage } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';
import IndexPageLayout from '@/components/core/IndexPageLayout';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { BedDouble, CirclePlus } from 'lucide-react';
import LinkButton, { EditButton, ViewButton } from '@/components/core/LinkButton';
import { DeleteButton } from '@/components/core/DeleteButton';
import { forEach } from 'lodash';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Settings',
        href: 'dashboard/settings',
    },
];


export default function Index({ settings, availabilities }: { settings: any, availabilities: any }) {

    console.log(settings);


    console.log(usePage().props);


    const formatDate = (date: string) => new Date(date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });

    // const groupedByRoom = availabilities.reduce((acc: any, a: any) => {
    //     const roomId = a.room?.id || a.room_id;
    //     if (!acc[roomId]) acc[roomId] = { room: a.room, entries: [] };
    //     acc[roomId].entries.push(a);
    //     return acc;
    // }, {} as Record<string, { room: any; entries: any[] }>)+;


    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Settings" />
            <IndexPageLayout title='Settings' description='Manage hotel details and default settings' path='/dashboard/settings'>

                <table className="table-auto border-collapse border border-gray-300 bg-card text-sm">
                    <thead>
                        <tr>
                            <th className="border px-4 py-2">Key</th>
                            <th className="border px-4 py-2">Value</th>
                            <th className="border px-4 py-2">Description</th>
                            <th className="border px-4 py-2">Type</th>
                        </tr>
                    </thead>

                    <tbody>
                        {settings.map((s: any) => {

                            if (s.type === 'json') {
                                try {
                                    const parsed = JSON.parse(s.value);

                                    if (Array.isArray(parsed)) { s.value = parsed.map((item: any) => typeof item === "object" ? item.code : item).join(", ") }
                                    else { s.value = String(parsed); }

                                } catch (e) {
                                    s.value = s.value;
                                }
                            }

                            return (
                                <tr key={s.key}>
                                    <td className="border px-4 py-2">{s.key}</td>
                                    <td className="border px-4 py-2">  {Array.isArray(s.value) ? s.value.join(', ') : s.value.toString()} </td>
                                    <td className="border px-4 py-2">{s.description}</td>
                                    <td className="border px-4 py-2">{s.type}</td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>

                {/* <div >
                    <h1 className="text-xl font-bold ">Room Availabilities</h1>
                    <div className="overflow-x-auto space-y-6 text-sm text-center">
                        {Object.values(groupedByRoom).map(({ room, entries }: any) => (
                            <div key={room?.id || entries[0].room_id}>
                                <h2 className=" font-semibold mb-2">{room?.name || entries[0].room_id}</h2>
                                <table className="min-w-full border border-gray-300 bg-white">
                                    <thead>
                                        <tr className="bg-gray-100">
                                            <th className="border px-2 py-1">ID</th>
                                            <th className="border px-2 py-1">Start Date</th>
                                            <th className="border px-2 py-1">End Date</th>
                                            <th className="border px-2 py-1">Status</th>
                                            <th className="border px-2 py-1">Source</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {entries.map((a: any) => (
                                            <tr key={a.id}>
                                                <td className="border px-2 py-1">{a.room_id}</td>
                                                <td className="border px-2 py-1">{formatDate(a.start_date)}</td>
                                                <td className="border px-2 py-1">{formatDate(a.end_date)}</td>
                                                <td className={`border px-2 py-1 font-semibold ${a.status === 'booked'
                                                    ? 'text-green-600'
                                                    : a.status === 'blocked'
                                                        ? 'text-red-600'
                                                        : 'text-yellow-600'
                                                    }`}>
                                                    {a.status}
                                                </td>
                                                <td className="border px-2 py-1">{a.source}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        ))}
                    </div>
                </div> */}

            </IndexPageLayout>
        </AppLayout >
    );
}
