import React, { useState, useRef } from 'react';
import { backendApi } from '../../services/apiClient';
import { Upload, Download, Loader2, FileSpreadsheet } from 'lucide-react';

type ImportType = 'districts' | 'buildings' | 'employees' | 'accounts';

const IMPORT_LABELS: Record<ImportType, string> = {
  districts: 'Участки',
  buildings: 'Дома',
  employees: 'Сотрудники',
  accounts: 'Лицевые счета',
};

export const DataImportSection: React.FC = () => {
  const [importType, setImportType] = useState<ImportType>('districts');
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ created: number; errors: Array<{ row: number; message: string }>; total: number } | null>(null);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleDownloadTemplate = () => {
    const url = backendApi.getImportTemplateUrl(importType);
    window.open(url, '_blank');
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const f = e.target.files?.[0];
    setFile(f || null);
    setResult(null);
    setError(null);
  };

  const handleImport = async () => {
    if (!file) {
      setError('Выберите файл');
      return;
    }
    setLoading(true);
    setError(null);
    setResult(null);
    try {
      const data = await backendApi.importData(importType, file);
      setResult(data);
    } catch (e: any) {
      setError(e?.message || 'Ошибка импорта');
    } finally {
      setLoading(false);
      setFile(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  return (
    <div className="space-y-6">
      <h3 className="text-lg font-bold text-slate-800">Загрузка данных</h3>
      <p className="text-sm text-slate-500">
        Скачайте шаблон, заполните его и загрузите файл (CSV или XLSX). Поддерживаются: участки, дома, сотрудники, лицевые счета.
      </p>

      <div className="rounded-xl border border-slate-200 bg-slate-50 p-6 space-y-4">
        <div>
          <label className="block text-xs font-bold text-slate-700 mb-2">Тип данных</label>
          <select
            value={importType}
            onChange={(e) => {
              setImportType(e.target.value as ImportType);
              setFile(null);
              setResult(null);
              setError(null);
            }}
            className="w-full max-w-xs px-3 py-2 border border-slate-200 rounded-lg text-sm"
          >
            {(Object.keys(IMPORT_LABELS) as ImportType[]).map((t) => (
              <option key={t} value={t}>{IMPORT_LABELS[t]}</option>
            ))}
          </select>
        </div>

        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={handleDownloadTemplate}
            className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50"
          >
            <Download className="w-4 h-4" /> Скачать шаблон
          </button>
          <label className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 cursor-pointer">
            <FileSpreadsheet className="w-4 h-4" />
            Выбрать файл
            <input
              ref={fileInputRef}
              type="file"
              accept=".csv,.xlsx,.xls"
              onChange={handleFileChange}
              className="hidden"
            />
          </label>
          {file && (
            <span className="flex items-center gap-2 px-3 py-2 text-slate-600 text-sm">
              {file.name}
            </span>
          )}
          <button
            type="button"
            onClick={handleImport}
            disabled={loading || !file}
            className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm font-bold rounded-lg hover:bg-primary-700 disabled:opacity-50"
          >
            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
            Загрузить
          </button>
        </div>

        {error && (
          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-700 text-sm">{error}</div>
        )}

        {result && (
          <div className="rounded-lg border border-slate-200 bg-white p-4 text-sm">
            <p className="font-medium text-slate-800">
              Импорт завершён: создано/обновлено записей — <strong>{result.created}</strong>, всего строк — {result.total}.
            </p>
            {result.errors.length > 0 && (
              <div className="mt-3">
                <p className="text-slate-600 font-medium mb-1">Ошибки по строкам:</p>
                <ul className="list-disc list-inside text-slate-600 space-y-0.5 max-h-40 overflow-y-auto">
                  {result.errors.slice(0, 20).map((e, i) => (
                    <li key={i}>Строка {e.row}: {e.message}</li>
                  ))}
                  {result.errors.length > 20 && (
                    <li className="text-slate-500">… и ещё {result.errors.length - 20}</li>
                  )}
                </ul>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};