import { Search } from 'lucide-react';

import type { PersonalityDirectoryPage } from '@/business/personality/types';
import { Button } from '@/components/ui/button';
import { StatePanel } from '@/components/ui/state-panel';
import type { PersonalityType } from '@/shared/constants/personalityCatalog';
import { PersonalityTypeCard } from '@/components/personality-directory/PersonalityTypeCard';

interface PersonalityTypeListProps {
  readonly page: PersonalityDirectoryPage;
  readonly highlightType?: string | null;
}

export function PersonalityTypeList({ page, highlightType }: PersonalityTypeListProps) {
  if (page.isLoading) {
    return (
      <StatePanel tone="violet" alignment="center" loading className="py-12">
        Loading personality types...
      </StatePanel>
    );
  }

  if (page.error) {
    return (
      <StatePanel tone="red" role="alert">
        Personality types could not be loaded from the backend.
      </StatePanel>
    );
  }

  return (
    <div className="space-y-3">
      {page.filteredTypes.map((type: PersonalityType) => (
        <PersonalityTypeCard
          key={type.code}
          type={type}
          isExpanded={page.expandedType === type.code}
          isHighlighted={highlightType === type.code}
          activeSection={page.getActiveSection(type.code)}
          onToggleExpand={page.toggleExpand}
          onSectionChange={page.setActiveSection}
        />
      ))}

      {page.filteredTypes.length === 0 && (
        <div className="text-center py-12 text-slate-500">
          <Search size={32} className="mx-auto mb-3 opacity-50" />
          <p className="text-sm">No personality types match your search.</p>
          <Button
            type="button"
            onClick={page.clearFilters}
            className="mt-2 h-auto bg-transparent hover:bg-transparent p-0 text-xs text-violet-400 hover:text-violet-300"
          >
            Clear filters
          </Button>
        </div>
      )}
    </div>
  );
}
