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

import type { SignLanguagePage } from '@/business/sign-language/types';
import { ConfirmationDialog } from '@/components/common/ConfirmationDialog';
import { SignLanguageFilters } from '@/components/sign-language/SignLanguageFilters';
import { SignLanguageGrid } from '@/components/sign-language/SignLanguageGrid';
import { SignLanguageHeader } from '@/components/sign-language/SignLanguageHeader';
import { SignLanguageManagementPanel } from '@/components/sign-language/SignLanguageManagementPanel';
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 canPersistProgress={page.canPersistProgress} />

      <SignLanguageRememberPanel content={page.pageContent} />

      <SignLanguageManagementPanel page={page} />

      {page.canPersistProgress && (
        <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}
          canManageSigns={page.canManageSigns}
          onSelectSign={page.selectSign}
          onEditSign={page.startEditSign}
          onDeleteSign={page.requestDeleteSign}
        />
      )}

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

      <ConfirmationDialog
        open={Boolean(page.pendingDeleteSign)}
        title="Delete sign card?"
        description={
          page.pendingDeleteSign
            ? `This will remove "${page.pendingDeleteSign.word}" from the organization sign library.`
            : 'This will remove the sign card.'
        }
        confirmLabel="Delete sign"
        loadingLabel="Deleting..."
        loading={page.isSavingSigns}
        disabled={!page.pendingDeleteSign}
        tone="danger"
        onCancel={page.cancelDeleteSign}
        onConfirm={page.confirmDeleteSign}
      />
    </div>
  );
}
