csa-dashboard-sementara/csa-dashboard/app/(dashboard)/users/page.tsx

"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { ColumnDef } from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { DataTable } from "@/components/data-table/data-table";
import { useUsers, useSetupUserToken } from "@/modules/users/hooks";
import { userTokenSchema, type UserTokenInput, User } from "@/modules/users/schemas";
import { useToast } from "@/hooks/use-toast";
import { Users as UsersIcon, Eye, Copy } from "lucide-react";
import { formatDateTime } from "@/lib/utils";

export default function UsersPage() {
    const { toast } = useToast();
    const { data, isLoading } = useUsers();
    const setupMutation = useSetupUserToken();
    const [selectedUser, setSelectedUser] = useState<User | null>(null);
    const [isDetailOpen, setIsDetailOpen] = useState(false);

    const {
        register,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<UserTokenInput>({
        resolver: zodResolver(userTokenSchema),
    });

    const onSubmit = async (data: UserTokenInput) => {
        try {
            await setupMutation.mutateAsync(data);
            toast({ title: "Token setup successful", description: "User token has been configured" });
            reset();
        } catch (error) {
            toast({ title: "Setup failed", variant: "destructive" });
        }
    };

    const handleCopy = async (text: string) => {
        try {
            await navigator.clipboard.writeText(text);
            toast({ title: "Copied to clipboard", description: "Text has been copied successfully" });
        } catch (error) {
            toast({ title: "Copy failed", variant: "destructive" });
        }
    };

    const handleOpenDetail = (user: User) => {
        setSelectedUser(user);
        setIsDetailOpen(true);
    };

    const columns: ColumnDef<User>[] = [
        {
            accessorKey: "UserID_UT",
            header: "User ID",
            cell: ({ row }) => (
                <div className="font-medium">{row.original.UserID_UT}</div>
            ),
        },
        {
            accessorKey: "Token_UT",
            header: "Token",
            cell: ({ row }) => (
                <div className="font-mono text-sm max-w-[300px] truncate">
                    {row.original.Token_UT}
                </div>
            ),
        },
        {
            accessorKey: "CreatedAt_UT",
            header: "Created",
            cell: ({ row }) => formatDateTime(row.original.CreatedAt_UT),
        },
        {
            accessorKey: "UpdatedAt_UT",
            header: "Updated",
            cell: ({ row }) => formatDateTime(row.original.UpdatedAt_UT),
        },
        {
            id: "actions",
            cell: ({ row }) => (
                <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleOpenDetail(row.original)}
                >
                    <Eye className="h-4 w-4" />
                </Button>
            ),
        },
    ];

    const users = data?.data || [];

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold">Users Management</h1>
                <p className="text-muted-foreground">Manage user tokens and settings</p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <UsersIcon className="h-5 w-5" />
                        All Users
                    </CardTitle>
                    <CardDescription>
                        Total: {users.length} users
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    {isLoading ? (
                        <div>Loading...</div>
                    ) : (
                        <DataTable columns={columns} data={users} searchKey="UserID_UT" />
                    )}
                </CardContent>
            </Card>

            <Card className="max-w-2xl">
                <CardHeader>
                    <CardTitle>Setup User Token</CardTitle>
                    <CardDescription>Configure user authentication token</CardDescription>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="userID">User ID</Label>
                            <Input id="userID" {...register("userID")} placeholder="C005ZS80" />
                            {errors.userID && (
                                <p className="text-sm text-destructive">{errors.userID.message}</p>
                            )}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="token">Token</Label>
                            <Input 
                                id="token" 
                                {...register("token")} 
                                placeholder="Firebase Cloud Messaging Token" 
                            />
                            {errors.token && (
                                <p className="text-sm text-destructive">{errors.token.message}</p>
                            )}
                        </div>

                        <Button type="submit" disabled={setupMutation.isPending}>
                            {setupMutation.isPending ? "Setting up..." : "Setup Token"}
                        </Button>
                    </form>
                </CardContent>
            </Card>

            <Dialog open={isDetailOpen} onOpenChange={setIsDetailOpen}>
                <DialogContent className="sm:max-w-2xl">
                    <DialogHeader>
                        <DialogTitle>User Details</DialogTitle>
                        <DialogDescription>
                            Complete user information and token
                        </DialogDescription>
                    </DialogHeader>
                    {selectedUser && (
                        <div className="space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="text-sm font-medium text-muted-foreground">User ID</label>
                                    <div className="mt-1 flex items-center gap-2">
                                        <p className="text-sm font-mono">{selectedUser.UserID_UT}</p>
                                        <Button
                                            size="icon"
                                            variant="ghost"
                                            className="h-6 w-6"
                                            onClick={() => handleCopy(selectedUser.UserID_UT)}
                                        >
                                            <Copy className="h-3 w-3" />
                                        </Button>
                                    </div>
                                </div>
                                <div>
                                    <label className="text-sm font-medium text-muted-foreground">UUID</label>
                                    <p className="mt-1 text-sm font-mono truncate">{selectedUser.UUID_UT}</p>
                                </div>
                            </div>

                            <div>
                                <label className="text-sm font-medium text-muted-foreground">FCM Token</label>
                                <div className="mt-2 flex items-center gap-2">
                                    <div className="flex-1 rounded-lg bg-muted p-3 font-mono text-xs break-all">
                                        {selectedUser.Token_UT}
                                    </div>
                                    <Button
                                        size="icon"
                                        variant="outline"
                                        onClick={() => handleCopy(selectedUser.Token_UT)}
                                    >
                                        <Copy className="h-4 w-4" />
                                    </Button>
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="text-sm font-medium text-muted-foreground">Created At</label>
                                    <p className="mt-1 text-sm">{formatDateTime(selectedUser.CreatedAt_UT)}</p>
                                </div>
                                <div>
                                    <label className="text-sm font-medium text-muted-foreground">Updated At</label>
                                    <p className="mt-1 text-sm">{formatDateTime(selectedUser.UpdatedAt_UT)}</p>
                                </div>
                            </div>
                        </div>
                    )}
                </DialogContent>
            </Dialog>
        </div>
    );
}