frontend/src/app/(agent)/agent/dashboard/page.tsx

'use client';

import { useSession } from 'next-auth/react';
import Image from 'next/image';

// Import components from component folder
import {
  Tag,
  InfoCard,
  SpecializationCard,
  TestimonialCard,
  ExperienceSection,
} from './component';

// Mock agent data - in production, this would come from API
const agentData = {
  name: 'Brian Neeland',
  isVerified: true,
  title: 'Licensed Real Estate Agent',
  location: 'Colorado',
  memberSince: 'March 2020',
  bio: '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.',
  expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'],
  email: 'brian@gmail.com',
  phone: '+91*******7493',
  profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg',
  experience: {
    years: '10+ years',
    contracts: '10+ Contracts',
    licensingAreas: ['Colorado Springs', 'Monument', 'Falcon', 'Castle Rock', 'Fountain', 'Momentum'],
    expertiseYears: [
      { area: 'Colorado', years: '10 yrs' },
      { area: 'Falcon', years: '10 yrs' },
      { area: 'Colorado', years: '10 yrs' },
      { area: 'Colorado', years: '10 yrs' },
    ],
    certifications: [
      { name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
      { name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
    ],
  },
  availability: {
    type: 'Full-time',
    days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  },
  preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
  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.",
  specialization: {
    types: ['Buyers', 'Sellers', 'First time Buyers', 'First time Sellers', 'Divorce'],
    loanTypes: ['Conventional', 'FHA', 'VA', 'USDA'],
    propertyTypes: ['SFR', 'Town home', 'Rural', 'Luxury', 'Condo'],
    hobbies: ['Boating', 'Horses', 'RV', 'Automotive', 'Aviation'],
    pricePoints: ['Under $100K', '$100K – $300K', '$300K – $500K', '$500K – $1M', '$1M and above'],
  },
  testimonials: [
    {
      id: 1,
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      author: 'Conor Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
    {
      id: 2,
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      author: 'Conor Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
  ],
};

export default function AgentDashboard() {
  const { data: session } = useSession();
  const [firstName, lastName] = agentData.name.split(' ');

  return (
    <div className="space-y-6">
      {/* Mobile: Profile Image at Top */}
      <div className="lg:hidden flex flex-col items-center">
        {/* Profile Image */}
        <div className="relative w-[200px] mb-4">
          <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
            <Image
              src={agentData.profileImage}
              alt="Profile"
              width={200}
              height={200}
              className="w-full h-full object-cover"
            />
            {/* Gradient Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
          </div>
          {/* Edit Icon - Top Right Outside */}
          <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
            <Image
              src="/assets/icons/edit-icon.svg"
              alt="Edit profile"
              width={20}
              height={20}
            />
          </button>
        </div>

        {/* Available/Unavailable Buttons */}
        <div className="w-full max-w-[354px] space-y-2 mb-4">
          <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-4">
            <div className="flex items-center gap-2 flex-1">
              <span className="w-3 h-3 bg-green-500 rounded-full" />
              <span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
            </div>
            <button className="px-6 py-2 bg-[#e58625] text-white text-sm rounded-[15px] font-fractul">
              Connect
            </button>
          </div>
          <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[55px] px-4">
            <div className="flex items-center gap-2 flex-1">
              <span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
              <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
            </div>
            <button className="px-6 py-2 bg-[#00293d] text-white text-sm rounded-[15px] font-fractul">
              Connect
            </button>
          </div>
        </div>

        {/* Contact Info Card */}
        <div className="w-full max-w-[354px] border border-[#00293d]/10 rounded-[15px] p-4 mb-6">
          <div className="flex items-center gap-2 mb-2">
            <span className="font-bold text-[#00293d] text-sm">Email:</span>
            <span className="text-[#00293d] text-sm font-serif">********brian@gmail.com</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
            <span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
            <button className="p-1 hover:bg-gray-100 rounded ml-auto">
              <Image
                src="/assets/icons/edit-pencil-icon.svg"
                alt="Edit phone"
                width={16}
                height={16}
              />
            </button>
          </div>
        </div>

        {/* Name and Info - Centered for Mobile */}
        <div className="text-center mb-4">
          <div className="flex items-center justify-center gap-2 mb-1">
            <h1 className="text-[18px] text-[#00293d] font-serif">
              <span className="font-semibold">{firstName}</span>{' '}
              <span className="font-normal">{lastName}</span>
            </h1>
            {agentData.isVerified && (
              <>
                <Image
                  src="/assets/icons/verified-icon.svg"
                  alt="Verified"
                  width={15}
                  height={14}
                />
                <span className="text-[14px] text-[#638559] font-medium font-serif">
                  (Verified Expert)
                </span>
              </>
            )}
            <button className="p-1 hover:bg-gray-100 rounded transition-colors">
              <Image
                src="/assets/icons/edit-pencil-icon.svg"
                alt="Edit name"
                width={16}
                height={16}
              />
            </button>
          </div>
          <p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
          <div className="flex items-center justify-center gap-4 text-sm text-[#00293d] font-fractul">
            <span className="flex items-center gap-1 text-[#e58625] font-medium">
              <Image
                src="/assets/icons/location-icon.svg"
                alt="Location"
                width={16}
                height={16}
              />
              {agentData.location}
            </span>
            <span className="flex items-center gap-1">
              <Image
                src="/assets/icons/calendar-icon.svg"
                alt="Calendar"
                width={16}
                height={16}
              />
              Member Since {agentData.memberSince}
            </span>
          </div>
        </div>

        {/* Bio - Centered for Mobile */}
        <p className="text-[#00293d] text-sm leading-relaxed text-center max-w-[338px] mb-4 font-serif">
          {agentData.bio}
        </p>
      </div>

      {/* Desktop: Original Layout - Sidebar + Right Content (Profile + Experience) */}
      <div className="hidden lg:flex flex-row gap-6 items-stretch">
        {/* Left Sidebar - Status & Contact */}
        <div className="w-[280px] flex-shrink-0 space-y-4">
          {/* Profile Image */}
          <div className="relative w-[260px]">
            <div className="w-[260px] h-[260px] rounded-[15px] overflow-hidden">
              <Image
                src={agentData.profileImage}
                alt="Profile"
                width={260}
                height={260}
                className="w-full h-full object-cover"
              />
              {/* Gradient Overlay */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
            </div>
            {/* Edit Icon - Top Right Outside */}
            <button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
              <Image
                src="/assets/icons/edit-icon.svg"
                alt="Edit profile"
                width={20}
                height={20}
              />
            </button>
          </div>

          {/* Status Buttons */}
          <div className="w-full space-y-2">
            <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
              <div className="flex items-center gap-2 flex-1">
                <span className="w-3 h-3 bg-green-500 rounded-full" />
                <span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
              </div>
              <button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
                Connect
              </button>
            </div>
            <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
              <div className="flex items-center gap-2 flex-1">
                <span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
                <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
              </div>
              <button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
                Connect
              </button>
            </div>
          </div>

          {/* Contact Info */}
          <div className="w-full border border-[#00293d]/10 rounded-[15px] p-4 mt-2">
            <div className="flex items-center gap-2 mb-2">
              <span className="font-bold text-[#00293d] text-sm">Email:</span>
              <span className="text-[#00293d] text-sm font-serif">********brain@gmail.com</span>
              <button className="p-1 hover:bg-gray-100 rounded ml-auto">
                <Image
                  src="/assets/icons/eye-icon.svg"
                  alt="Show email"
                  width={16}
                  height={16}
                />
              </button>
            </div>
            <div className="flex items-center gap-2">
              <span className="font-bold text-[#00293d] text-sm">Ph.No:</span>
              <span className="text-[#00293d] text-sm font-serif">{agentData.phone}</span>
              <button className="p-1 hover:bg-gray-100 rounded ml-auto">
                <Image
                  src="/assets/icons/eye-icon.svg"
                  alt="Show phone"
                  width={16}
                  height={16}
                />
              </button>
            </div>
          </div>
        </div>

        {/* Right Content - Profile Info + Experience */}
        <div className="flex-1 space-y-6">
          {/* Profile Card */}
          <div className="bg-white rounded-[20px] border border-gray-200 p-6">
            {/* Name and Actions Row */}
            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h1 className="text-[18px] text-[#00293d] font-serif">
                    <span className="font-semibold">{firstName}</span>{' '}
                    <span className="font-normal">{lastName}</span>
                  </h1>
                  {agentData.isVerified && (
                    <>
                      <Image
                        src="/assets/icons/verified-icon.svg"
                        alt="Verified"
                        width={15}
                        height={14}
                      />
                      <span className="text-[14px] text-[#638559] font-medium font-serif">
                        (Verified Expert)
                      </span>
                    </>
                  )}
                  <button className="p-1 hover:bg-gray-100 rounded transition-colors">
                    <Image
                      src="/assets/icons/edit-pencil-icon.svg"
                      alt="Edit name"
                      width={16}
                      height={16}
                    />
                  </button>
                </div>
                <p className="text-[#00293d] text-sm mb-2 font-fractul">{agentData.title}</p>
                <div className="flex items-center gap-4 text-sm text-[#00293d] font-fractul">
                  <span className="flex items-center gap-1 text-[#e58625] font-medium">
                    <Image
                      src="/assets/icons/location-icon.svg"
                      alt="Location"
                      width={16}
                      height={16}
                    />
                    {agentData.location}
                  </span>
                  <span className="flex items-center gap-1">
                    <Image
                      src="/assets/icons/calendar-icon.svg"
                      alt="Calendar"
                      width={16}
                      height={16}
                    />
                    Member Since {agentData.memberSince}
                  </span>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex items-center gap-3">
                <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
                  <Image
                    src="/assets/icons/message-dark-icon.svg"
                    alt="Message"
                    width={14}
                    height={13}
                  />
                  Message
                </button>
                <button className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif">
                  <Image
                    src="/assets/icons/requests-dark-icon.svg"
                    alt="Requests"
                    width={14}
                    height={13}
                  />
                  Requests
                </button>
              </div>
            </div>

            {/* Bio */}
            <p className="text-[#00293d] text-sm leading-relaxed mb-4 font-serif">{agentData.bio}</p>

            {/* Expertise Tags */}
            <div>
              <p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
              <div className="flex flex-wrap gap-2">
                {agentData.expertise.map((tag, idx) => (
                  <Tag key={idx}>{tag}</Tag>
                ))}
              </div>
            </div>
          </div>

          {/* Experience Section - Inside the same row */}
          <ExperienceSection experience={agentData.experience} />

          {/* Info Cards Section - Desktop */}
          <div className="grid grid-cols-3 gap-6">
            <InfoCard
              title="Availability"
              icon={
                <Image
                  src="/assets/icons/clock-icon.svg"
                  alt="Availability"
                  width={32}
                  height={32}
                />
              }
              content={
                <div>
                  <p className="font-semibold mb-2">{agentData.availability.type}</p>
                  <div className="space-y-1">
                    {agentData.availability.days.map((day) => (
                      <p key={day}>{day}</p>
                    ))}
                  </div>
                </div>
              }
            />
            <InfoCard
              title="Preferred work environment"
              icon={
                <Image
                  src="/assets/icons/location-large-icon.svg"
                  alt="Work environment"
                  width={32}
                  height={32}
                />
              }
              content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
            />
            <InfoCard
              title=""
              icon={
                <Image
                  src="/assets/icons/star-icon.svg"
                  alt="Testimonial"
                  width={32}
                  height={32}
                />
              }
              content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
            />
          </div>

          {/* Specialization Section - Desktop */}
          <div className="bg-[#e8e8e8] rounded-[20px] p-8">
            <div className="text-center mb-8">
              <h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
              <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
            </div>
            <div className="grid grid-cols-3 gap-6 mb-6">
              <SpecializationCard
                title="Specialization"
                items={agentData.specialization.types}
                icon={
                  <Image
                    src="/assets/icons/home-icon.svg"
                    alt="Specialization"
                    width={24}
                    height={24}
                  />
                }
              />
              <SpecializationCard
                title="Loan Type"
                items={agentData.specialization.loanTypes}
                icon={
                  <Image
                    src="/assets/icons/wallet-icon.svg"
                    alt="Loan Type"
                    width={24}
                    height={24}
                  />
                }
              />
              <SpecializationCard
                title="Property Type"
                items={agentData.specialization.propertyTypes}
                icon={
                  <Image
                    src="/assets/icons/chart-icon.svg"
                    alt="Property Type"
                    width={24}
                    height={24}
                  />
                }
              />
            </div>
            <div className="grid grid-cols-2 gap-6 max-w-2xl mx-auto">
              <SpecializationCard
                title="Hobbies & Interests"
                items={agentData.specialization.hobbies}
                icon={
                  <Image
                    src="/assets/icons/heart-icon.svg"
                    alt="Hobbies"
                    width={24}
                    height={24}
                  />
                }
              />
              <SpecializationCard
                title="Price Point"
                items={agentData.specialization.pricePoints}
                icon={
                  <Image
                    src="/assets/icons/dollar-icon.svg"
                    alt="Price Point"
                    width={24}
                    height={24}
                  />
                }
              />
            </div>
          </div>

          {/* Testimonials Section - Desktop */}
          <div className="bg-white rounded-[20px] border border-gray-200 p-8">
            <h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
            <p className="text-[#00293d]/70 text-sm text-center mb-8">
              Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
            </p>
            <div className="grid grid-cols-3 gap-6">
              {agentData.testimonials.map((testimonial) => (
                <TestimonialCard
                  key={testimonial.id}
                  text={testimonial.text}
                  author={testimonial.author}
                  role={testimonial.role}
                  rating={testimonial.rating}
                />
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Experience Section */}
      <div className="lg:hidden">
        <ExperienceSection experience={agentData.experience} />
      </div>

      {/* Info Cards Section - Mobile */}
      <div className="flex flex-col gap-6 lg:hidden">
        <InfoCard
          title="Availability"
          icon={
            <Image
              src="/assets/icons/clock-icon.svg"
              alt="Availability"
              width={32}
              height={32}
            />
          }
          content={
            <div>
              <p className="font-semibold mb-2">{agentData.availability.type}</p>
              <div className="space-y-1">
                {agentData.availability.days.map((day) => (
                  <p key={day}>{day}</p>
                ))}
              </div>
            </div>
          }
        />
        <InfoCard
          title="Preferred work environment"
          icon={
            <Image
              src="/assets/icons/location-large-icon.svg"
              alt="Work environment"
              width={32}
              height={32}
            />
          }
          content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
        />
        <InfoCard
          title=""
          icon={
            <Image
              src="/assets/icons/star-icon.svg"
              alt="Testimonial"
              width={32}
              height={32}
            />
          }
          content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
        />
      </div>

      {/* Specialization Section - Mobile */}
      <div className="bg-[#e8e8e8] rounded-[20px] p-8 lg:hidden">
        <div className="text-center mb-8">
          <h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
          <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
        </div>
        <div className="flex flex-col gap-6 mb-6">
          <SpecializationCard
            title="Specialization"
            items={agentData.specialization.types}
            icon={
              <Image
                src="/assets/icons/home-icon.svg"
                alt="Specialization"
                width={24}
                height={24}
              />
            }
          />
          <SpecializationCard
            title="Loan Type"
            items={agentData.specialization.loanTypes}
            icon={
              <Image
                src="/assets/icons/wallet-icon.svg"
                alt="Loan Type"
                width={24}
                height={24}
              />
            }
          />
          <SpecializationCard
            title="Property Type"
            items={agentData.specialization.propertyTypes}
            icon={
              <Image
                src="/assets/icons/chart-icon.svg"
                alt="Property Type"
                width={24}
                height={24}
              />
            }
          />
        </div>
        <div className="flex flex-col gap-6">
          <SpecializationCard
            title="Hobbies & Interests"
            items={agentData.specialization.hobbies}
            icon={
              <Image
                src="/assets/icons/heart-icon.svg"
                alt="Hobbies"
                width={24}
                height={24}
              />
            }
          />
          <SpecializationCard
            title="Price Point"
            items={agentData.specialization.pricePoints}
            icon={
              <Image
                src="/assets/icons/dollar-icon.svg"
                alt="Price Point"
                width={24}
                height={24}
              />
            }
          />
        </div>
      </div>

      {/* Testimonials Section - Mobile */}
      <div className="bg-white rounded-[20px] border border-gray-200 p-8 lg:hidden">
        <h2 className="text-xl font-bold text-[#00293d] font-serif text-center mb-2">Testimonials</h2>
        <p className="text-[#00293d]/70 text-sm text-center mb-8">
          Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
        </p>
        <div className="flex flex-col gap-6">
          {agentData.testimonials.map((testimonial) => (
            <TestimonialCard
              key={testimonial.id}
              text={testimonial.text}
              author={testimonial.author}
              role={testimonial.role}
              rating={testimonial.rating}
            />
          ))}
        </div>
      </div>
    </div>
  );
}