import { BookOpen, Fingerprint, Heart } from 'lucide-react';
import type { ReactNode } from 'react';

import type {
  EmotionalIntelligencePageActions,
  EmotionalIntelligencePageState,
} from '@/components/emotional-intelligence/types';
import type { EmotionalIntelligenceTab } from '@/shared/types/emotionalIntelligence';

const TABS: readonly {
  readonly id: EmotionalIntelligenceTab;
  readonly label: string;
  readonly mobileLabel: string;
  readonly icon: ReactNode;
}[] = [
  { id: 'assessment', label: 'EI Self-Assessment', mobileLabel: 'EI Quiz', icon: <Heart size={16} /> },
  { id: 'personality', label: 'Personality Type Quiz', mobileLabel: 'MBTI', icon: <Fingerprint size={16} /> },
  { id: 'directory', label: 'Personality Directory', mobileLabel: 'Directory', icon: <BookOpen size={16} /> },
];

type EmotionalIntelligenceTabsProps = {
  state: EmotionalIntelligencePageState;
  actions: EmotionalIntelligencePageActions;
};

export function EmotionalIntelligenceTabs({ state, actions }: EmotionalIntelligenceTabsProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-1.5">
      <div className="grid grid-cols-3 gap-1.5">
        {TABS.map((tab) => (
          <button
            type="button"
            key={tab.id}
            onClick={() => actions.setActiveTab(tab.id)}
            className={`relative py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
              state.activeTab === tab.id
                ? 'bg-gradient-to-r from-pink-500/20 to-violet-500/20 text-white border border-pink-500/30 shadow-lg shadow-pink-500/10'
                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/30'
            }`}
          >
            <span className={state.activeTab === tab.id ? 'text-pink-400' : ''}>{tab.icon}</span>
            <span className="hidden sm:inline">{tab.label}</span>
            <span className="sm:hidden text-xs">{tab.mobileLabel}</span>
            {tab.id === 'personality' && state.personalityResult && (
              <span className="hidden sm:inline text-[10px] bg-violet-500/20 text-violet-400 px-1.5 py-0.5 rounded-full font-bold">
                {state.personalityResult}
              </span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}
