'use client';

import { useState } from 'react';
import Image from 'next/image';

interface ProfileSettingsFormProps {
  initialData?: {
    fullName: string;
    career: string;
    email: string;
    phone: string;
    location: string;
  };
  onSave?: (data: {
    fullName: string;
    career: string;
    email: string;
    phone: string;
    location: string;
  }) => void;
  descriptionText?: string;
}

export function ProfileSettingsForm({
  initialData = {
    fullName: 'Brain Neeland',
    career: 'Real Estate Agent',
    email: 'Brain.Neeland1234@gmail.com',
    phone: '+917483849544',
    location: 'New York',
  },
  onSave,
  descriptionText = 'This information will be displayed on your public profile page.',
}: ProfileSettingsFormProps) {
  const [formData, setFormData] = useState(initialData);

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSave = () => {
    if (onSave) {
      onSave(formData);
    } else {
      console.log('Saving profile settings:', formData);
    }
  };

  const handleCancel = () => {
    setFormData(initialData);
  };

  return (
    <div className="border border-[#00293d]/20 rounded-[15px] bg-white p-8">
      {/* Header */}
      <div className="mb-6">
        <h1 className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] mb-2">
          Public Profile
        </h1>
        <p className="font-serif text-[13px] leading-[17px] text-[#00293D]/60">
          {descriptionText}
        </p>
      </div>

      {/* Profile Photo Section */}
      <div className="mb-8">
        <div className="flex items-start gap-4">
          <div className="w-[60px] h-[60px] rounded-full overflow-hidden border border-[#00293D]/20 flex-shrink-0">
            <Image
              src="/assets/icons/user-placeholder-icon.svg"
              alt="Profile"
              width={60}
              height={60}
              className="w-full h-full object-cover"
            />
          </div>
          <div>
            <p className="font-serif font-medium text-[14px] text-[#00293D] mb-2">
              Public Picture
            </p>
            <div className="flex items-center gap-2 mb-2">
              <button className="px-4 py-1.5 bg-[#e58625] text-white rounded-[20px] font-serif text-[12px] hover:bg-[#d47920] transition-colors">
                Upload Now
              </button>
              <button className="px-4 py-1.5 border border-[#00293D]/30 text-[#00293D] rounded-[20px] font-serif text-[12px] hover:bg-[#00293d]/5 transition-colors">
                Delete
              </button>
            </div>
            <p className="font-serif text-[11px] text-[#00293D]/50">
              Supported formats: JPEG, PNG, GIF Max file size: 2MB
            </p>
          </div>
        </div>
      </div>

      {/* Form Fields */}
      <div className="space-y-5">
        {/* Row 1: Full Name & Career */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
              Full Name
            </label>
            <input
              type="text"
              value={formData.fullName}
              onChange={(e) => handleChange('fullName', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
              Career
            </label>
            <input
              type="text"
              value={formData.career}
              onChange={(e) => handleChange('career', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
        </div>

        {/* Row 2: Email & Phone */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
              Email Address
            </label>
            <input
              type="email"
              value={formData.email}
              onChange={(e) => handleChange('email', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
              Phone Number
            </label>
            <input
              type="tel"
              value={formData.phone}
              onChange={(e) => handleChange('phone', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
        </div>

        {/* Row 3: Location */}
        <div>
          <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
            Location
          </label>
          <div className="relative">
            <div className="absolute left-4 top-1/2 -translate-y-1/2">
              <Image
                src="/assets/icons/location-icon.svg"
                alt="Location"
                width={16}
                height={16}
              />
            </div>
            <input
              type="text"
              value={formData.location}
              onChange={(e) => handleChange('location', e.target.value)}
              className="w-full sm:w-1/2 h-[44px] pl-10 pr-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="mt-8 flex justify-end gap-3">
        <button
          onClick={handleCancel}
          className="px-8 py-3 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#00293d]/5 transition-colors"
        >
          Cancel
        </button>
        <button
          onClick={handleSave}
          className="px-8 py-3 bg-[#e58625] text-white rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#d47920] transition-colors"
        >
          Save Changes
        </button>
      </div>
    </div>
  );
}