'use client';

import { useState } from 'react';
import { Download, Upload, FileText, AlertCircle, CheckCircle } from 'lucide-react';
import { useToast } from '@/components/Toast';

interface ImportResult {
  success: boolean;
  message: string;
  results: {
    imported: number;
    skipped: number;
    errors: string[];
  };
}

export default function ImportExport() {
  const [isExporting, setIsExporting] = useState(false);
  const [isImporting, setIsImporting] = useState(false);
  const [importResult, setImportResult] = useState<ImportResult | null>(null);
  const { addToast } = useToast();

  const handleExport = async () => {
    setIsExporting(true);
    try {
      const response = await fetch('/api/projects/export');
      if (!response.ok) throw new Error('Export failed');
      
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `portfolio-projects-${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
      
      addToast({
        type: 'success',
        title: 'Export erfolgreich',
        message: 'Projekte wurden erfolgreich exportiert'
      });
    } catch (error) {
      addToast({
        type: 'error',
        title: 'Export fehlgeschlagen',
        message: 'Fehler beim Exportieren der Projekte'
      });
    } finally {
      setIsExporting(false);
    }
  };

  const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    setIsImporting(true);
    setImportResult(null);

    try {
      const text = await file.text();
      const data = JSON.parse(text);
      
      const response = await fetch('/api/projects/import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      const result: ImportResult = await response.json();
      setImportResult(result);
      
      if (result.success) {
        addToast({
          type: 'success',
          title: 'Import erfolgreich',
          message: result.message
        });
      } else {
        addToast({
          type: 'error',
          title: 'Import fehlgeschlagen',
          message: result.message
        });
      }
    } catch (error) {
      addToast({
        type: 'error',
        title: 'Import fehlgeschlagen',
        message: 'Ungültige Datei oder Format'
      });
    } finally {
      setIsImporting(false);
      // Reset file input
      event.target.value = '';
    }
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
        <FileText className="w-5 h-5 mr-2" />
        Import & Export
      </h3>
      
      <div className="space-y-4">
        {/* Export Section */}
        <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
          <h4 className="font-medium text-gray-900 dark:text-white mb-2">Export Projekte</h4>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
            Alle Projekte als JSON-Datei herunterladen
          </p>
          <button
            onClick={handleExport}
            disabled={isExporting}
            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Download className="w-4 h-4 mr-2" />
            {isExporting ? 'Exportiere...' : 'Exportieren'}
          </button>
        </div>

        {/* Import Section */}
        <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
          <h4 className="font-medium text-gray-900 dark:text-white mb-2">Import Projekte</h4>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
            JSON-Datei mit Projekten hochladen
          </p>
          <label className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 cursor-pointer">
            <Upload className="w-4 h-4 mr-2" />
            {isImporting ? 'Importiere...' : 'Datei auswählen'}
            <input
              type="file"
              accept=".json"
              onChange={handleImport}
              disabled={isImporting}
              className="hidden"
            />
          </label>
        </div>

        {/* Import Results */}
        {importResult && (
          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
            <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center">
              {importResult.success ? (
                <CheckCircle className="w-5 h-5 mr-2 text-green-500" />
              ) : (
                <AlertCircle className="w-5 h-5 mr-2 text-red-500" />
              )}
              Import Ergebnis
            </h4>
            <div className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
              <p><strong>Importiert:</strong> {importResult.results.imported}</p>
              <p><strong>Übersprungen:</strong> {importResult.results.skipped}</p>
              {importResult.results.errors.length > 0 && (
                <div>
                  <p><strong>Fehler:</strong></p>
                  <ul className="list-disc list-inside ml-4">
                    {importResult.results.errors.map((error, index) => (
                      <li key={index} className="text-red-500">{error}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}