'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import type { TopProfessionalsContent } from '@/types/cms';

// Sample agents data for tabs
const agentsData = [
  {
    id: '1',
    name: 'Arjun Mehta',
    subtitle: '(Residential Property Expert)',
    location: 'San Francisco, CA',
    experience: '10+ years in the real estate industry.',
    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
    imageUrl: '/assets/images/professional-1.jpg',
  },
  {
    id: '2',
    name: 'Arjun Mehta',
    subtitle: '(Residential Property Expert)',
    location: 'San Francisco, CA',
    experience: '10+ years in the real estate industry.',
    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
    imageUrl: '/assets/images/professional-2.jpg',
  },
  {
    id: '3',
    name: 'Arjun Mehta',
    subtitle: '(Residential Property Expert)',
    location: 'San Francisco, CA',
    experience: '10+ years in the real estate industry.',
    expertise: ['Residential', 'Rental', 'Commercial', 'Inspection', 'Land', 'Rental'],
    imageUrl: '/assets/images/professional-3.jpg',
  },
];

const lendersData = [
  {
    id: '4',
    name: 'Sarah Johnson',
    subtitle: '(Mortgage Specialist)',
    location: 'Los Angeles, CA',
    experience: '10+ years in mortgage lending.',
    expertise: ['FHA Loans', 'Conventional', 'VA Loans', 'Refinancing', 'Jumbo'],
    imageUrl: '/assets/images/professional-1.jpg',
  },
  {
    id: '5',
    name: 'Michael Chen',
    subtitle: '(Senior Loan Officer)',
    location: 'Seattle, WA',
    experience: '7+ years in lending.',
    expertise: ['Jumbo Loans', 'Refinancing', 'Investment', 'First-time', 'USDA'],
    imageUrl: '/assets/images/professional-2.jpg',
  },
  {
    id: '6',
    name: 'Emily Davis',
    subtitle: '(Home Loan Advisor)',
    location: 'Austin, TX',
    experience: '5+ years in mortgage industry.',
    expertise: ['First-time Buyers', 'FHA', 'USDA Loans', 'VA Loans', 'Conventional'],
    imageUrl: '/assets/images/professional-3.jpg',
  },
];

interface ProfessionalCardProps {
  name: string;
  subtitle: string;
  location: string;
  experience: string;
  expertise: string[];
  imageUrl: string;
}

function ProfessionalCard({
  name,
  subtitle,
  location,
  experience,
  expertise,
  imageUrl,
}: ProfessionalCardProps) {
  return (
    <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)]">
      {/* Image */}
      <div className="relative h-[226px] w-full overflow-hidden">
        <Image
          src={imageUrl}
          alt={name}
          fill
          className="object-cover"
        />
      </div>

      {/* Content */}
      <div className="p-4">
        {/* Name */}
        <h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
          {name}
        </h3>

        {/* Subtitle */}
        <p className="font-serif font-normal text-[10px] leading-normal text-[#00293d] mt-1">
          {subtitle}
        </p>

        {/* Verified Badge */}
        <div className="flex items-center gap-1.5 mt-2">
          <Image
            src="/assets/icons/verified-badge-blue.svg"
            alt="Verified"
            width={14}
            height={14}
          />
          <span className="font-serif font-medium text-[14px] leading-normal text-[#638559]">
            &ldquo;Verified local agent&rdquo;
          </span>
        </div>

        {/* Location */}
        <div className="mt-3">
          <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
            Location:
          </p>
          <div className="flex items-center gap-1.5 mt-1">
            <Image
              src="/assets/icons/location-pin-orange.svg"
              alt="Location"
              width={12}
              height={15}
            />
            <span className="font-serif font-normal text-[10px] leading-normal text-[#00293d]">
              {location}
            </span>
          </div>
        </div>

        {/* Expertise */}
        <div className="mt-3">
          <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
            Expertise:
          </p>
          <div className="flex flex-wrap gap-1.5 mt-2">
            {expertise.slice(0, 6).map((tag, index) => (
              <span
                key={index}
                className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>

        {/* Experience */}
        <p className="mt-3 text-[14px] leading-normal text-[#00293d]">
          <span className="font-fractul font-bold">Experience:</span>
          <span className="font-serif font-normal"> {experience}</span>
        </p>

        {/* Star Rating */}
        <div className="flex gap-1 mt-3">
          {[...Array(5)].map((_, i) => (
            <Image
              key={i}
              src="/assets/icons/star-yellow.svg"
              alt="Star"
              width={18}
              height={17}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

const defaultContent: TopProfessionalsContent = {
  title: '\u201cMeet top real estate professionals\u201d',
  ctaText: 'Discover 5,000+ Top Real Estate Agents in Our Network.',
  ctaButtonText: 'Browse Experts',
  agents: agentsData,
  lenders: lendersData,
};

export function TopProfessionals({ content }: { content?: TopProfessionalsContent }) {
  const data = content ?? defaultContent;
  const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
  const displayData = activeTab === 'agents' ? data.agents : data.lenders;

  return (
    <section className="py-10 md:py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-10">
          <h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d]">
            {data.title}
          </h2>
        </div>

        {/* Tabs Container */}
        <div className="flex justify-center mb-10">
          <div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex items-center">
            {/* Agents Tab */}
            <button
              onClick={() => setActiveTab('agents')}
              className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
                activeTab === 'agents'
                  ? 'bg-[#00293d] text-[#f0f5fc]'
                  : 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
              }`}
            >
              <Image
                src={activeTab === 'agents' ? '/assets/icons/agents-tab-icon-orange.svg' : '/assets/icons/agents-tab-icon.svg'}
                alt=""
                width={20}
                height={20}
              />
              Agents
            </button>

            {/* Divider */}
            <div className="h-[44px] w-px bg-[#00293d]/20 mx-4" />

            {/* Lenders Tab */}
            <button
              onClick={() => setActiveTab('lenders')}
              className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
                activeTab === 'lenders'
                  ? 'bg-[#00293d] text-[#f0f5fc]'
                  : 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
              }`}
            >
              <Image
                src={activeTab === 'lenders' ? '/assets/icons/lenders-tab-icon-orange.svg' : '/assets/icons/lenders-tab-icon.svg'}
                alt=""
                width={20}
                height={20}
              />
              Lenders
            </button>
          </div>
        </div>

        {/* Cards Grid - 3 cards + CTA sidebar */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {/* Professional Cards */}
          {displayData.map((professional, index) => (
            <ProfessionalCard
              key={index}
              name={professional.name}
              subtitle={professional.subtitle}
              location={professional.location}
              experience={professional.experience}
              expertise={professional.expertise}
              imageUrl={professional.imageUrl}
            />
          ))}

          {/* CTA Sidebar Card */}
          <div
            className="rounded-[15px] p-6 flex flex-col items-center justify-center text-center min-h-[400px]"
            style={{
              background: 'linear-gradient(180deg, #C5D6D6 0%, #FFFFFF 100%)',
            }}
          >
            {/* Building Icon */}
            <div className="mb-4">
              <Image
                src="/assets/icons/building-icon.svg"
                alt="Building"
                width={50}
                height={38}
              />
            </div>

            {/* Text */}
            <p className="font-fractul font-normal text-[14px] leading-[1.4] text-[#00293d] mb-6">
              {data.ctaText}
            </p>

            {/* Browse Experts Button */}
            <Link href="/user/profiles">
              <button className="bg-[#e58625] hover:bg-[#d47820] text-white font-fractul font-bold text-[16px] leading-[19px] px-8 py-3 rounded-[15px] transition-colors">
                {data.ctaButtonText}
              </button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}