import { useState } from "react";
import AppLayout from "@/layouts/app-layout";
import { Head } from "@inertiajs/react";
import IndexPageLayout from "@/components/core/IndexPageLayout";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { RefreshCw, Link2, DownloadCloud, UploadCloud, Activity, } from "lucide-react";
import { TableBody, TableCell, TableHead, TableHeader, TableRow, Table } from "@/components/ui/table";

const systemStatus = {
    status: "running", // running | idle | error
    lastSync: "3 min ago",
    nextSync: "in 10 min"
};

const rooms = [
    {
        id: 1,
        name: "Deluxe Room",
        bookingRoomId: "BDX-201",
        lastSync: "2 min ago",
        importLogs: [
            { time: "10:01", message: "Imported availability from Booking.com", status: "success" },
            { time: "09:40", message: "Rate update synced", status: "success" },
        ],
        exportEndpoint: "/api/export/deluxe",
        importEndpoint: "/api/import/deluxe",
    },
    {
        id: 2,
        name: "Suite Room",
        bookingRoomId: "BDX-202",
        lastSync: "12 min ago",
        importLogs: [
            { time: "11:10", message: "Availability conflict detected", status: "warning" },
        ],
        exportEndpoint: "/api/export/suite",
        importEndpoint: "/api/import/suite",
    }
];

const rules = [
    {
        id: 1,
        type: "date_range",
        mode: "block",
        start_date: "2026-05-10",
        end_date: "2026-05-15",
        pattern: "One-time block",
        message: "Maintenance closure",
        source: "booking.com",
        updated_at: "2 hours ago",
        status: "active",
    },
    {
        id: 2,
        type: "weekly",
        mode: "active",
        start_date: null,
        end_date: null,
        pattern: "Every Friday",
        message: "Weekend pricing rule",
        source: "system",
        updated_at: "1 day ago",
        status: "active",
    },
    {
        id: 3,
        type: "monthly",
        mode: "block",
        start_date: null,
        end_date: null,
        pattern: "Every 1st day",
        message: "Monthly cleaning block",
        source: "admin",
        updated_at: "3 days ago",
        status: "inactive",
    },
];

export default function ChannelManager() {
    const [activeRoom, setActiveRoom] = useState("1");

    return (
        <AppLayout breadcrumbs={[{ title: "Channel Manager", href: "/dashboard/channel-manager" }]}>
            <Head title="Channel Manager" />

            <IndexPageLayout title="Channel Manager" path="/dashboard/channel-manager" description="Control Booking.com synchronization, manage room mappings, and monitor import/export activity in real time."   >

                {/* SYSTEM STATUS BAR */}
                <Card className="p-0 rounded-sm border-l-4 border-l-main">
                    <CardContent className="p-4 flex items-center justify-between">

                        <div className="flex items-center gap-3">
                            <Activity className={`h-4 w-4 ${systemStatus.status === "running" ? "text-emerald-600" : "text-red-600"}`} />

                            <div>
                                <p className="text-sm font-medium">
                                    Sync Engine: {systemStatus.status.toUpperCase()}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                    Last sync: {systemStatus.lastSync} • Next: {systemStatus.nextSync}
                                </p>
                            </div>
                        </div>

                        <Button size="sm">
                            <RefreshCw className="h-4 w-4 mr-2" />
                            Manual Sync
                        </Button>

                    </CardContent>
                </Card>

                {/* ROOM TABS */}
                <Tabs value={activeRoom} onValueChange={setActiveRoom}>

                    <TabsList className="mb-2">
                        {rooms.map(room => (
                            <TabsTrigger key={room.id} value={String(room.id)}>
                                {room.name}
                            </TabsTrigger>
                        ))}
                    </TabsList>

                    {rooms.map(room => (
                        <TabsContent key={room.id} value={String(room.id)} className="space-y-4">

                            {/* ROOM HEADER */}
                            <Card className="border border-border/60 p-0 rounded-sm">
                                <CardContent className="p-3 space-y-2 ">

                                    <div className="flex items-center justify-between gap-4">
                                        {/* LEFT: ROOM IDENTITY */}
                                        <div className="min-w-0">
                                            <div className="flex gap-3">
                                                <p className="text-sm font-semibold truncate">
                                                    {room.name}
                                                </p>
                                                <div className="flex items-center gap-1 ">
                                                    <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />

                                                    <span className="text-xs font-medium text-emerald-600">
                                                        Connected
                                                    </span>
                                                </div>

                                            </div>
                                            <p className="text-[11px] text-muted-foreground">
                                                Booking.com ID: <span className="font-medium text-foreground">{room.bookingRoomId}</span>
                                                <span className="mx-2">•</span>
                                                Last sync: {room.lastSync}
                                            </p>
                                        </div>

                                        {/* CENTER: STATUS */}


                                        {/* RIGHT: ACTIONS */}
                                        <div className="flex items-center gap-2">

                                            <Button size="sm" className="h-8 text-xs">
                                                <UploadCloud className="h-3.5 w-3.5 mr-1.5" />
                                                Export
                                            </Button>

                                            <Button size="sm" variant="outline" className="h-8 text-xs">
                                                <DownloadCloud className="h-3.5 w-3.5 mr-1.5" />
                                                Import
                                            </Button>

                                        </div>
                                    </div>


                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead>#</TableHead>
                                                <TableHead>Type</TableHead>
                                                <TableHead>Mode</TableHead>
                                                <TableHead>Range / Pattern</TableHead>
                                                <TableHead>Message</TableHead>
                                                <TableHead>Source</TableHead>
                                                <TableHead>Status</TableHead>
                                                <TableHead>Updated</TableHead>
                                            </TableRow>
                                        </TableHeader>

                                        <TableBody>
                                            {rules.map((rule) => (
                                                <TableRow key={rule.id} className="hover:bg-muted/40 transition">

                                                    <TableCell className="font-medium">
                                                        {rule.id}
                                                    </TableCell>

                                                    {/* Pattern Type */}
                                                    <TableCell>
                                                        <Badge variant="outline" className="capitalize">
                                                            {rule.type}
                                                        </Badge>
                                                    </TableCell>

                                                    {/* Rule Mode */}
                                                    <TableCell>
                                                        <Badge
                                                            className={
                                                                rule.mode === "block"
                                                                    ? "bg-red-50 text-red-600"
                                                                    : "bg-emerald-50 text-emerald-600"
                                                            }
                                                        >
                                                            {rule.mode}
                                                        </Badge>
                                                    </TableCell>

                                                    {/* Range / Pattern */}
                                                    <TableCell className="text-sm">
                                                        {rule.type === "date_range" && (
                                                            <span>
                                                                {rule.start_date} → {rule.end_date}
                                                            </span>
                                                        )}

                                                        {rule.type !== "date_range" && (
                                                            <span className="text-muted-foreground">
                                                                {rule.pattern}
                                                            </span>
                                                        )}
                                                    </TableCell>

                                                    {/* Message */}
                                                    <TableCell className="text-sm text-muted-foreground max-w-[220px] truncate">
                                                        {rule.message}
                                                    </TableCell>

                                                    {/* Source */}
                                                    <TableCell className="capitalize text-sm">
                                                        {rule.source}
                                                    </TableCell>


                                                    {/* Status */}
                                                    <TableCell>
                                                        <Badge
                                                            className={
                                                                rule.status === "active"
                                                                    ? "bg-blue-50 text-blue-600"
                                                                    : "bg-gray-100 text-gray-600"
                                                            }
                                                        >
                                                            {rule.status}
                                                        </Badge>
                                                    </TableCell>

                                                    {/* Updated */}
                                                    <TableCell className="text-xs text-muted-foreground">
                                                        {rule.updated_at}
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>


                                </CardContent>
                            </Card>



                        </TabsContent>
                    ))}

                </Tabs>

            </IndexPageLayout>
        </AppLayout>
    );
}