'use client';

import { useSession } from 'next-auth/react';
import Image from 'next/image';
import { useState } from 'react';
import { Button } from '@/components/ui/Button';

// 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/agent-placeholder.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, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
      author: 'Kennedy 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, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
      author: 'Kennedy Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
    {
      id: 3,
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
      author: 'Kennedy Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
  ],
};

// Star Rating Component
function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Image
          key={star}
          src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'}
          alt={star <= rating ? 'Filled star' : 'Empty star'}
          width={16}
          height={16}
        />
      ))}
    </div>
  );
}

// Tag Component
function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
  return (
    <span
      className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${variant === 'light'
          ? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
          : variant === 'orange'
            ? 'border-[#e58625] text-[#e58625] bg-transparent'
            : 'border-[#00293d] text-[#00293d] bg-transparent'
        }`}
    >
      {children}
    </span>
  );
}

// Specialization Card Component
function SpecializationCard({
  title,
  items,
  icon,
}: {
  title: string;
  items: string[];
  icon: React.ReactNode;
}) {
  return (
    <div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
      <div className="flex justify-center mb-3">{icon}</div>
      <h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
      <div className="space-y-1">
        {items.map((item, idx) => (
          <p key={idx} className="text-[#00293d] text-sm">
            {item}
          </p>
        ))}
      </div>
      <button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
        Show More
        <Image
          src="/assets/icons/chevron-down-icon.svg"
          alt="Show more"
          width={12}
          height={12}
        />
      </button>
    </div>
  );
}

// Info Card Component
function InfoCard({
  title,
  content,
  icon,
}: {
  title: string;
  content: React.ReactNode;
  icon: React.ReactNode;
}) {
  return (
    <div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center">
      <div className="flex justify-center mb-3">{icon}</div>
      {title && <h4 className="font-bold text-[#00293d] text-sm mb-3">{title}</h4>}
      <div className="text-[#00293d] text-sm">{content}</div>
    </div>
  );
}

export default function AgentDashboard() {
  const { data: session } = useSession();

  return (
    <div className="space-y-6">
      {/* Main Profile Section with Left Sidebar */}
      <div className="flex flex-col lg:flex-row gap-6">
        {/* Left Sidebar - Status & Contact */}
        <div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
          {/* Profile Image */}
          <div className="relative mx-auto lg:mx-0">
            {/* Profile Image */}
            <div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
              <Image
                src="/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg"
                alt="Profile"
                width={200}
                height={200}
                className="w-full h-full object-cover"
              />
            </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="space-y-2">
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-1.5">
                <span className="w-2 h-2 bg-green-500 rounded-full" />
                <span className="text-sm text-[#00293d]">Available.</span>
              </div>
              <button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
                Connect
              </button>
            </div>
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-1.5">
                <span className="w-2 h-2 bg-white border border-gray-400 rounded-full" />
                <span className="text-sm text-[#00293d]">Unavailable.</span>
              </div>
              <button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
                Connect
              </button>
            </div>
          </div>

          {/* Contact Info */}
          <div className="space-y-2 pt-2">
            <div className="flex items-center gap-2 text-sm">
              <span className="font-bold text-[#00293d]">Email:</span>
              <span className="text-[#00293d]">*****brian@gmail.com</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <span className="font-bold text-[#00293d]">Ph.No:</span>
              <span className="text-[#00293d]">{agentData.phone}</span>
              <button className="p-1 hover:bg-gray-100 rounded">
                <Image
                  src="/assets/icons/edit-pencil-icon.svg"
                  alt="Edit phone"
                  width={16}
                  height={16}
                />
              </button>
            </div>
          </div>
        </div>

        {/* Right Content - Profile Info */}
        <div className="flex-1">
          {/* Profile Header 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>
                {/* Name and Verification */}
                <div className="flex items-center gap-2 mb-1">
                  <h1 className="text-[18px] text-[#00293d]">
                    <span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
                    <span className="font-normal">{agentData.name.split(' ')[1]}</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>

                {/* Title */}
                <p className="text-[#00293d] text-sm mb-2">{agentData.title}</p>

                {/* Location and Member Since */}
                <div className="flex items-center gap-4 text-sm text-[#00293d]">
                  <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
                  variant="action"
                  size="sm"
                  leftIcon={
                    <Image
                      src="/assets/icons/message-icon.svg"
                      alt="Message"
                      width={16}
                      height={16}
                    />
                  }
                >
                  Message
                </Button>
                <Button
                  variant="action"
                  size="sm"
                  leftIcon={
                    <Image
                      src="/assets/icons/clipboard-icon.svg"
                      alt="Requests"
                      width={16}
                      height={16}
                    />
                  }
                >
                  Requests
                </Button>
              </div>
            </div>

            {/* Bio */}
            <p className="text-[#00293d] text-sm leading-relaxed mb-4">{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>
        </div>
      </div>

      {/* Experience Section */}
      <div className="bg-white rounded-[20px] border border-gray-200 p-6">
        <h2 className="text-xl font-bold text-[#00293d] mb-6">Experience</h2>
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Left Column */}
          <div className="flex-1 space-y-6">
            <div>
              <p className="font-bold text-[#00293d] text-sm mb-2">Years in Experience</p>
              <ul className="list-disc list-inside text-[#00293d] text-sm">
                <li>{agentData.experience.years}</li>
              </ul>
            </div>
            <div>
              <p className="font-bold text-[#00293d] text-sm mb-2">Number of contract coised</p>
              <ul className="list-disc list-inside text-[#00293d] text-sm">
                <li>{agentData.experience.contracts}</li>
              </ul>
            </div>
            <div>
              <p className="font-bold text-[#00293d] text-sm mb-3">Licensing &amp; Areas</p>
              <div className="flex flex-wrap gap-2">
                {agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => (
                  <Tag key={idx} variant="light">
                    {area}
                  </Tag>
                ))}
                {agentData.experience.licensingAreas.length > 5 && (
                  <span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.licensingAreas.length - 5} More</span>
                )}
              </div>
            </div>
          </div>

          {/* Divider */}
          <div className="hidden lg:block w-px bg-gray-200" />

          {/* Right Column */}
          <div className="flex-1 space-y-6">
            <div>
              <p className="font-bold text-[#00293d] text-sm mb-3">Areas in expertise &amp; Years</p>
              <div className="flex flex-wrap gap-2">
                {agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => (
                  <Tag key={idx} variant="orange">
                    {item.area} – {item.years}
                  </Tag>
                ))}
                {agentData.experience.expertiseYears.length > 3 && (
                  <span className="text-[#e58625] text-sm cursor-pointer">+{agentData.experience.expertiseYears.length - 3}More</span>
                )}
              </div>
            </div>
            <div>
              <p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
              <ul className="space-y-3">
                {agentData.experience.certifications.map((cert, idx) => (
                  <li key={idx} className="text-[#00293d] text-sm">
                    <span>• {cert.name}</span>
                    <p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Info Cards Section */}
      <div className="grid grid-cols-1 md: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 - Light Gray Background */}
      <div className="bg-[#e8e8e8] rounded-[20px] p-8">
        <div className="text-center mb-8">
          <h2 className="text-xl font-bold text-[#00293d]">Specialization</h2>
          <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
        </div>
        <div className="grid grid-cols-1 md: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-1 md: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 */}
      <div className="bg-white rounded-[20px] border border-gray-200 p-8">
        <h2 className="text-xl font-bold text-[#00293d] 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-1 md:grid-cols-3 gap-6">
          {agentData.testimonials.map((testimonial) => (
            <div key={testimonial.id} className="p-4">
              <div className="flex items-start gap-3 mb-4">
                <div className="w-8 h-8 rounded-full bg-[#e58625]/20 flex items-center justify-center flex-shrink-0">
                  <span className="text-[#e58625] text-lg font-serif">&ldquo;</span>
                </div>
                <p className="font-bold text-[#00293d] text-sm">I have been working with Lorem .</p>
              </div>
              <p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.text}</p>
              <div className="flex items-center gap-3 pt-4 border-t border-gray-100">
                <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
                  <Image
                    src="/assets/icons/user-placeholder-icon.svg"
                    alt="User"
                    width={24}
                    height={24}
                  />
                </div>
                <div className="flex-1">
                  <StarRating rating={testimonial.rating} />
                  <p className="font-bold text-[#00293d] text-sm">{testimonial.author}</p>
                  <p className="text-[#00293d]/50 text-xs">{testimonial.role}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}