import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Alert,
  Button,
  Divider,
  FileButton,
  Stack,
  Switch,
  Text,
  Tooltip,
} from '@mantine/core';
import LocalIcon from '@app/components/shared/LocalIcon';
import { BookmarkNode } from '@app/utils/editTableOfContents';

interface EditTableOfContentsSettingsProps {
  bookmarks: BookmarkNode[];
  replaceExisting: boolean;
  onReplaceExistingChange: (value: boolean) => void;
  onSelectFiles: () => void;
  onLoadFromPdf: () => void;
  onImportJson: (file: File) => void;
  onImportClipboard: () => void;
  onExportJson: () => void;
  onExportClipboard: () => void;
  isLoading: boolean;
  loadError?: string | null;
  canReadClipboard: boolean;
  canWriteClipboard: boolean;
  disabled?: boolean;
  selectedFileName?: string;
}

export default function EditTableOfContentsSettings({
  bookmarks,
  replaceExisting,
  onReplaceExistingChange,
  onSelectFiles,
  onLoadFromPdf,
  onImportJson,
  onImportClipboard,
  onExportJson,
  onExportClipboard,
  isLoading,
  loadError,
  canReadClipboard,
  canWriteClipboard,
  disabled,
  selectedFileName,
}: EditTableOfContentsSettingsProps) {
  const { t } = useTranslation();

  const infoLines = useMemo(() => ([
    t('editTableOfContents.info.line1', 'Each bookmark needs a descriptive title and the page it should open.'),
    t('editTableOfContents.info.line2', 'Use child bookmarks to build a hierarchy for chapters, sections, or subsections.'),
    t('editTableOfContents.info.line3', 'Import bookmarks from the selected PDF or from a JSON file to save time.'),
  ]), [t]);

  return (
    <Stack gap="md">
      <Stack gap="xs">
        <Text size="sm" fw={500}>{t('editTableOfContents.actions.source', 'Load bookmarks')}</Text>
        <Text size="xs" c="dimmed">
          {selectedFileName
            ? t('editTableOfContents.actions.selectedFile', { file: selectedFileName })
            : t('editTableOfContents.actions.noFile', 'Select a PDF to extract existing bookmarks.')}
        </Text>
      </Stack>

      <Stack gap="sm">
        <Button
          variant="light"
          leftSection={<LocalIcon icon="folder-rounded" />}
          onClick={onSelectFiles}
          fullWidth
        >
          {selectedFileName
            ? t('editTableOfContents.workbench.changeFile', 'Change PDF')
            : t('editTableOfContents.workbench.selectFile', 'Select PDF')}
        </Button>

        <Tooltip label={!selectedFileName ? t('editTableOfContents.actions.noFile', 'Select a PDF to extract existing bookmarks.') : ''} disabled={Boolean(selectedFileName)}>
          <Button
            variant="default"
            leftSection={<LocalIcon icon="picture-as-pdf-rounded" />}
            onClick={onLoadFromPdf}
            loading={isLoading}
            disabled={disabled || !selectedFileName}
            fullWidth
          >
            {t('editTableOfContents.actions.loadFromPdf', 'Load from PDF')}
          </Button>
        </Tooltip>

        <FileButton
          onChange={file => file && onImportJson(file)}
          accept="application/json"
          disabled={disabled}
        >
          {(props) => (
            <Button
              {...props}
              variant="default"
              leftSection={<LocalIcon icon="upload-rounded" />}
              disabled={disabled}
              fullWidth
            >
              {t('editTableOfContents.actions.importJson', 'Import JSON')}
            </Button>
          )}
        </FileButton>

        <Tooltip
          label={canReadClipboard ? '' : t('editTableOfContents.actions.clipboardUnavailable', 'Clipboard access is not available in this browser.')}
          disabled={canReadClipboard}
        >
          <Button
            variant="default"
            leftSection={<LocalIcon icon="content-paste-rounded" />}
            onClick={onImportClipboard}
            disabled={disabled || !canReadClipboard}
            fullWidth
          >
            {t('editTableOfContents.actions.importClipboard', 'Paste from clipboard')}
          </Button>
        </Tooltip>
      </Stack>

      {loadError && (
        <Alert color="red" radius="md" icon={<LocalIcon icon="error-outline-rounded" />}>
          {loadError}
        </Alert>
      )}

      <Divider />

      <Stack gap="xs">
        <Text size="sm" fw={500}>{t('editTableOfContents.actions.export', 'Export bookmarks')}</Text>
      </Stack>

      <Stack gap="sm">
        <Button
          variant="default"
          leftSection={<LocalIcon icon="download-rounded" />}
          onClick={onExportJson}
          disabled={disabled || bookmarks.length === 0}
          fullWidth
        >
          {t('editTableOfContents.actions.exportJson', 'Download JSON')}
        </Button>

        <Tooltip
          label={canWriteClipboard ? '' : t('editTableOfContents.actions.clipboardUnavailable', 'Clipboard access is not available in this browser.')}
          disabled={canWriteClipboard}
        >
          <Button
            variant="default"
            leftSection={<LocalIcon icon="content-copy-rounded" />}
            onClick={onExportClipboard}
            disabled={disabled || bookmarks.length === 0 || !canWriteClipboard}
            fullWidth
          >
            {t('editTableOfContents.actions.exportClipboard', 'Copy to clipboard')}
          </Button>
        </Tooltip>
      </Stack>

      <Divider />

      <Switch
        checked={replaceExisting}
        onChange={(event) => onReplaceExistingChange(event.currentTarget.checked)}
        label={t('editTableOfContents.settings.replaceExisting', 'Replace existing bookmarks')}
        description={t('editTableOfContents.settings.replaceExistingHint', 'When disabled, the new outline is appended after the current bookmarks.')}
        disabled={disabled}
      />

      <Stack gap="xs">
        {infoLines.map((line, index) => (
          <Text key={index} size="sm" c="dimmed">
            {line}
          </Text>
        ))}
      </Stack>
    </Stack>
  );
}
