'use client';

import { useState, useRef } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import {
  QuickLinks,
  FormSection,
  FormInput,
  FormCheckbox,
  FormTextarea,
  FormSelect,
  FileUpload,
  AttachedFile,
  TagInput,
} from './components';

// Initial form data - in production this would come from API
const initialFormData = {
  firstName: 'Brian',
  lastName: 'Neeland',
  email: 'brian@requestnetwork.com',
  phone: '+9195003837493',
  professionalTypes: {
    firstTime: true,
    solo: false,
    team: false,
  },
  attachedDocuments: ['Brian_Photo_1_Blue_Coat.pdf'],
  state: 'Colorado',
  licensedAreas: ['Colorado Springs', 'Monument'],
  expertiseYears: [
    { area: 'Colorado', years: '10 yrs' },
    { area: 'Falcon', years: '10 yrs' },
  ],
  biography: "Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client's goals.",
  testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
  expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'Condo', 'Rural'],
  yearsInBusiness: {
    totalYears: '10 Years',
    totalTransactions: '100+',
  },
  contractsClosed: {
    lessThan10: false,
    between10And25: false,
    between26And50: true,
    between51And75: false,
    moreThan75: false,
  },
  pricePoint: {
    under100k: false,
    between100kAnd200k: false,
    between200kAnd400k: true,
    between400kAnd600k: true,
    between600kAnd800k: false,
    between800kAnd1m: false,
    above1m: false,
  },
  specialization: {
    clientLocalization: {
      local: true,
      national: false,
      international: false,
    },
    clientTypeWorkedWith: {
      firstTimeBuyer: true,
      firstTimeSeller: false,
    },
    propertyType: {
      sfr: true,
      condo: false,
      luxury: false,
      townhome: false,
      commercial: false,
    },
    transactionType: {
      relocation: true,
      probate: false,
      taxLien: false,
      traditional: false,
      newConstruction: false,
    },
    loanType: {
      conventional: true,
      fha: false,
      va: false,
      usda: false,
      reverse: false,
    },
    lifestyleSpecialties: {
      boating: true,
      horses: false,
      rv: false,
      automotive: false,
      aviation: false,
    },
  },
  hobbies: ['Boating', 'Horses'],
  certifications: [
    { name: 'Certified Residential Specialist (CRS)', org: 'Residential Real Estate Council' },
  ],
  availability: {
    type: 'Full Time Weekend',
    workFrom: 'Work from Method',
  },
};

export default function EditProfilePage() {
  const router = useRouter();
  const [formData, setFormData] = useState(initialFormData);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [stateInput, setStateInput] = useState('');

  const handleCancel = () => {
    router.push('/agent/dashboard');
  };

  const handleSave = () => {
    // In production, this would save to API
    console.log('Saving form data:', formData);
    router.push('/agent/dashboard');
  };

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

  const handleAddLicensedArea = (value: string) => {
    const trimmedValue = value.trim();
    if (trimmedValue && !formData.licensedAreas.includes(trimmedValue)) {
      updateField('licensedAreas', [...formData.licensedAreas, trimmedValue]);
    }
    setStateInput('');
  };

  const handleStateInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault();
      handleAddLicensedArea(stateInput);
    }
  };

  return (
    <div className="flex gap-6 h-[calc(100vh-180px)]">
      {/* Left Sidebar - Quick Links */}
      <div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin">
        <QuickLinks scrollContainerRef={scrollContainerRef} />
      </div>

      {/* Main Content - Scrollable */}
      <div ref={scrollContainerRef} className="flex-1 space-y-6 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
        {/* Basic Information */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="basic-info" icon="/assets/icons/basic-information-icon.svg" title="Basic Information">
            <div className="flex flex-col md:flex-row gap-4">
              <FormInput
                label="First Name"
                value={formData.firstName}
                onChange={(value) => updateField('firstName', value)}
                placeholder="Enter first name"
              />
              <FormInput
                label="Last Name"
                value={formData.lastName}
                onChange={(value) => updateField('lastName', value)}
                placeholder="Enter last name"
              />
            </div>
          </FormSection>
        </div>

        {/* Contact Information */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="contact-info" icon="/assets/icons/contact-icon.svg" title="Contact Information">
            <div className="flex flex-col md:flex-row gap-4">
              <FormInput
                label="Email Address"
                value={formData.email}
                onChange={(value) => updateField('email', value)}
                placeholder="Enter email"
                type="email"
              />
              <FormInput
                label="Phone Number"
                value={formData.phone}
                onChange={(value) => updateField('phone', value)}
                placeholder="Enter phone"
                type="tel"
              />
            </div>
          </FormSection>
        </div>

        {/* Professional Types */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="professional-types" icon="/assets/icons/professional-icon.svg" title="Professional Types">
            <div className="flex flex-wrap gap-6">
              <FormCheckbox
                label="First Time"
                checked={formData.professionalTypes.firstTime}
                onChange={(checked) =>
                  updateField('professionalTypes', { ...formData.professionalTypes, firstTime: checked })
                }
              />
              <FormCheckbox
                label="Solo"
                checked={formData.professionalTypes.solo}
                onChange={(checked) =>
                  updateField('professionalTypes', { ...formData.professionalTypes, solo: checked })
                }
              />
              <FormCheckbox
                label="Team"
                checked={formData.professionalTypes.team}
                onChange={(checked) =>
                  updateField('professionalTypes', { ...formData.professionalTypes, team: checked })
                }
              />
            </div>
          </FormSection>
        </div>

        {/* Upload Documents */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="upload-documents" icon="/assets/icons/upload-icon.svg" title="Upload Documents">
            <FileUpload onFileSelect={(files) => console.log('Files selected:', files)} />

            {/* Attached Documents */}
            {formData.attachedDocuments.length > 0 && (
              <div className="mt-6">
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3 flex items-center gap-2">
                  <Image src="/assets/icons/attachment-icon.svg" alt="Attached" width={16} height={16} />
                  Attached Documents
                </h4>
                <div className="space-y-2">
                  {formData.attachedDocuments.map((doc, idx) => (
                    <AttachedFile
                      key={idx}
                      fileName={doc}
                      onRemove={() => {
                        const newDocs = [...formData.attachedDocuments];
                        newDocs.splice(idx, 1);
                        updateField('attachedDocuments', newDocs);
                      }}
                    />
                  ))}
                </div>
              </div>
            )}
          </FormSection>
        </div>

        {/* Licensing & Areas */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="licensing-areas" icon="/assets/icons/professional-icon.svg" title="Licensing & Areas">
            <div className="space-y-4">
              <div>
                <label className="block text-[14px] font-semibold text-[#00293D] font-serif mb-2">
                  What state(s) are you licensed in?
                </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={stateInput}
                    onChange={(e) => setStateInput(e.target.value)}
                    onKeyDown={handleStateInputKeyDown}
                    placeholder="Enter state"
                    className="w-full h-[40px] pl-10 pr-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
                  />
                </div>
                <p className="text-[12px] text-[#00293D]/60 font-serif mt-2">
                  Press Enter or comma to add a state.
                </p>
              </div>

              <div className="flex flex-wrap gap-2">
                {formData.licensedAreas.map((area) => (
                  <span
                    key={area}
                    className="inline-flex items-center gap-2 px-3 h-[32px] rounded-[15px] text-[14px] font-medium font-serif border border-[#00293d] text-[#00293d]"
                  >
                    {area}
                    <button
                      onClick={() => {
                        const newAreas = formData.licensedAreas.filter((a) => a !== area);
                        updateField('licensedAreas', newAreas);
                      }}
                      className="text-[#00293d] hover:text-[#E58625] transition-colors"
                    >
                      ×
                    </button>
                  </span>
                ))}
              </div>
            </div>
          </FormSection>
        </div>

        {/* Biography */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="biography" icon="/assets/icons/bio-icon.svg" title="Biography">
            <div className="space-y-4">
              <FormTextarea
                value={formData.biography}
                onChange={(value) => updateField('biography', value)}
                placeholder="Write your biography..."
                rows={5}
                maxLength={500}
              />
              <FormTextarea
                label="Write a few sentences that explain yourself and also a good memorable thought."
                value={formData.testimonialHighlight}
                onChange={(value) => updateField('testimonialHighlight', value)}
                placeholder="Write your memorable experience..."
                rows={3}
                maxLength={250}
              />
            </div>
          </FormSection>
        </div>

        {/* Expertise */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="expertise" icon="/assets/icons/professional-icon.svg" title="Expertise">
            <TagInput
              tags={formData.expertise}
              onChange={(tags) => updateField('expertise', tags)}
              placeholder="Add expertise..."
            />
          </FormSection>
        </div>

        {/* Years In Business */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="years-business" icon="/assets/icons/professional-icon.svg" title="Years In Business">
            <div className="flex flex-col md:flex-row gap-4">
              <FormInput
                label="Total Years"
                value={formData.yearsInBusiness.totalYears}
                onChange={(value) =>
                  updateField('yearsInBusiness', { ...formData.yearsInBusiness, totalYears: value })
                }
              />
              <FormInput
                label="Total Transactions"
                value={formData.yearsInBusiness.totalTransactions}
                onChange={(value) =>
                  updateField('yearsInBusiness', { ...formData.yearsInBusiness, totalTransactions: value })
                }
              />
            </div>
          </FormSection>
        </div>

        {/* Areas in expertise & Years */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection
            id="areas-expertise-years"
            icon="/assets/icons/basic-information-icon.svg"
            title="Areas in expertise & Years"
            showEdit
            onEdit={() => console.log('Edit areas')}
          >
            <div className="flex flex-col md:flex-row gap-4">
              <FormSelect
                label="Select State"
                value={formData.state}
                onChange={(value) => updateField('state', value)}
                options={[
                  { value: 'Colorado', label: 'Colorado' },
                  { value: 'Texas', label: 'Texas' },
                ]}
              />
              <FormSelect
                label="Select Years"
                value="10"
                onChange={() => {}}
                options={[
                  { value: '5', label: '5 Years' },
                  { value: '10', label: '10 Years' },
                  { value: '15', label: '15 Years' },
                ]}
              />
            </div>
          </FormSection>
        </div>

        {/* Contracts Closed */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="contracts-closed" icon="/assets/icons/professional-icon.svg" title="Contracts Closed">
            <div className="space-y-3">
              <FormCheckbox
                label="< 10"
                checked={formData.contractsClosed.lessThan10}
                onChange={(checked) =>
                  updateField('contractsClosed', { ...formData.contractsClosed, lessThan10: checked })
                }
              />
              <FormCheckbox
                label="10 to 25"
                checked={formData.contractsClosed.between10And25}
                onChange={(checked) =>
                  updateField('contractsClosed', { ...formData.contractsClosed, between10And25: checked })
                }
              />
              <FormCheckbox
                label="26 to 50"
                checked={formData.contractsClosed.between26And50}
                onChange={(checked) =>
                  updateField('contractsClosed', { ...formData.contractsClosed, between26And50: checked })
                }
              />
              <FormCheckbox
                label="51 to 75"
                checked={formData.contractsClosed.between51And75}
                onChange={(checked) =>
                  updateField('contractsClosed', { ...formData.contractsClosed, between51And75: checked })
                }
              />
              <FormCheckbox
                label="75+"
                checked={formData.contractsClosed.moreThan75}
                onChange={(checked) =>
                  updateField('contractsClosed', { ...formData.contractsClosed, moreThan75: checked })
                }
              />
            </div>
          </FormSection>
        </div>

        {/* Price Point */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="price-point" icon="/assets/icons/basic-information-icon.svg" title="Price Point">
            <div className="space-y-3">
              <FormCheckbox
                label="Under $100K"
                checked={formData.pricePoint.under100k}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, under100k: checked })
                }
              />
              <FormCheckbox
                label="$100K – $200K"
                checked={formData.pricePoint.between100kAnd200k}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, between100kAnd200k: checked })
                }
              />
              <FormCheckbox
                label="$200K – $400K"
                checked={formData.pricePoint.between200kAnd400k}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, between200kAnd400k: checked })
                }
              />
              <FormCheckbox
                label="$400K – $600K"
                checked={formData.pricePoint.between400kAnd600k}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, between400kAnd600k: checked })
                }
              />
              <FormCheckbox
                label="$600K – $800K"
                checked={formData.pricePoint.between600kAnd800k}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, between600kAnd800k: checked })
                }
              />
              <FormCheckbox
                label="$800K – $1M"
                checked={formData.pricePoint.between800kAnd1m}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, between800kAnd1m: checked })
                }
              />
              <FormCheckbox
                label="$1M and above"
                checked={formData.pricePoint.above1m}
                onChange={(checked) =>
                  updateField('pricePoint', { ...formData.pricePoint, above1m: checked })
                }
              />
            </div>
          </FormSection>
        </div>

        {/* Specialization */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="specialization" icon="/assets/icons/basic-information-icon.svg" title="Specialization">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Client Localization */}
              <div>
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Client Localization</h4>
                <div className="space-y-2">
                  <FormCheckbox label="Local" checked={formData.specialization.clientLocalization.local} onChange={() => {}} />
                  <FormCheckbox label="National" checked={formData.specialization.clientLocalization.national} onChange={() => {}} />
                  <FormCheckbox label="International" checked={formData.specialization.clientLocalization.international} onChange={() => {}} />
                </div>
              </div>

              {/* Client Type Worked With */}
              <div>
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Client Type Worked With</h4>
                <div className="space-y-2">
                  <FormCheckbox label="First Time Buyer" checked={formData.specialization.clientTypeWorkedWith.firstTimeBuyer} onChange={() => {}} />
                  <FormCheckbox label="First Time Seller" checked={formData.specialization.clientTypeWorkedWith.firstTimeSeller} onChange={() => {}} />
                </div>
              </div>

              {/* Property Type */}
              <div>
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Property Type</h4>
                <div className="space-y-2">
                  <FormCheckbox label="SFR" checked={formData.specialization.propertyType.sfr} onChange={() => {}} />
                  <FormCheckbox label="Condo" checked={formData.specialization.propertyType.condo} onChange={() => {}} />
                  <FormCheckbox label="Luxury" checked={formData.specialization.propertyType.luxury} onChange={() => {}} />
                  <FormCheckbox label="Townhome" checked={formData.specialization.propertyType.townhome} onChange={() => {}} />
                  <FormCheckbox label="Commercial" checked={formData.specialization.propertyType.commercial} onChange={() => {}} />
                </div>
              </div>

              {/* Transaction Type */}
              <div>
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Transaction Type</h4>
                <div className="space-y-2">
                  <FormCheckbox label="Relocation" checked={formData.specialization.transactionType.relocation} onChange={() => {}} />
                  <FormCheckbox label="Probate" checked={formData.specialization.transactionType.probate} onChange={() => {}} />
                  <FormCheckbox label="Tax Lien" checked={formData.specialization.transactionType.taxLien} onChange={() => {}} />
                  <FormCheckbox label="Traditional" checked={formData.specialization.transactionType.traditional} onChange={() => {}} />
                  <FormCheckbox label="New Construction" checked={formData.specialization.transactionType.newConstruction} onChange={() => {}} />
                </div>
              </div>

              {/* Loan Type */}
              <div>
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Loan Type</h4>
                <div className="space-y-2">
                  <FormCheckbox label="Conventional" checked={formData.specialization.loanType.conventional} onChange={() => {}} />
                  <FormCheckbox label="FHA" checked={formData.specialization.loanType.fha} onChange={() => {}} />
                  <FormCheckbox label="VA" checked={formData.specialization.loanType.va} onChange={() => {}} />
                  <FormCheckbox label="USDA" checked={formData.specialization.loanType.usda} onChange={() => {}} />
                  <FormCheckbox label="Reverse" checked={formData.specialization.loanType.reverse} onChange={() => {}} />
                </div>
              </div>

              {/* Lifestyle Specialties */}
              <div>
                <h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Lifestyle Specialties</h4>
                <div className="space-y-2">
                  <FormCheckbox label="Boating" checked={formData.specialization.lifestyleSpecialties.boating} onChange={() => {}} />
                  <FormCheckbox label="Horses" checked={formData.specialization.lifestyleSpecialties.horses} onChange={() => {}} />
                  <FormCheckbox label="RV" checked={formData.specialization.lifestyleSpecialties.rv} onChange={() => {}} />
                  <FormCheckbox label="Automotive" checked={formData.specialization.lifestyleSpecialties.automotive} onChange={() => {}} />
                  <FormCheckbox label="Aviation" checked={formData.specialization.lifestyleSpecialties.aviation} onChange={() => {}} />
                </div>
              </div>
            </div>
          </FormSection>
        </div>

        {/* Special Interests & Hobbies */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="hobbies" icon="/assets/icons/hobbies-icon.svg" title="Special Interests & Hobbies">
            <TagInput
              tags={formData.hobbies}
              onChange={(tags) => updateField('hobbies', tags)}
              placeholder="Add hobby..."
            />
          </FormSection>
        </div>

        {/* Certifications */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="certifications" icon="/assets/icons/certification-icon.svg" title="Professional Info">
            <p className="text-[12px] font-medium text-[#00293D]/70 font-serif mb-3">Certifications / Designations</p>
            <div className="space-y-2">
              {formData.certifications.map((cert, idx) => (
                <div key={idx} className="p-3 bg-gray-50 rounded-[10px]">
                  <p className="text-[14px] font-semibold text-[#00293D] font-serif">{cert.name}</p>
                  <p className="text-[12px] text-[#00293D]/70 font-serif">{cert.org}</p>
                </div>
              ))}
            </div>
          </FormSection>
        </div>

        {/* Availability */}
        <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
          <FormSection id="availability" icon="/assets/icons/availability-clock-icon.svg" title="Availability">
            <div className="flex flex-col md:flex-row gap-4">
              <FormSelect
                label="Availability"
                value={formData.availability.type}
                onChange={(value) =>
                  updateField('availability', { ...formData.availability, type: value })
                }
                options={[
                  { value: 'Full Time Weekend', label: 'Full Time Weekend' },
                  { value: 'Part Time', label: 'Part Time' },
                  { value: 'Weekdays Only', label: 'Weekdays Only' },
                ]}
              />
              <FormSelect
                label="Work From Method"
                value={formData.availability.workFrom}
                onChange={(value) =>
                  updateField('availability', { ...formData.availability, workFrom: value })
                }
                options={[
                  { value: 'Work from Method', label: 'Work from Method' },
                  { value: 'Remote', label: 'Remote' },
                  { value: 'In Office', label: 'In Office' },
                  { value: 'Hybrid', label: 'Hybrid' },
                ]}
              />
            </div>
          </FormSection>
        </div>

        {/* Action Buttons */}
        <div className="flex justify-end gap-4 pb-6">
          <button
            onClick={handleCancel}
            className="px-8 py-3 border border-[#00293D]/20 rounded-full text-[14px] font-semibold font-serif text-[#00293D] hover:bg-gray-50 transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            className="px-8 py-3 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
          >
            Save
          </button>
        </div>
      </div>
    </div>
  );
}