import { UploadCloud } from 'lucide-react';
import React, { useState } from 'react';
import { useTranslation } from '@/hooks/useI18n';
import Button from '@/components/ui/Button.tsx';
import Spinner from '@/components/ui/Spinner.tsx';
import Textarea from '@/components/ui/Textarea.tsx';

interface Step0Props {
  onSmartFill: (payload: ['text' | 'file', string | File]) => void;
  onManualFill: () => void;
  isParsing: boolean;
  parseError: string | null;
}

const Step0 = ({ onSmartFill, onManualFill, isParsing, parseError }: Step0Props) => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<'text' | 'file'>('text');
  const [textValue, setTextValue] = useState('');
  const [fileValue, setFileValue] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFileValue(e.target.files[0]);
    }
  };

  const handleParse = () => {
    if (activeTab === 'text' && textValue.trim()) {
      onSmartFill(['text', textValue]);
    } else if (activeTab === 'file' && fileValue) {
      onSmartFill(['file', fileValue]);
    }
  };

  return (
    <div>
      <p className="text-base text-muted-foreground mb-6 text-center">
        {t('addOrgWizard.smartFill.subtitle')}
      </p>

      <div className="border-b flex mb-4">
        <button
          onClick={() => setActiveTab('text')}
          className={`px-4 py-2 text-sm font-medium ${activeTab === 'text' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          {t('addOrgWizard.smartFill.textTab')}
        </button>
        <button
          onClick={() => setActiveTab('file')}
          className={`px-4 py-2 text-sm font-medium ${activeTab === 'file' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          {t('addOrgWizard.smartFill.fileTab')}
        </button>
      </div>

      <div className="min-h-36">
        {activeTab === 'text' && (
          <Textarea
            value={textValue}
            onChange={(e) => setTextValue(e.target.value)}
            placeholder={t('addOrgWizard.smartFill.textPlaceholder')}
            rows={5}
            disabled={isParsing}
          />
        )}
        {activeTab === 'file' && (
          <div className="flex flex-col items-center justify-center w-full">
            <label
              htmlFor="dropzone-file"
              className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-muted/50 hover:bg-muted"
            >
              <div className="flex flex-col items-center justify-center pt-5 pb-6">
                <UploadCloud className="w-8 h-8 mb-2 text-muted-foreground" />
                <p className="text-sm text-muted-foreground">
                  <span className="font-semibold">
                    {t('addOrgWizard.smartFill.filePromptClick')}
                  </span>{' '}
                  {t('addOrgWizard.smartFill.filePromptDrag')}
                </p>
                <p className="text-xs text-muted-foreground">
                  {t('addOrgWizard.smartFill.fileTypeHint')}
                </p>
              </div>
              <input
                id="dropzone-file"
                name="dropzone-file"
                type="file"
                className="hidden"
                onChange={handleFileChange}
                accept="image/*"
                disabled={isParsing}
              />
            </label>
            {fileValue && <p className="text-sm mt-2 text-muted-foreground">{fileValue.name}</p>}
          </div>
        )}
      </div>

      {parseError && <p className="text-destructive text-xs mt-2 text-center">{parseError}</p>}

      <div className="mt-6 space-y-2">
        <Button
          onClick={handleParse}
          className="w-full"
          disabled={
            isParsing ||
            (activeTab === 'text' && !textValue.trim()) ||
            (activeTab === 'file' && !fileValue)
          }
        >
          {isParsing ? <Spinner className="h-4 w-4" /> : t('addOrgWizard.smartFill.parseButton')}
        </Button>
        <Button
          onClick={onManualFill}
          variant="ghost"
          className={`w-full text-primary ${parseError ? 'animate-pulse' : ''}`}
        >
          {t('addOrgWizard.smartFill.manualButton')}
        </Button>
      </div>
    </div>
  );
};

export default Step0;