import { BookOpen, Brain, CheckCircle, Sparkles } from 'lucide-react';

import PersonalityQuiz from '@/components/frameworks/PersonalityQuiz';
import type {
  EmotionalIntelligencePageActions,
  EmotionalIntelligencePageState,
} from '@/components/emotional-intelligence/types';
import { StatePanel } from '@/components/ui/state-panel';

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

export function PersonalityQuizTab({ state, actions }: PersonalityQuizTabProps) {
  const workplaceContent = state.personalityWorkplaceContent;
  const hasContentError = Boolean(state.contentError);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div className="lg:col-span-2">
        {state.isLoadingSaved ? (
          <StatePanel tone="violet" size="lg" alignment="center" loading>
            Loading your saved results...
          </StatePanel>
        ) : (
          <PersonalityQuiz
            onViewDirectory={() => actions.setActiveTab('directory')}
            onResult={actions.handlePersonalityResult}
            questions={state.personalityQuiz?.questions}
            savedType={state.personalityResult}
            savedAnswers={state.savedAnswers}
            savedDate={state.savedDate}
            isSaving={state.isSaving}
            canPersistResult={state.canPersistPersonalResults}
          />
        )}
      </div>

      <div className="space-y-4">
        {state.contentLoading && (
          <StatePanel tone="slate">
            Loading personality workplace content...
          </StatePanel>
        )}

        {hasContentError && (
          <StatePanel tone="red" role="alert">
            Personality workplace content could not be loaded from the backend.
          </StatePanel>
        )}

        {!state.contentLoading && !hasContentError && workplaceContent && (
          <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
            <h3 className="font-semibold text-white mb-3 flex items-center gap-2">
              <Brain size={16} className="text-violet-400" /> What is MBTI?
            </h3>
            <p className="text-xs text-slate-400 leading-relaxed mb-3">
              {workplaceContent.mbtiDescription}
            </p>
            <div className="space-y-2">
              {workplaceContent.dimensions.map((item) => (
                <div key={item.dim} className="bg-violet-500/5 border border-violet-500/10 rounded-lg p-2.5">
                  <div className="flex items-center gap-2 mb-0.5">
                    <span className="text-xs font-bold text-violet-400 bg-violet-500/15 px-2 py-0.5 rounded">{item.dim}</span>
                    <span className="text-xs font-medium text-white">{item.label}</span>
                  </div>
                  <p className="text-[10px] text-slate-500 ml-[52px]">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="bg-gradient-to-br from-indigo-500/10 to-blue-500/10 backdrop-blur-sm rounded-2xl border border-indigo-500/20 p-5">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center shadow-lg">
              <BookOpen size={18} className="text-white" />
            </div>
            <div>
              <h3 className="font-semibold text-white text-sm">Type Directory</h3>
              <p className="text-[10px] text-slate-400">Explore all 16 types</p>
            </div>
          </div>
          <p className="text-xs text-slate-400 mb-3">Browse all personality types to understand colleagues&apos; work styles, communication preferences, and relationship needs.</p>
          <button type="button" onClick={() => actions.setActiveTab('directory')} className="w-full py-2.5 bg-slate-700/50 text-slate-300 rounded-xl font-medium text-sm hover:bg-slate-700/70 transition-all border border-slate-600/30 flex items-center justify-center gap-2">
            <BookOpen size={14} /> Browse All 16 Types
          </button>
        </div>

        {!state.contentLoading && !hasContentError && workplaceContent && (
          <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
            <h3 className="font-semibold text-white mb-3 flex items-center gap-2">
              <Sparkles size={16} className="text-amber-400" /> Why This Matters at Work
            </h3>
            <div className="space-y-2.5">
              {workplaceContent.workplaceTips.map((tip) => (
                <div key={tip} className="flex items-start gap-2 p-2 rounded-lg bg-amber-500/5 border border-amber-500/10">
                  <CheckCircle size={14} className="text-amber-400 mt-0.5 flex-shrink-0" />
                  <p className="text-xs text-slate-300">{tip}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}