'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowLeft, Mail, Lock, LogOut, ExternalLink } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useTheme } from '@/lib/theme-context';
import { cn } from '@/lib/utils';

export default function SettingsPage() {
    const router = useRouter();
    const { theme } = useTheme();

    const handlePasswordReset = () => {
        // Log out and redirect to login page where they can use "Forgot Password"
        window.location.href = '/api/auth/logout?redirect=/login';
    };

    return (
        <div className="min-h-screen pb-24">
            {/* Header */}
            <div className={cn(
                "sticky top-0 z-40 backdrop-blur-xl border-b",
                theme === 'light'
                    ? "bg-white/80 border-slate-200"
                    : "bg-slate-950/80 border-white/10"
            )}>
                <div className="container mx-auto px-4 h-16 flex items-center gap-4">
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => router.back()}
                        className="rounded-full"
                    >
                        <ArrowLeft className="h-5 w-5" />
                    </Button>
                    <h1 className="text-xl font-bold">Account Settings</h1>
                </div>
            </div>

            <main className="container mx-auto px-4 py-8 max-w-2xl space-y-6">
                {/* Password Reset Card */}
                <Card className={cn(
                    "overflow-hidden",
                    theme === 'light'
                        ? "bg-white border-slate-200"
                        : "bg-slate-900/50 border-white/10"
                )}>
                    <CardHeader>
                        <CardTitle className="text-lg flex items-center gap-2">
                            <Lock className="h-5 w-5 text-amber-500" />
                            Change Password
                        </CardTitle>
                        <CardDescription>
                            Reset your password through our secure authentication provider.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <div className={cn(
                            "p-4 rounded-xl border",
                            theme === 'light'
                                ? "bg-slate-50 border-slate-200"
                                : "bg-white/5 border-white/10"
                        )}>
                            <p className="text-sm text-muted-foreground">
                                To change your password, you'll be logged out and redirected to the login page.
                                Use the <strong>"Forgot Password"</strong> option to receive a reset link via email.
                            </p>
                        </div>

                        <Button
                            onClick={handlePasswordReset}
                            variant="outline"
                            className="w-full h-12 text-base font-semibold rounded-xl"
                        >
                            <LogOut className="mr-2 h-4 w-4" />
                            Log Out to Reset Password
                        </Button>
                    </CardContent>
                </Card>

                {/* Email Info Card */}
                <Card className={cn(
                    "overflow-hidden",
                    theme === 'light'
                        ? "bg-white border-slate-200"
                        : "bg-slate-900/50 border-white/10"
                )}>
                    <CardHeader>
                        <CardTitle className="text-lg flex items-center gap-2">
                            <Mail className="h-5 w-5 text-blue-500" />
                            Email & Account
                        </CardTitle>
                        <CardDescription>
                            Your authentication is managed securely through WorkOS.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <p className={cn(
                            "text-sm",
                            theme === 'light' ? "text-slate-500" : "text-white/50"
                        )}>
                            To change your email address or manage connected accounts (Google, Apple, GitHub),
                            contact support or create a new account with your preferred email.
                        </p>
                    </CardContent>
                </Card>
            </main>
        </div>
    );
}
