'use client';

import { Stack } from '@tale/ui/layout';
import { Text } from '@tale/ui/text';
import { Upload, AlertCircle } from 'lucide-react';
import { useState, useCallback } from 'react';

import { FileUpload } from '@/app/components/ui/forms/file-upload';
import { useT } from '@/lib/i18n/client';
import { cn } from '@/lib/utils/cn';

import type { ParsedPackage } from '../utils/parse-integration-package';
import { parseIntegrationFiles } from '../utils/parse-integration-package';

interface UploadStepProps {
  onPackageParsed: (pkg: ParsedPackage) => void;
}

export function UploadStep({ onPackageParsed }: UploadStepProps) {
  const { t } = useT('settings');
  const [error, setError] = useState<string | null>(null);
  const [isParsing, setIsParsing] = useState(false);

  const handleFilesSelected = useCallback(
    async (files: File[]) => {
      if (files.length === 0) return;

      setError(null);
      setIsParsing(true);

      try {
        const result = await parseIntegrationFiles(files);
        if (result.success && result.data) {
          onPackageParsed(result.data);
        } else {
          setError(result.error ?? t('integrations.upload.parseError'));
        }
      } catch {
        setError(t('integrations.upload.unexpectedError'));
      } finally {
        setIsParsing(false);
      }
    },
    [onPackageParsed, t],
  );

  return (
    <Stack gap={4}>
      <Text variant="muted">{t('integrations.upload.uploadDescription')}</Text>

      <FileUpload.Root>
        <FileUpload.DropZone
          onFilesSelected={handleFilesSelected}
          accept=".zip,.json,.js,.ts,.png,.svg,.jpg,.jpeg,.webp"
          multiple
          disabled={isParsing}
          inputId="integration-package-upload"
          aria-label={t('integrations.upload.dropZoneLabel')}
          className={cn(
            'border-border hover:border-primary/50 relative flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 transition-colors outline-none focus-visible:border-solid focus-visible:border-ring',
            isParsing && 'pointer-events-none opacity-50',
          )}
        >
          <FileUpload.Overlay
            label={t('integrations.upload.dropHere')}
            className="rounded-lg"
          />
          <Upload className="text-muted-foreground size-8" />
          <Stack gap={1} className="text-center">
            <Text variant="label">
              {isParsing
                ? t('integrations.upload.parsing')
                : t('integrations.upload.dropOrClick')}
            </Text>
            <Text variant="caption">
              {t('integrations.upload.acceptedFormats')}
            </Text>
          </Stack>
        </FileUpload.DropZone>
      </FileUpload.Root>

      {error && (
        <div
          className="bg-destructive/10 text-destructive flex items-start gap-2 rounded-md p-3 text-sm"
          role="alert"
        >
          <AlertCircle className="mt-0.5 size-4 shrink-0" />
          <pre className="font-sans whitespace-pre-wrap">{error}</pre>
        </div>
      )}
    </Stack>
  );
}
