import {
  Briefcase,
  CheckCircle,
  ChevronDown,
  ChevronUp,
  MessageSquare,
  Users,
} from 'lucide-react';

import type {
  PersonalityDirectorySection,
} from '@/business/personality/types';
import { Button } from '@/components/ui/button';
import type { PersonalityType } from '@/shared/constants/personalityCatalog';
import { PERSONALITY_DIRECTORY_SECTION_TABS } from '@/components/personality-directory/personalityDirectoryViewConfig';

interface PersonalityTypeCardProps {
  readonly type: PersonalityType;
  readonly isExpanded: boolean;
  readonly isHighlighted: boolean;
  readonly activeSection: PersonalityDirectorySection;
  readonly onToggleExpand: (code: string) => void;
  readonly onSectionChange: (code: string, section: PersonalityDirectorySection) => void;
}

export function PersonalityTypeCard({
  type,
  isExpanded,
  isHighlighted,
  activeSection,
  onToggleExpand,
  onSectionChange,
}: PersonalityTypeCardProps) {
  return (
    <div
      className={`bg-slate-800/40 backdrop-blur-sm rounded-2xl border overflow-hidden transition-all ${
        isHighlighted
          ? 'border-violet-500/40 ring-1 ring-violet-500/20'
          : 'border-slate-700/40'
      }`}
    >
      <Button
        type="button"
        onClick={() => onToggleExpand(type.code)}
        className="w-full h-auto p-4 flex items-center gap-4 text-left hover:bg-slate-700/20 transition-all bg-transparent justify-start"
      >
        <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${type.color} flex items-center justify-center shadow-lg flex-shrink-0`}>
          <span className="text-lg font-black text-white tracking-wider">{type.code}</span>
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h4 className="font-bold text-white text-sm">{type.name}</h4>
            {isHighlighted && (
              <span className="text-[10px] font-semibold bg-violet-500/20 text-violet-400 border border-violet-500/30 px-2 py-0.5 rounded-full">
                Your Type
              </span>
            )}
          </div>
          <p className="text-xs text-slate-400">{type.nickname}</p>
          <div className="flex flex-wrap gap-1.5 mt-1.5">
            {type.strengths.slice(0, 3).map((strength) => (
              <span key={strength} className="text-[10px] bg-slate-700/50 text-slate-400 px-2 py-0.5 rounded-md">
                {strength}
              </span>
            ))}
          </div>
        </div>
        <div className="flex-shrink-0 text-slate-500">
          {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
        </div>
      </Button>

      {isExpanded && (
        <div className="border-t border-slate-700/40">
          <PersonalityTypeSectionTabs
            typeCode={type.code}
            activeSection={activeSection}
            onSectionChange={onSectionChange}
          />
          <PersonalityTypeSection type={type} section={activeSection} />
        </div>
      )}
    </div>
  );
}

interface PersonalityTypeSectionTabsProps {
  readonly typeCode: string;
  readonly activeSection: PersonalityDirectorySection;
  readonly onSectionChange: (code: string, section: PersonalityDirectorySection) => void;
}

function PersonalityTypeSectionTabs({
  typeCode,
  activeSection,
  onSectionChange,
}: PersonalityTypeSectionTabsProps) {
  return (
    <div className="flex border-b border-slate-700/30">
      {PERSONALITY_DIRECTORY_SECTION_TABS.map((tab) => {
        const TabIcon = tab.icon;

        return (
          <Button
            key={tab.id}
            type="button"
            onClick={() => onSectionChange(typeCode, tab.id)}
            className={`flex-1 h-auto py-2.5 px-3 text-[11px] font-medium flex items-center justify-center gap-1 transition-all border-b-2 rounded-none ${
              activeSection === tab.id
                ? 'text-violet-400 border-violet-400 bg-violet-500/5'
                : 'text-slate-500 border-transparent hover:text-slate-300 bg-transparent hover:bg-transparent'
            }`}
          >
            <TabIcon size={12} />
            {tab.label}
          </Button>
        );
      })}
    </div>
  );
}

interface PersonalityTypeSectionProps {
  readonly type: PersonalityType;
  readonly section: PersonalityDirectorySection;
}

function PersonalityTypeSection({ type, section }: PersonalityTypeSectionProps) {
  return (
    <div className="p-5">
      {section === 'overview' && <PersonalityOverviewSection type={type} />}
      {section === 'relationships' && <PersonalityRelationshipsSection type={type} />}
      {section === 'language' && <PersonalityLanguageSection type={type} />}
    </div>
  );
}

function PersonalityOverviewSection({ type }: { readonly type: PersonalityType }) {
  return (
    <div className="space-y-4">
      <p className="text-sm text-slate-300 leading-relaxed">{type.description}</p>
      <div className="grid grid-cols-2 gap-3">
        <div className={`${type.bgColor} ${type.borderColor} border rounded-xl p-3`}>
          <h5 className="text-xs font-semibold text-white mb-2 flex items-center gap-1.5">
            <CheckCircle size={12} className="text-emerald-400" />
            Strengths
          </h5>
          <div className="space-y-1">
            {type.strengths.map((strength) => (
              <div key={strength} className="text-[11px] text-slate-300 flex items-center gap-1.5">
                <div className="w-1 h-1 rounded-full bg-slate-500" />
                {strength}
              </div>
            ))}
          </div>
        </div>
        <div className="bg-slate-700/30 border border-slate-600/30 rounded-xl p-3">
          <h5 className="text-xs font-semibold text-white mb-2 flex items-center gap-1.5">
            <Briefcase size={12} className="text-blue-400" />
            Ideal Environment
          </h5>
          <p className="text-[11px] text-slate-400 leading-relaxed">{type.idealWorkEnvironment}</p>
          <h5 className="text-xs font-semibold text-white mt-3 mb-1 flex items-center gap-1.5">
            <MessageSquare size={12} className="text-amber-400" />
            Style
          </h5>
          <p className="text-[11px] text-slate-400">{type.communicationStyle}</p>
        </div>
      </div>
    </div>
  );
}

function PersonalityRelationshipsSection({ type }: { readonly type: PersonalityType }) {
  return (
    <div className="bg-gradient-to-r from-blue-500/5 to-cyan-500/5 rounded-xl p-4 border border-blue-500/15">
      <h5 className="font-semibold text-blue-400 text-sm mb-3 flex items-center gap-2">
        <Users size={14} />
        Professional Relationships
      </h5>
      <p className="text-sm text-slate-300 leading-relaxed">{type.workRelationships}</p>
    </div>
  );
}

function PersonalityLanguageSection({ type }: { readonly type: PersonalityType }) {
  return (
    <div className="bg-gradient-to-r from-emerald-500/5 to-teal-500/5 rounded-xl p-4 border border-emerald-500/15">
      <h5 className="font-semibold text-emerald-400 text-sm mb-3 flex items-center gap-2">
        <MessageSquare size={14} />
        Workplace Language
      </h5>
      <p className="text-sm text-slate-300 leading-relaxed">{type.workplaceLanguage}</p>
    </div>
  );
}
