// app/account/profile/ProfileForm.tsx
'use client';

import { useState } from 'react';

interface Customer {
  id: string;
  email: string;
  first_name?: string;
  last_name?: string;
  phone?: string;
}

interface ProfileFormProps {
  customer: Customer;
  onCancel: () => void;
}

export default function ProfileForm({ customer, onCancel }: ProfileFormProps) {
  const [firstName, setFirstName] = useState(customer.first_name || '');
  const [lastName, setLastName] = useState(customer.last_name || '');
  const [phone, setPhone] = useState(customer.phone || '');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_STORE_URL}/store/customers/me`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          first_name: firstName,
          last_name: lastName,
          phone: phone,
        }),
      });

      if (!res.ok) {
        // handle error
        const errorData = await res.json();
        setError(errorData?.message || 'Failed to update profile');
      } else {
        // success - you might want to refresh the page or re-fetch data
        // For simplicity, let's just call onCancel to go back
        onCancel();
      }
    } catch (err: any) {
      console.error(err);
      setError('An error occurred while updating.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className='flex flex-col max-w-sm'>
      {error && <p className='text-red-500 mb-2'>{error}</p>}

      <label className='mb-2'>
        First Name:
        <input
          type='text'
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
          className='block w-full border border-gray-300 p-2 mt-1'
        />
      </label>

      <label className='mb-2'>
        Last Name:
        <input
          type='text'
          value={lastName}
          onChange={(e) => setLastName(e.target.value)}
          className='block w-full border border-gray-300 p-2 mt-1'
        />
      </label>

      <label className='mb-2'>
        Phone:
        <input
          type='text'
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          className='block w-full border border-gray-300 p-2 mt-1'
        />
      </label>

      <div className='flex gap-2 mt-4'>
        <button type='submit' disabled={loading} className='px-4 py-2 bg-green-500 text-white rounded'>
          {loading ? 'Saving...' : 'Save Changes'}
        </button>
        <button type='button' onClick={onCancel} disabled={loading} className='px-4 py-2 bg-gray-300 rounded'>
          Cancel
        </button>
      </div>
    </form>
  );
}