import { Info, Share2 } from 'lucide-react';
import { useState } from 'react';

type Tab = 'aio' | 'backlinks' | 'gpos' | 'maps' | 'ai-overview' | 'chatgpt' | 'gemini' | 'perplexity';

const VisibilityAnalysis = () => {
  const [activeTab, setActiveTab] = useState<Tab>('aio');

  const tabs = [
    { id: 'aio' as Tab, label: 'AIO Health', hasInfo: true },
    { id: 'backlinks' as Tab, label: 'Backlinks', hasInfo: true },
    { id: 'gpos' as Tab, label: 'G Pos #' },
    { id: 'maps' as Tab, label: 'Maps' },
    { id: 'ai-overview' as Tab, label: 'AI Overview' },
    { id: 'chatgpt' as Tab, label: 'Chat GPT' },
    { id: 'gemini' as Tab, label: 'Gemini' },
    { id: 'perplexity' as Tab, label: 'Perplexity' },
  ];

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
      <h2 className="text-2xl font-semibold text-gray-900 mb-6">Analysis of Visibility</h2>
      
      <div className="mb-6">
        <h3 className="text-xl font-bold text-gray-900">BH Medical Spa of Beverly Hills</h3>
        <div className="flex items-center gap-4 text-sm text-gray-600 mt-1">
          <span>
            <span className="font-medium">Sector:</span> Healthcare
          </span>
          <span>
            <span className="font-medium">Industry:</span> Medical Spa
          </span>
        </div>
      </div>

      <div className="flex items-center justify-between gap-4 mb-6 overflow-x-auto pb-2">
        <div className="flex items-center gap-2">
          {tabs.map((tab) => {
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap flex items-center gap-1 transition-colors ${
                  activeTab === tab.id
                    ? 'bg-gray-900 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                {tab.label}
                {tab.hasInfo && <Info className="w-3 h-3" />}
              </button>
            );
          })}
        </div>
        <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors whitespace-nowrap">
          <Share2 className="w-4 h-4" />
          Share
        </button>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-10 h-10 mb-2 rounded-full border-4 border-blue-500 border-t-transparent animate-[spin_3s_linear_infinite]" />
          <span className="text-xl font-bold text-gray-900">24%</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-10 h-10 mb-2 rounded-full border-4 border-blue-500 border-t-transparent animate-[spin_3s_linear_infinite]" />
          <span className="text-xl font-bold text-gray-900">14%</span>
          <span className="text-xs text-gray-500 mt-1">50/370 links</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center text-2xl font-bold text-blue-600">G</div>
          <span className="text-xl font-bold text-gray-900">5</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 text-2xl">📍</div>
          <span className="text-xl font-bold text-gray-900">8</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>

        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>
      </div>
    </div>
  );
};

export default VisibilityAnalysis;

