import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowLeft, Lock, Key } from 'lucide-react';
import { ApiTokenManager } from '@/components/settings/ApiTokenManager';

export function SecuritySettings() {
    const navigate = useNavigate();

    return (
        <div className="max-w-7xl mx-auto space-y-6 pb-8">
            {/* Header */}
            <div className="flex items-center gap-4 mb-6">
                <Button variant="ghost" size="icon" onClick={() => navigate('/settings')}>
                    <ArrowLeft className="w-5 h-5" />
                </Button>
                <div>
                    <h1 className="text-2xl font-bold text-gray-900">Security Settings</h1>
                    <p className="text-gray-500">Manage your account security and access tokens</p>
                </div>
            </div>

            <div className="grid grid-cols-1 gap-6">
                {/* Password Section */}
                <Card className="shadow-md">
                    <CardHeader>
                        <div className="flex items-center gap-3">
                            <div className="p-2 bg-blue-100 rounded-md">
                                <Lock className="w-5 h-5 text-blue-600" />
                            </div>
                            <div>
                                <CardTitle>Password</CardTitle>
                                <CardDescription>Manage your sign-in password</CardDescription>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent>
                        <div className="p-4 bg-gray-50 rounded-md border border-gray-200">
                            <p className="text-sm text-gray-600">
                                Your password is managed through your organization's Single Sign-On (SSO) provider.
                                Please contact your IT administrator to reset or change your password.
                            </p>
                        </div>
                    </CardContent>
                </Card>

                {/* API Tokens Section */}
                <Card className="shadow-md">
                    <CardHeader>
                        <div className="flex items-center gap-3">
                            <div className="p-2 bg-purple-100 rounded-md">
                                <Key className="w-5 h-5 text-purple-600" />
                            </div>
                            <div>
                                <CardTitle>API Tokens</CardTitle>
                                <CardDescription>Manage personal access tokens for external integrations</CardDescription>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent>
                        <ApiTokenManager />
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}
