import { useState } from 'react';
import { useAuthStore } from '@/stores/auth';
import { useTranslation } from '@/hooks/useTranslation';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { User, Mail, Calendar, Settings, Camera } from 'lucide-react';
import { UserProfile } from '@/features/auth/components/UserProfile';
import { ProfileEditForm } from '@/features/profile/components/ProfileEditForm';
import { AvatarUpload } from '@/features/profile/components/AvatarUpload';

function ProfilePage() {
  const { user, refreshUser } = useAuthStore();
  const { t } = useTranslation();
  const [isEditing, setIsEditing] = useState(false);
  const [avatarUrl, setAvatarUrl] = useState<string | null>(user?.avatar_url || null);

  const handleSuccess = async () => {
    await refreshUser();
    setIsEditing(false);
  };

  const handleCancel = () => {
    setIsEditing(false);
  };

  const handleAvatarUpdated = async (newAvatarUrl: string) => {
    setAvatarUrl(newAvatarUrl);
    await refreshUser();
  };

  return (
    <div className='space-y-6'>
      {/* En-tête */}
      <div>
        <h1 className='text-3xl font-bold tracking-tight'>
          {t('profile.title')}
        </h1>
        <p className='text-muted-foreground'>{t('profile.subtitle')}</p>
      </div>

      <div className='grid gap-6 md:grid-cols-3'>
        {/* Informations de base */}
        <div className='md:col-span-2'>
          <Card>
            <CardHeader>
              <div className='flex items-center justify-between'>
                <div>
                  <CardTitle>{t('profile.personalInfo')}</CardTitle>
                  <CardDescription>
                    {t('profile.updateProfile')}
                  </CardDescription>
                </div>
                {!isEditing && (
                  <Button onClick={() => setIsEditing(true)}>
                    <Settings className='mr-2 h-4 w-4' />
                    {t('profile.edit')}
                  </Button>
                )}
              </div>
            </CardHeader>
            <CardContent className='space-y-4'>
              {isEditing ? (
                <ProfileEditForm
                  initialData={{
                    first_name: user?.first_name || '',
                    last_name: user?.last_name || '',
                    username: user?.username || '',
                    bio: user?.bio || '',
                    location: '',
                    birthdate: '',
                    gender: undefined,
                  }}
                  onSuccess={handleSuccess}
                  onCancel={handleCancel}
                />
              ) : (
                <>
                  <div className='grid grid-cols-2 gap-4'>
                    <div className='space-y-2'>
                      <p className='text-sm font-medium'>
                        {t('profile.fields.firstName')}
                      </p>
                      <p className='text-sm text-muted-foreground'>
                        {user?.first_name || '-'}
                      </p>
                    </div>
                    <div className='space-y-2'>
                      <p className='text-sm font-medium'>
                        {t('profile.fields.lastName')}
                      </p>
                      <p className='text-sm text-muted-foreground'>
                        {user?.last_name || '-'}
                      </p>
                    </div>
                  </div>

                  <div className='space-y-2'>
                    <p className='text-sm font-medium'>
                      {t('profile.fields.username')}
                    </p>
                    <p className='text-sm text-muted-foreground'>
                      {user?.username || '-'}
                    </p>
                  </div>

                  <div className='space-y-2'>
                    <p className='text-sm font-medium'>
                      {t('profile.fields.email')}
                    </p>
                    <p className='text-sm text-muted-foreground'>
                      {user?.email || '-'}
                    </p>
                  </div>

                  <div className='space-y-2'>
                    <p className='text-sm font-medium'>
                      {t('profile.fields.bio')}
                    </p>
                    <p className='text-sm text-muted-foreground'>
                      {user?.bio || '-'}
                    </p>
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Avatar et informations */}
        <div className='space-y-6'>
          <Card>
            <CardHeader>
              <CardTitle>{t('profile.avatar.title')}</CardTitle>
            </CardHeader>
            <CardContent className='text-center'>
              {user?.id && (
                <AvatarUpload
                  userId={user.id}
                  currentAvatarUrl={avatarUrl || undefined}
                  onAvatarUpdated={handleAvatarUpdated}
                />
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>{t('profile.accountInfo')}</CardTitle>
            </CardHeader>
            <CardContent className='space-y-4'>
              <div className='flex items-center space-x-2'>
                <User className='h-4 w-4 text-muted-foreground' />
                <div>
                  <p className='text-sm font-medium'>
                    {t('profile.memberSince')}
                  </p>
                  <p className='text-sm text-muted-foreground'>
                    {user?.created_at
                      ? new Date(user.created_at).toLocaleDateString()
                      : 'N/A'}
                  </p>
                </div>
              </div>
              <div className='flex items-center space-x-2'>
                <Mail className='h-4 w-4 text-muted-foreground' />
                <div>
                  <p className='text-sm font-medium'>
                    {t('profile.emailVerified')}
                  </p>
                  <p className='text-sm text-muted-foreground'>
                    {user?.is_verified ? t('common.yes') : t('common.no')}
                  </p>
                </div>
              </div>
              <div className='flex items-center space-x-2'>
                <Calendar className='h-4 w-4 text-muted-foreground' />
                <div>
                  <p className='text-sm font-medium'>
                    {t('profile.lastLogin')}
                  </p>
                  <p className='text-sm text-muted-foreground'>
                    {user?.last_login_at
                      ? new Date(user.last_login_at).toLocaleDateString()
                      : t('common.never')}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* T0210: Session Management Card */}
          <Card>
            <CardHeader>
              <CardTitle>{t('profile.security.title') || 'Security'}</CardTitle>
            </CardHeader>
            <CardContent>
              <UserProfile />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
export default ProfilePage;
