'use client';
import { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { apiRequest } from '@/shared/request/apiRequest';
import { links } from '@/shared/request/links';
import type { UserProfile } from '../types';

interface ProfileFormState {
  first_name: string;
  last_name: string;
  phone: string;
  password: string;
}

export const useProfile = () => {
  const queryClient = useQueryClient();
  const [saved, setSaved] = useState(false);
  const [form, setForm] = useState<ProfileFormState>({
    first_name: '',
    last_name: '',
    phone: '',
    password: '',
  });

  const { data: profile, isLoading } = useQuery({
    queryKey: ['profile'],
    queryFn: () => apiRequest<UserProfile>('GET', links.users),
    select: (res) => res.data,
  });

  useEffect(() => {
    if (profile) {
      setForm({
        first_name: profile.first_name,
        last_name: profile.last_name,
        phone: profile.phone,
        password: '',
      });
    }
  }, [profile]);

  const { mutate, isPending: isSaving } = useMutation({
    mutationFn: (payload: Record<string, string>) =>
      apiRequest<UserProfile>('PATCH', links.users, payload),
    onSuccess: () => {
      setSaved(true);
      queryClient.invalidateQueries({ queryKey: ['profile'] });
      setTimeout(() => setSaved(false), 3000);
    },
  });

  const handleChange = (field: keyof ProfileFormState, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
    setSaved(false);
  };

  const handleSave = () => {
    const payload: Record<string, string> = {
      first_name: form.first_name,
      last_name: form.last_name,
    };
    if (form.phone) payload.phone = form.phone;
    if (form.password) payload.password = form.password;
    mutate(payload);
  };

  return {
    form,
    profile,
    isLoading,
    isSaving,
    saved,
    handleChange,
    handleSave,
  };
};