import { useState } from "react";
import { Replay } from "../../types/replay";
import { ActionButton } from "./ActionButton";

interface ReplayRowProps {
    replay: Replay;
    onView: (uuid: string) => void;
    onDelete: (uuid: string) => void;
}

const ReplayRow: React.FC<ReplayRowProps> = ({ replay, onView, onDelete }) => {
    const [isDialogOpen, setIsDialogOpen] = useState(false);

    const openDialog = () => setIsDialogOpen(true);
    const closeDialog = () => setIsDialogOpen(false);

    return (
        <>
            <tr className="border-b hover:bg-gray-100">
                <td className="py-3 px-4">{replay.name}</td>
                <td className="py-3 px-4">{replay.uuid}</td>
                <td className="py-3 px-4">{replay.created_by}</td>
                <td className="py-3 px-4">{new Date(replay.time_created * 1000).toLocaleString()}</td>
                <td className="py-3 px-4 flex gap-2">
                    <ActionButton color="blue" onClick={() => onView(replay.uuid)}>
                        View
                    </ActionButton>
                    <ActionButton color="red" onClick={() => onDelete(replay.uuid)}>
                        Delete
                    </ActionButton>
                    <ActionButton color="yellow" onClick={() => openDialog()}>
                        Details
                    </ActionButton>
                </td>
            </tr>

            {isDialogOpen && (
                <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-50">
                    <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full z-10">
                        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Replay Details</h2>
                        <div className="space-y-2 text-gray-700">
                            <p><strong className="font-medium">Name:</strong> {replay.name}</p>
                            <p><strong className="font-medium">UUID:</strong> {replay.uuid}</p>
                            <p><strong className="font-medium">Created By:</strong> {replay.created_by}</p>
                            <p><strong className="font-medium">Time Created:</strong> {new Date(replay.time_created * 1000).toLocaleString()}</p>
                        </div>
                        <div className="mt-6 flex justify-end">
                            <ActionButton color="red" onClick={closeDialog}>
                                Close
                            </ActionButton>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}
export default ReplayRow;