/**
 * Example Usage of useProfile Hook
 *
 * This component demonstrates how to use the new useProfile hook
 * for managing user profile data with optimistic updates and
 * centralized state management.
 */

import React from 'react';
import { useProfile } from '@/hooks/auth';
import Button from '@/components/ui/button/Button';

export default function ProfileExample() {
  const {
    profile,
    isDirty,
    isUpdating,
    error,
    updateProfile,
    updateBasicInfo,
    updateAddress,
    updateAccount,
    saveChanges,
    resetChanges,
  } = useProfile();

  // Example: Update first name
  const handleFirstNameChange = (value: string) => {
    updateProfile({ firstname: value });
  };

  // Example: Update date of birth
  const handleDateOfBirthChange = (value: string) => {
    updateBasicInfo({ date_of_birth: value });
  };

  // Example: Update city
  const handleCityChange = (value: string) => {
    updateAddress({ city: value });
  };

  // Example: Update email
  const handleEmailChange = (value: string) => {
    updateAccount({ email: value });
  };

  if (!profile) {
    return <div>Loading profile...</div>;
  }

  return (
    <div className="p-6 space-y-6">
      <h2 className="text-xl font-semibold">Profile Management Demo</h2>

      {/* Display current state */}
      <div className="p-4 bg-gray-100 rounded-lg">
        <h3 className="font-medium mb-2">Current State</h3>
        <p>Has Changes: {isDirty ? 'Yes' : 'No'}</p>
        <p>Saving: {isUpdating ? 'Yes' : 'No'}</p>
        {error && <p className="text-red-600">Error: {error}</p>}
      </div>

      {/* Profile fields */}
      <div className="space-y-4">
        <div>
          <label htmlFor="firstname" className="block text-sm font-medium mb-1">
            First Name
          </label>
          <input
            id="firstname"
            type="text"
            value={profile.firstname || ''}
            onChange={(e) => handleFirstNameChange(e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>

        <div>
          <label htmlFor="dateOfBirth" className="block text-sm font-medium mb-1">
            Date of Birth
          </label>
          <input
            id="dateOfBirth"
            type="date"
            value={profile.profile?.basic_information?.date_of_birth || ''}
            onChange={(e) => handleDateOfBirthChange(e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>

        <div>
          <label htmlFor="city" className="block text-sm font-medium mb-1">
            City
          </label>
          <input
            id="city"
            type="text"
            value={profile.profile?.address?.city || ''}
            onChange={(e) => handleCityChange(e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>

        <div>
          <label htmlFor="email" className="block text-sm font-medium mb-1">
            Email
          </label>
          <input
            id="email"
            type="email"
            value={profile.email || ''}
            onChange={(e) => handleEmailChange(e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>
      </div>

      {/* Actions */}
      <div className="flex gap-3">
        <Button onClick={saveChanges} disabled={!isDirty || isUpdating}>
          {isUpdating ? 'Saving...' : 'Save Changes'}
        </Button>

        {isDirty && (
          <Button variant="outline" onClick={resetChanges} disabled={isUpdating}>
            Reset
          </Button>
        )}
      </div>

      {/* Raw data display for debugging */}
      <details className="mt-6">
        <summary className="cursor-pointer font-medium">Raw Profile Data</summary>
        <pre className="mt-2 p-4 bg-gray-100 rounded-md text-xs overflow-auto">
          {JSON.stringify(profile, null, 2)}
        </pre>
      </details>
    </div>
  );
}