import { AssessmentTab } from '@/components/emotional-intelligence/AssessmentTab';
import { EmotionalIntelligenceHeader } from '@/components/emotional-intelligence/EmotionalIntelligenceHeader';
import { EmotionalIntelligenceTabs } from '@/components/emotional-intelligence/EmotionalIntelligenceTabs';
import { PersonalityDistributionPanel } from '@/components/emotional-intelligence/PersonalityDistributionPanel';
import { PersonalityQuizTab } from '@/components/emotional-intelligence/PersonalityQuizTab';
import { SavedPersonalityBanner } from '@/components/emotional-intelligence/SavedPersonalityBanner';
import { WeeklyFocusBanner } from '@/components/emotional-intelligence/WeeklyFocusBanner';
import PersonalityDirectory from '@/components/frameworks/PersonalityDirectory';
import { useEmotionalIntelligencePage } from '@/business/personality/emotionalIntelligenceHooks';
import type { UserRole } from '@/shared/types/app';

interface EIProps {
  userRole: UserRole;
}

const EmotionalIntelligence = ({ userRole }: EIProps) => {
  const page = useEmotionalIntelligencePage(userRole);
  const { state, actions } = page;

  return (
    <div className="space-y-6">
      <EmotionalIntelligenceHeader />

      {state.errorMessage && (
        <div className="bg-rose-500/10 border border-rose-500/20 rounded-2xl p-4 text-sm text-rose-300">
          {state.errorMessage}
        </div>
      )}

      {state.personalityResult && !state.isLoadingSaved && state.activeTab === 'assessment' && (
        <SavedPersonalityBanner
          personalityResult={state.personalityResult}
          personalityTypes={state.personalityTypes}
          actions={actions}
        />
      )}

      <EmotionalIntelligenceTabs state={state} actions={actions} />

      {state.activeTab === 'assessment' && (
        <>
          <WeeklyFocusBanner state={state} />
          <AssessmentTab state={state} actions={actions} />
        </>
      )}

      {state.activeTab === 'personality' && (
        <PersonalityQuizTab state={state} actions={actions} />
      )}

      {state.activeTab === 'directory' && (
        <PersonalityDirectory
          onBackToQuiz={() => actions.setActiveTab('personality')}
          highlightType={state.personalityResult}
        />
      )}

      {state.canViewPersonalityDistribution && (state.activeTab === 'personality' || state.activeTab === 'directory') && (
        <PersonalityDistributionPanel state={state} actions={actions} />
      )}
    </div>
  );
};

export default EmotionalIntelligence;
