import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { AuthContext } from "../../contexts/AuthContext";
import { Button, Card, DataField, Badge } from "../../components";
export const AuthDocsContent = () => {
    const { login, isAuthenticated, isLoading, user, logout } = useContext(AuthContext);
    const handleLogin = async () => {
        await login("usuario@ejemplo.com", "password123");
    };
    const handleLogout = () => {
        logout();
    };
    // Sección de documentación de interfaces (siempre visible)
    const InterfacesDocumentation = () => (_jsx("div", { className: "space-y-4 mb-6", children: _jsx(Card, { title: "Interfaces de TypeScript", subtitle: "Estructuras de datos utilizadas por el AuthContext", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthTokenInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del token de autenticaci\u00F3n devueltos por el servicio de autenticaci\u00F3n." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "accessToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de acceso utilizado para autenticar las solicitudes HTTP." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "tokenType", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Tipo de token (generalmente \"Bearer\")." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "expires", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Fecha de expiraci\u00F3n del token en formato ISO 8601." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "refreshToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de actualizaci\u00F3n utilizado para obtener un nuevo token de acceso cuando el actual expira." })] })] }) })] }), _jsxs("div", { className: "pt-4 border-t border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthContextUserInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del usuario autenticado que se almacenan en el contexto." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "id", value: _jsx("span", { className: "text-xs font-mono", children: "number | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Identificador \u00FAnico del usuario." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "name", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Nombre del usuario." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "aditionalData", value: _jsx("span", { className: "text-xs font-mono", children: "any | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Objeto que puede contener datos adicionales del usuario (roles, permisos, email, etc.). Es flexible y puede adaptarse a las necesidades espec\u00EDficas de cada aplicaci\u00F3n." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "token", value: _jsx("span", { className: "text-xs font-mono", children: "AuthTokenInterface | undefined" }) }), _jsxs("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: ["Objeto de token que contiene el", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthTokenInterface" }), " ", "con la informaci\u00F3n de autenticaci\u00F3n."] })] })] }) })] })] }) }) }));
    if (isLoading) {
        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fal fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
    }
    if (isAuthenticated && user) {
        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
    }
    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fal fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
};
