import { AlertTriangle, HandMetal } from 'lucide-react';

import type { SignLanguagePage } from '@/business/sign-language/types';
import { SignLanguageFilters } from '@/components/sign-language/SignLanguageFilters';
import { SignLanguageGrid } from '@/components/sign-language/SignLanguageGrid';
import { SignLanguageHeader } from '@/components/sign-language/SignLanguageHeader';
import { SignLanguageProgressPanel } from '@/components/sign-language/SignLanguageProgressPanel';
import { SignLanguageRememberPanel } from '@/components/sign-language/SignLanguageRememberPanel';
import { SignLanguageVideoModal } from '@/components/sign-language/SignLanguageVideoModal';
import { StatePanel } from '@/components/ui/state-panel';

interface SignLanguageViewProps {
  readonly page: SignLanguagePage;
}

export function SignLanguageView({ page }: SignLanguageViewProps) {
  const contentError = page.signsError || page.pageContentError;

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

      <SignLanguageRememberPanel content={page.pageContent} />

      <SignLanguageProgressPanel
        learnedCount={page.learnedCount}
        totalCount={page.signs.length}
        progressPercent={page.progressPercent}
        progressErrorMessage={page.progressErrorMessage}
      />

      <SignLanguageFilters
        filters={page.filters}
        categories={page.categories}
        onSearchChange={page.setSearchQuery}
        onClearSearch={page.clearSearch}
        onCategoryChange={page.setCategoryFilter}
      />

      {page.isLoading ? (
        <StatePanel
          title="Loading signs"
          icon={HandMetal}
          tone="indigo"
          alignment="center"
          loading
        >
          Loading sign language content and saved progress.
        </StatePanel>
      ) : contentError ? (
        <StatePanel
          title="Signs could not be loaded"
          icon={AlertTriangle}
          tone="red"
          alignment="center"
          role="alert"
        >
          Please try again.
        </StatePanel>
      ) : (
        <SignLanguageGrid
          signs={page.filteredSigns}
          learnedSignIds={page.learnedSignIds}
          onSelectSign={page.selectSign}
        />
      )}

      {page.selectedSign && (
        <SignLanguageVideoModal
          sign={page.selectedSign}
          isLearned={page.learnedSignIds.has(page.selectedSign.id)}
          isSaving={page.isSaving}
          onClose={page.closeSign}
          onToggleLearned={page.toggleLearned}
        />
      )}
    </div>
  );
}
