"use client"

import { useState } from "react"
import { useTranslations } from "next-intl"
import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/cn"
import { format } from "date-fns"

export default function DevicesPage() {
    const t = useTranslations()
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [selectedDevice, setSelectedDevice] = useState<number | null>(null)
    const [password, setPassword] = useState("")

    // Mock Data based on image
    const devices = [
        { id: 1, date: "2025-12-01", os: "Windows 10", browser: "Chrome 142", status: "active" },
        { id: 2, date: "2025-12-01", os: "Windows 10", browser: "Chrome 142", status: "active" },
        { id: 3, date: "2025-12-01", os: "Windows 10", browser: "Chrome 142", status: "active" },
        { id: 4, date: "2025-12-03", os: "Windows 10", browser: "Chrome 143", status: "active" },
        { id: 5, date: "2025-12-04", os: "Windows 10", browser: "Chrome 143", status: "active" },
        { id: 6, date: "2025-12-21", os: "Windows 10", browser: "Chrome 142", status: "active" },
        { id: 7, date: "2025-12-21", os: "Windows 10", browser: "Chrome 143", status: "active" },
        { id: 8, date: "2026-01-27", os: "Windows 10", browser: "Chrome 142", status: "active" },
    ]

    const handleEndConnectionClick = (id: number) => {
        setSelectedDevice(id)
        setIsModalOpen(true)
        setPassword("")
    }

    const handleConfirm = () => {
        // Handle API call here
        console.log("Ending connection for device", selectedDevice, "with password", password)
        setIsModalOpen(false)
    }

    // Helper to format date display roughly matching the image style if needed, 
    // but typically standard format is safer. Image shows "1 ديسمبر, 2025"
    // We'll stick to string rendering for now or simple formatting if we had real dates.

    return (
        <div className="space-y-6 p-4">
            <div className="bg-white rounded-xl p-6 shadow-sm min-h-[500px]">
                {/* Header */}
                <div className="mb-8 ">
                    <h1 className="text-2xl font-bold text-teal-500">
                        {t("devices_page.title")}
                    </h1>
                </div>

                {/* Table */}
                <div className="overflow-x-auto">
                    <table className="w-full">
                        <thead>
                            <tr className="border-b border-gray-100">
                                <th className="pb-4 text-center font-medium text-gray-700">{t("devices_page.sl")}</th>
                                <th className="pb-4 text-center font-medium text-gray-700">{t("devices_page.date")}</th>
                                <th className="pb-4 text-center font-medium text-gray-700">{t("devices_page.os")}</th>
                                <th className="pb-4 text-center font-medium text-gray-700">{t("devices_page.browser")}</th>
                                <th className="pb-4 text-center font-medium text-gray-700">{t("devices_page.logout_date")}</th>
                                <th className="pb-4 text-center font-medium text-gray-700">{t("devices_page.action")}</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-50">
                            {devices.map((device) => (
                                <tr key={device.id} className="hover:bg-gray-50/50 transition-colors">
                                    <td className="py-4 text-center text-gray-500">{device.id}</td>
                                    <td className="py-4 text-center text-gray-500">{device.date}</td>
                                    <td className="py-4 text-center text-gray-500">{device.os}</td>
                                    <td className="py-4 text-center text-gray-500">{device.browser}</td>
                                    <td className="py-4 text-center text-gray-500">{t(`devices_page.${device.status}`)}</td>
                                    <td className="py-4 text-center">
                                        <Button
                                            onClick={() => handleEndConnectionClick(device.id)}
                                            className={cn(
                                                "h-9 px-6 text-white font-bold rounded-md border-0 text-sm shadow-sm",
                                                "bg-gradient-to-l from-violet-600 to-amber-300 hover:opacity-90 transition-opacity"
                                            )}
                                        >
                                            {t("devices_page.end_connection")}
                                        </Button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Password Modal */}
            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
                <DialogContent className="sm:max-w-md">
                    <DialogHeader>
                        <DialogTitle className="text-center text-xl text-teal-600 mb-2">
                            {t("devices_page.modal_title")}
                        </DialogTitle>
                    </DialogHeader>
                    
                    <div className="space-y-4 py-4">
                        <div className="space-y-2">
                            <label className="text-sm font-medium text-gray-700 block ">
                                {t("devices_page.password_label")}
                            </label>
                            <Input
                                type="password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                placeholder={t("devices_page.password_placeholder")}
                                className=""
                            />
                        </div>
                    </div>

                    <DialogFooter className="flex-col sm:justify-center gap-2">
                        <div className="flex w-full gap-2">
                            <Button 
                                variant="outline" 
                                onClick={() => setIsModalOpen(false)}
                                className="flex-1"
                            >
                                {t("devices_page.cancel")}
                            </Button>
                            <Button 
                                onClick={handleConfirm}
                                className={cn(
                                    "flex-1 text-white font-bold",
                                    "bg-gradient-to-l from-violet-600 to-amber-300 hover:opacity-90 transition-opacity"
                                )}
                            >
                                {t("devices_page.confirm")}
                            </Button>
                        </div>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    )
}