// app/components/admin/websites/BulkImportButton.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import BulkUploadModal from './BulkUploadModal';

interface ImportError {
  row: number;
  message: string;
  data?: Record<string, unknown>;
}

interface ImportStats {
  success: number;
  failed: number;
  skipped: number;
  total: number;
}

interface ImportResponse {
  message: string;
  stats: ImportStats;
  errors?: ImportError[];
}

export default function BulkImportButton() {
  const [showModal, setShowModal] = useState(false);
  const [uploading, setUploading] = useState(false);
  const router = useRouter();

  const handleDownloadSample = async () => {
    try {
      const response = await fetch('/api/backend/admin/websites/sample-csv');
      if (!response.ok) throw new Error('Failed to download sample file');
      
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'websites-import-template.csv';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
      
      toast.success('Sample file downloaded successfully');
    } catch (error) {
      console.error('Download error:', error);
      toast.error('Failed to download sample file');
    }
  };

  const handleFileUpload = async (file: File) => {
    setUploading(true);
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/api/backend/admin/websites/bulk-import', {
        method: 'POST',
        body: formData,
      });

      const data: ImportResponse = await response.json();

      if (response.ok) {
        toast.success(
          <div className="max-w-md">
            <p className="font-bold text-var-success mb-2">Import completed!</p>
            <div className="text-sm space-y-1">
              <p className="flex justify-between">
                <span>✓ Successful:</span>
                <span className="font-medium">{data.stats.success}</span>
              </p>
              <p className="flex justify-between">
                <span>✗ Failed:</span>
                <span className="font-medium text-var-danger">{data.stats.failed}</span>
              </p>
              {data.stats.skipped > 0 && (
                <p className="flex justify-between">
                  <span>⏭️ Skipped:</span>
                  <span className="font-medium text-var-warning">{data.stats.skipped}</span>
                </p>
              )}
              <p className="flex justify-between border-t pt-1 mt-1">
                <span>Total:</span>
                <span className="font-medium">{data.stats.total}</span>
              </p>
            </div>
            
            {data.errors && data.errors.length > 0 && (
              <div className="mt-3">
                <details className="text-xs">
                  <summary className="text-var-danger font-medium cursor-pointer">
                    View {data.errors.length} error(s)
                  </summary>
                  <div className="mt-2 max-h-60 overflow-auto bg-var-danger-bg p-2 rounded border border-var-danger-border">
                    {data.errors.map((err: ImportError, index: number) => (
                      <div key={index} className="mb-2 pb-2 border-b border-var-danger-border last:border-0">
                        <p className="font-medium text-var-danger">Row {err.row}:</p>
                        <p className="text-var-danger ml-2">{err.message}</p>
                        {err.data && (
                          <details className="mt-1">
                            <summary className="text-var-text-muted cursor-pointer text-xs">
                              View data
                            </summary>
                            <pre className="text-xs mt-1 p-1 bg-var-surface rounded overflow-x-auto">
                              {JSON.stringify(err.data, null, 2)}
                            </pre>
                          </details>
                        )}
                      </div>
                    ))}
                  </div>
                </details>
              </div>
            )}
          </div>,
          { 
            duration: 10000,
            style: {
              maxWidth: '500px',
            }
          }
        );
        
        setShowModal(false);
        router.refresh();
      } else {
        toast.error(data.message || 'Import failed');
      }
    } catch (error) {
      console.error('Upload error:', error);
      toast.error('Failed to upload file');
    } finally {
      setUploading(false);
    }
  };

  return (
    <>
      <div className="flex space-x-3">
        <button
          onClick={handleDownloadSample}
          className="inline-flex items-center px-4 py-2 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-xl hover:bg-var-surface-hover transition-all duration-200"
        >
          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
          </svg>
          Download Sample
        </button>
        
        <button
          onClick={() => setShowModal(true)}
          className="inline-flex items-center px-4 py-2 bg-var-gradient-success text-white font-medium rounded-xl hover:opacity-90 transition-all duration-200 shadow-var-button hover:shadow-var-card"
        >
          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
          </svg>
          Bulk Import
        </button>
      </div>

      <BulkUploadModal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        onUpload={handleFileUpload}
        uploading={uploading}
        onDownloadSample={handleDownloadSample}
      />
    </>
  );
}