"use client";

import {
	RiAddLine,
	RiAlertLine,
	RiCheckLine,
	RiDeleteBinLine,
	RiFileCopyLine,
	RiSmartphoneLine,
} from "@remixicon/react";
import { formatDistanceToNow } from "date-fns";
import { ptBR } from "date-fns/locale";
import { useState } from "react";
import {
	createApiTokenAction,
	revokeApiTokenAction,
} from "@/app/(dashboard)/ajustes/actions";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

interface ApiToken {
	id: string;
	name: string;
	tokenPrefix: string;
	lastUsedAt: Date | null;
	lastUsedIp: string | null;
	createdAt: Date;
	expiresAt: Date | null;
	revokedAt: Date | null;
}

interface ApiTokensFormProps {
	tokens: ApiToken[];
}

export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
	const [isCreateOpen, setIsCreateOpen] = useState(false);
	const [tokenName, setTokenName] = useState("");
	const [isCreating, setIsCreating] = useState(false);
	const [newToken, setNewToken] = useState<string | null>(null);
	const [copied, setCopied] = useState(false);
	const [revokeId, setRevokeId] = useState<string | null>(null);
	const [isRevoking, setIsRevoking] = useState(false);
	const [error, setError] = useState<string | null>(null);

	const activeTokens = tokens.filter((t) => !t.revokedAt);

	const handleCreate = async () => {
		if (!tokenName.trim()) return;

		setIsCreating(true);
		setError(null);

		try {
			const result = await createApiTokenAction({ name: tokenName.trim() });

			if (result.success && result.data?.token) {
				setNewToken(result.data.token);
				setTokenName("");
			} else {
				setError(result.error || "Erro ao criar token");
			}
		} catch {
			setError("Erro ao criar token");
		} finally {
			setIsCreating(false);
		}
	};

	const handleCopy = async () => {
		if (!newToken) return;

		try {
			await navigator.clipboard.writeText(newToken);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		} catch {
			// Fallback for browsers that don't support clipboard API
			const textArea = document.createElement("textarea");
			textArea.value = newToken;
			document.body.appendChild(textArea);
			textArea.select();
			document.execCommand("copy");
			document.body.removeChild(textArea);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		}
	};

	const handleRevoke = async () => {
		if (!revokeId) return;

		setIsRevoking(true);

		try {
			const result = await revokeApiTokenAction({ tokenId: revokeId });

			if (!result.success) {
				setError(result.error || "Erro ao revogar token");
			}
		} catch {
			setError("Erro ao revogar token");
		} finally {
			setIsRevoking(false);
			setRevokeId(null);
		}
	};

	const handleCloseCreate = () => {
		setIsCreateOpen(false);
		setNewToken(null);
		setTokenName("");
		setError(null);
	};

	return (
		<div className="space-y-4">
			<div className="flex items-center justify-between">
				<div>
					<h3 className="font-medium">Dispositivos conectados</h3>
					<p className="text-sm text-muted-foreground">
						Gerencie os dispositivos que podem enviar notificações para o
						OpenSheets.
					</p>
				</div>
				<Dialog
					open={isCreateOpen}
					onOpenChange={(open) => {
						if (!open) handleCloseCreate();
						else setIsCreateOpen(true);
					}}
				>
					<DialogTrigger asChild>
						<Button size="sm">
							<RiAddLine className="h-4 w-4 mr-1" />
							Novo Token
						</Button>
					</DialogTrigger>
					<DialogContent>
						{!newToken ? (
							<>
								<DialogHeader>
									<DialogTitle>Criar Token de API</DialogTitle>
									<DialogDescription>
										Crie um token para conectar o OpenSheets Companion no seu
										dispositivo Android.
									</DialogDescription>
								</DialogHeader>
								<div className="space-y-4 py-4">
									<div className="space-y-2">
										<Label htmlFor="tokenName">Nome do dispositivo</Label>
										<Input
											id="tokenName"
											placeholder="Ex: Meu Celular, Galaxy S24..."
											value={tokenName}
											onChange={(e) => setTokenName(e.target.value)}
											onKeyDown={(e) => {
												if (e.key === "Enter") handleCreate();
											}}
										/>
									</div>
									{error && (
										<div className="flex items-center gap-2 text-sm text-destructive">
											<RiAlertLine className="h-4 w-4" />
											{error}
										</div>
									)}
								</div>
								<DialogFooter>
									<Button variant="outline" onClick={handleCloseCreate}>
										Cancelar
									</Button>
									<Button
										onClick={handleCreate}
										disabled={isCreating || !tokenName.trim()}
									>
										{isCreating ? "Criando..." : "Criar Token"}
									</Button>
								</DialogFooter>
							</>
						) : (
							<>
								<DialogHeader>
									<DialogTitle>Token Criado</DialogTitle>
									<DialogDescription>
										Copie o token abaixo e cole no app OpenSheets Companion.
										Este token
										<strong> não será exibido novamente</strong>.
									</DialogDescription>
								</DialogHeader>
								<div className="space-y-4 py-4">
									<div className="space-y-2">
										<Label>Seu token de API</Label>
										<div className="relative">
											<Input
												value={newToken}
												readOnly
												className="pr-10 font-mono text-sm"
											/>
											<Button
												type="button"
												variant="ghost"
												size="icon"
												className="absolute right-0 top-0 h-full px-3"
												onClick={handleCopy}
											>
												{copied ? (
													<RiCheckLine className="h-4 w-4 text-green-500" />
												) : (
													<RiFileCopyLine className="h-4 w-4" />
												)}
											</Button>
										</div>
									</div>
									<div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-sm text-amber-800 dark:text-amber-200">
										<p className="font-medium">Importante:</p>
										<ul className="list-disc list-inside mt-1 space-y-1">
											<li>Guarde este token em local seguro</li>
											<li>Ele não será exibido novamente</li>
											<li>Use-o para configurar o app Android</li>
										</ul>
									</div>
								</div>
								<DialogFooter>
									<Button onClick={handleCloseCreate}>Fechar</Button>
								</DialogFooter>
							</>
						)}
					</DialogContent>
				</Dialog>
			</div>

			{activeTokens.length === 0 ? (
				<Card>
					<CardContent className="flex flex-col items-center justify-center py-8 text-center">
						<RiSmartphoneLine className="h-10 w-10 text-muted-foreground mb-3" />
						<p className="text-sm text-muted-foreground">
							Nenhum dispositivo conectado.
						</p>
						<p className="text-sm text-muted-foreground">
							Crie um token para conectar o app OpenSheets Companion.
						</p>
					</CardContent>
				</Card>
			) : (
				<div className="space-y-3">
					{activeTokens.map((token) => (
						<Card key={token.id}>
							<CardContent className="p-4">
								<div className="flex items-start justify-between">
									<div className="flex items-start gap-3">
										<div className="rounded-full bg-muted p-2">
											<RiSmartphoneLine className="h-5 w-5" />
										</div>
										<div>
											<div className="flex items-center gap-2">
												<span className="font-medium">{token.name}</span>
												<Badge variant="outline" className="text-xs">
													{token.tokenPrefix}...
												</Badge>
											</div>
											<div className="text-sm text-muted-foreground mt-1">
												{token.lastUsedAt ? (
													<span>
														Usado{" "}
														{formatDistanceToNow(token.lastUsedAt, {
															addSuffix: true,
															locale: ptBR,
														})}
														{token.lastUsedIp && (
															<span className="text-xs ml-1">
																({token.lastUsedIp})
															</span>
														)}
													</span>
												) : (
													<span>Nunca usado</span>
												)}
											</div>
											<div className="text-xs text-muted-foreground mt-0.5">
												Criado em{" "}
												{new Date(token.createdAt).toLocaleDateString("pt-BR")}
											</div>
										</div>
									</div>
									<Button
										variant="ghost"
										size="icon"
										className="text-destructive hover:text-destructive hover:bg-destructive/10"
										onClick={() => setRevokeId(token.id)}
									>
										<RiDeleteBinLine className="h-4 w-4" />
									</Button>
								</div>
							</CardContent>
						</Card>
					))}
				</div>
			)}

			{/* Revoke Confirmation Dialog */}
			<AlertDialog
				open={!!revokeId}
				onOpenChange={(open) => !open && setRevokeId(null)}
			>
				<AlertDialogContent>
					<AlertDialogHeader>
						<AlertDialogTitle>Revogar token?</AlertDialogTitle>
						<AlertDialogDescription>
							O dispositivo associado a este token será desconectado e não
							poderá mais enviar notificações. Esta ação não pode ser desfeita.
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel disabled={isRevoking}>
							Cancelar
						</AlertDialogCancel>
						<AlertDialogAction
							onClick={handleRevoke}
							disabled={isRevoking}
							className="bg-destructive text-white hover:bg-destructive/90"
						>
							{isRevoking ? "Revogando..." : "Revogar"}
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
		</div>
	);
}
