'use client'

import { useAuth } from '@/lib/hooks/useAuth'
import { Button } from '@/components/common/Button'
import { UserCircleIcon } from '@heroicons/react/24/solid'

export default function ProfilePage() {
    const { user, logout } = useAuth()

    if (!user) {
        return null
    }

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold text-gray-900 dark:text-white font-heading">
                    My Profile
                </h1>
                <p className="mt-2 text-gray-600 dark:text-gray-400">
                    Manage your account settings and preferences.
                </p>
            </div>

            <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                        User Information
                    </h3>
                </div>
                <div className="px-4 py-5 sm:p-6">
                    <div className="flex items-center mb-6">
                        <div className="h-20 w-20 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
                            <UserCircleIcon className="h-16 w-16" />
                        </div>
                        <div className="ml-6">
                            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                                {user.display_name || 'Community Member'}
                            </h2>
                            <p className="text-gray-500 dark:text-gray-400">{user.email}</p>
                            {user.is_verified && (
                                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mt-2">
                                    Verified Member
                                </span>
                            )}
                        </div>
                    </div>

                    <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
                        <dl className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                            <div className="sm:col-span-1">
                                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    User ID
                                </dt>
                                <dd className="mt-1 text-sm text-gray-900 dark:text-white font-mono">
                                    {user.id}
                                </dd>
                            </div>
                            {/* Add more fields here as needed */}
                        </dl>
                    </div>
                </div>
                <div className="bg-gray-50 dark:bg-gray-900 px-4 py-4 sm:px-6 flex justify-end">
                    <Button
                        variant="secondary"
                        onClick={() => logout()}
                        className="text-red-600 hover:text-red-700 border-red-200 hover:border-red-300 hover:bg-red-50"
                    >
                        Sign Out
                    </Button>
                </div>
            </div>
        </div>
    )
}