import { FC, ReactElement, useState, useEffect } from 'react';
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
import { useForm, Controller } from 'react-hook-form';
import {
  userEditProfileSchema,
  TUserEditProfileForm,
  useUpdateUserMe,
  useUploadAvatar,
  useAuthStore,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';
import { CitySelect } from '../../../components/city-select';
import { Icon } from '@iconify/react';

const ROLE_OPTIONS = [
  'Frontend Developer',
  'Backend Developer',
  'Full Stack Developer',
  'DevOps Engineer',
  'UI/UX Designer',
  'Product Manager',
  'Data Scientist',
  'Mobile Developer',
];

type ProfileModalProps = {
  open: boolean;
  onClose: () => void;
};

const ProfilePage: FC<ProfileModalProps> = ({
  open,
  onClose,
}): ReactElement | null => {
  const [avatarFile, setAvatarFile] = useState<File | null>(null);
  const [avatarPreview, setAvatarPreview] = useState<string>('');

  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
  const { mutateAsync: uploadAvatar, isPending: isUploading } =
    useUploadAvatar();
  const { session } = useAuthStore();

  const form = useForm<TUserEditProfileForm>({
    resolver: zodResolver(userEditProfileSchema),
    mode: 'all',
    defaultValues: {
      fullname: session?.user?.fullname || '',
      avatar: session?.user?.avatar || null,
      location: session?.user?.location || '',
      bio: session?.user?.bio || '',
      skills: session?.user?.skills || [],
    },
  });

  useEffect(() => {
    if (session?.user?.avatar && !avatarPreview) {
      setAvatarPreview(session.user.avatar);
    }
    if (session?.user?.fullname) {
      form.setValue('fullname', session.user.fullname);
    }
    if (session?.user?.location) {
      form.setValue('location', session.user.location);
    }
    if (session?.user?.bio) {
      form.setValue('bio', session.user.bio);
    }
    if (session?.user?.skills) {
      form.setValue('skills', session.user.skills);
    }
  }, [
    session?.user?.avatar,
    session?.user?.fullname,
    session?.user?.location,
    session?.user?.bio,
    session?.user?.skills,
    avatarPreview,
    form,
  ]);

  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.size > 2 * 1024 * 1024) {
        toast.error('The file is too large. Maximum size is 2MB.');
        e.target.value = '';
        return;
      }

      if (!file.type.startsWith('image/')) {
        toast.error('The file must be an image');
        e.target.value = '';
        return;
      }

      setAvatarFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setAvatarPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const onSubmit = form.handleSubmit(async (data) => {
    try {
      let avatarUrl = session?.user?.avatar || null;

      if (avatarFile) {
        const uploadResult = await uploadAvatar(avatarFile);
        avatarUrl = uploadResult.data.url;
      }

      await updateUser({
        fullname: data.fullname,
        avatar: avatarUrl,
        location: data.location,
        bio: data.bio,
        skills: data.skills,
      });

      toast.success('Profile updated successfully!');

      await new Promise((resolve) => setTimeout(resolve, 100));

      onClose();
    } catch (error) {
      console.error('Profile update failed:', error);
      toast.error(
        `Failed to update profile: ${
          error instanceof Error ? error.message : 'Unknown error'
        }`
      );
    }
  });

  const isLoading = isUpdating || isUploading;

  return open ? (
    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
      <div className="min-h-full flex items-center justify-center">
        <div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
          <div className="mb-6">
            <div className="flex items-center justify-between mb-2">
              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                Edit Profile
              </h1>
              <button
                type="button"
                onClick={onClose}
                className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
                aria-label="Close profile modal"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <p className="text-gray-600 font-sans dark:text-neutral-400">Update your photo and name</p>
          </div>

          <form onSubmit={onSubmit} className="space-y-6">
            <div className="flex flex-col items-center space-y-4">
              <div className="relative group">
                {avatarPreview ? (
                  <img src={avatarPreview} alt="Avatar preview" className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors" />
                ) : (
                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
                    <Icon icon="ic:baseline-person" width="48" height="48" className="text-gray-400 dark:text-neutral-500" />
                  </div>
                )}
                <label htmlFor="avatar" className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  <input id="avatar" type="file" accept="image/*" className="hidden" onChange={handleAvatarChange} disabled={isLoading} />
                </label>
              </div>
              <p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
                Click the camera icon to change your photo<br />Format: JPG, PNG. Max 2MB
              </p>
            </div>

            <ControlledInputField control={form.control} label="Full Name" placeholder="Enter your full name" name="fullname" size="lg" />

            <div className="space-y-2">
              <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">City</label>
              <Controller control={form.control} name="location" render={({ field, fieldState }) => (
                <CitySelect value={field.value ?? ''} onChange={field.onChange} error={fieldState.error?.message} placeholder="Search your city..." />
              )} />
            </div>

            <div className="space-y-2">
              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">Role / Skills</label>
              <Controller control={form.control} name="skills" render={({ field }) => (
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    {ROLE_OPTIONS.map((role) => (
                      <label key={role} className="flex items-center space-x-2 cursor-pointer font-sans">
                        <input type="checkbox" checked={field.value?.includes(role)} onChange={(e) => { const newValue = e.target.checked ? [...(field.value || []), role] : (field.value || []).filter((v) => v !== role); field.onChange(newValue); }} className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800" />
                        <span className="text-sm dark:text-neutral-300">{role}</span>
                      </label>
                    ))}
                  </div>
                </div>
              )} />
            </div>

            <div className="space-y-2">
              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">Bio <span className="text-gray-400 dark:text-neutral-500">(Optional)</span></label>
              <Controller control={form.control} name="bio" render={({ field, fieldState }) => (
                <div>
                  <Textarea {...field} placeholder="Tell us about yourself..." rows={4} className="w-full font-sans" size="lg" />
                  {fieldState.error && <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>}
                </div>
              )} />
            </div>

            <div className="flex space-x-3 pt-4">
              <Button type="button" variant="secondary" className="flex-1" onClick={onClose} disabled={isLoading}>Cancel</Button>
              <Button type="submit" className="flex-1" disabled={isLoading || !form.formState.isValid}>
                {isLoading ? (
                  <span className="flex items-center justify-center">
                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                    Saving...
                  </span>
                ) : 'Save'}
              </Button>
            </div>
          </form>
        </div>
      </div>
    </div>
  ) : null;
};

export default ProfilePage;