'use client';

import { useState, useRef } from 'react';
import { adminService } from '@/services/admin.service';
import { downloadBlob } from '@/lib/download';
import {
  Download,
  Upload,
  FileSpreadsheet,
  FileText,
  Database,
  Users,
  Shield,
  UserCog,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Loader2,
  FileUp,
  Eye,
  EyeOff,
  Trash2,
} from 'lucide-react';

type DataType = 'users' | 'admins' | 'database';
type ImportMode = 'MERGE' | 'REPLACE';
type ExportFormat = 'excel' | 'pdf';

interface ImportResult {
  success: number;
  errors: number;
  details: string[];
}

export default function SuperAdminImportExportPage() {
  const [exportLoading, setExportLoading] = useState<string | null>(null);
  const [importLoading, setImportLoading] = useState(false);
  const [importResult, setImportResult] = useState<ImportResult | null>(null);

  const [file, setFile] = useState<File | null>(null);
  const [previewData, setPreviewData] = useState<Record<string, any>[]>([]);
  const [showPreview, setShowPreview] = useState(false);
  const [parseError, setParseError] = useState<string | null>(null);

  const [dataType, setDataType] = useState<DataType>('users');
  const [importMode, setImportMode] = useState<ImportMode>('MERGE');
  const [reason, setReason] = useState('');

  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleExport = async (type: string, format: ExportFormat) => {
    setExportLoading(`${type}-${format}`);
    try {
      let response;
      switch (type) {
        case 'users':
          response = format === 'excel'
            ? await adminService.exportUsersExcel()
            : await adminService.exportUsersPdf();
          break;
        case 'admins':
          response = format === 'excel'
            ? await adminService.exportAdminsExcel()
            : await adminService.exportAdminsPdf();
          break;
        case 'super-admins':
          response = format === 'excel'
            ? await adminService.exportSuperAdminsExcel()
            : await adminService.exportSuperAdminsPdf();
          break;
        case 'database':
          response = format === 'excel'
            ? await adminService.exportDatabaseExcel()
            : await adminService.exportDatabasePdf();
          break;
      }
      if (response) {
        const filename = `${type}-export.${format === 'excel' ? 'xlsx' : 'pdf'}`;
        downloadBlob(
          new Blob([response.data], {
            type: format === 'excel'
              ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
              : 'application/pdf',
          }),
          filename,
        );
      }
    } catch (err: any) {
      console.error('Export failed:', err);
    } finally {
      setExportLoading(null);
    }
  };

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (!selectedFile) return;

    setFile(selectedFile);
    setParseError(null);
    setPreviewData([]);
    setShowPreview(false);
    setImportResult(null);

    const ext = selectedFile.name.split('.').pop()?.toLowerCase();
    if (ext !== 'xlsx' && ext !== 'xls' && ext !== 'json') {
      setParseError('Invalid file type. Please upload .xlsx, .xls, or .json files.');
      return;
    }

    try {
      const XLSX = await import('xlsx');
      const data = await selectedFile.arrayBuffer();

      let json: Record<string, any>[] = [];

      if (ext === 'json') {
        const text = new TextDecoder().decode(data);
        const parsed = JSON.parse(text);
        json = Array.isArray(parsed) ? parsed : [parsed];
      } else {
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        json = XLSX.utils.sheet_to_json(worksheet, { defval: '' });
      }

      if (json.length === 0) {
        setParseError('No data found in the uploaded file.');
        return;
      }

      setPreviewData(json);
      setShowPreview(true);
    } catch (err: any) {
      setParseError(err?.message || 'Failed to parse file. Please check the file format.');
    }
  };

  const handleImport = async () => {
    if (!reason.trim() || reason.trim().length < 5) {
      alert('Reason must be at least 5 characters long.');
      return;
    }
    if (previewData.length === 0) {
      alert('No data to import. Please upload a file first.');
      return;
    }

    setImportLoading(true);
    setImportResult(null);

    try {
      let result;
      if (dataType === 'database') {
        const payload = { data: previewData, mode: importMode, reason: reason.trim() };
        result = await adminService.importDatabase(payload);
      } else if (dataType === 'users') {
        const payload = { data: previewData, mode: importMode, reason: reason.trim() };
        result = await adminService.importUsers(payload);
      } else {
        const payload = { data: previewData, mode: importMode, reason: reason.trim() };
        result = await adminService.importAdmins(payload);
      }

      const importResultData: ImportResult = {
        success: result?.successCount || result?.success || previewData.length,
        errors: result?.errorCount || result?.errors || 0,
        details: result?.details || result?.message ? [result.message] : [`${previewData.length} records processed successfully.`],
      };

      setImportResult(importResultData);
    } catch (err: any) {
      setImportResult({
        success: 0,
        errors: previewData.length,
        details: [err?.response?.data?.message || err?.message || 'Import failed. Please try again.'],
      });
    } finally {
      setImportLoading(false);
    }
  };

  const clearFile = () => {
    setFile(null);
    setPreviewData([]);
    setShowPreview(false);
    setParseError(null);
    setImportResult(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const columns = previewData.length > 0 ? Object.keys(previewData[0]) : [];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Import / Export</h1>
        <p className="text-slate-400">Export platform data for backup or import records from Excel/JSON files.</p>
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div className="rounded-xl border border-white/10 bg-white/5 p-6">
          <div className="mb-4 flex items-center gap-2">
            <Download className="h-5 w-5 text-blue-400" />
            <h2 className="text-lg font-semibold text-white">Export Data</h2>
          </div>
          <p className="mb-5 text-sm text-slate-400">Download data as Excel or PDF files.</p>

          <div className="space-y-3">
            {[
              { key: 'users', label: 'Users', icon: <Users className="h-4 w-4" /> },
              { key: 'admins', label: 'Admins', icon: <Shield className="h-4 w-4" /> },
              { key: 'super-admins', label: 'Super Admins', icon: <UserCog className="h-4 w-4" /> },
              { key: 'database', label: 'Full Database', icon: <Database className="h-4 w-4" /> },
            ].map((item) => (
              <div key={item.key} className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
                <div className="flex items-center gap-2">
                  <div className="text-slate-400">{item.icon}</div>
                  <span className="text-sm font-medium text-slate-200">{item.label}</span>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => handleExport(item.key, 'excel')}
                    disabled={exportLoading !== null}
                    className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-300 hover:bg-emerald-500/20 disabled:opacity-50"
                  >
                    {exportLoading === `${item.key}-excel` ? (
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    ) : (
                      <FileSpreadsheet className="h-3.5 w-3.5" />
                    )}
                    Excel
                  </button>
                  <button
                    onClick={() => handleExport(item.key, 'pdf')}
                    disabled={exportLoading !== null}
                    className="inline-flex items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-1.5 text-xs font-medium text-red-300 hover:bg-red-500/20 disabled:opacity-50"
                  >
                    {exportLoading === `${item.key}-pdf` ? (
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    ) : (
                      <FileText className="h-3.5 w-3.5" />
                    )}
                    PDF
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="rounded-xl border border-white/10 bg-white/5 p-6">
          <div className="mb-4 flex items-center gap-2">
            <Upload className="h-5 w-5 text-violet-400" />
            <h2 className="text-lg font-semibold text-white">Import Data</h2>
          </div>
          <p className="mb-5 text-sm text-slate-400">Upload Excel or JSON files to import records.</p>

          <div className="space-y-4">
            <div>
              <label className="mb-2 block text-sm font-medium text-slate-300">Upload File</label>
              <div className="flex items-center gap-3">
                <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300 hover:bg-white/10">
                  <FileUp className="h-4 w-4" />
                  <span>{file ? file.name : 'Choose File'}</span>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept=".xlsx,.xls,.json"
                    onChange={handleFileChange}
                    className="hidden"
                  />
                </label>
                {file && (
                  <button onClick={clearFile} className="rounded-lg p-2 text-slate-400 hover:text-white hover:bg-white/10">
                    <Trash2 className="h-4 w-4" />
                  </button>
                )}
              </div>
              <p className="mt-1.5 text-xs text-slate-500">Supported formats: .xlsx, .xls, .json</p>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="mb-2 block text-sm font-medium text-slate-300">Data Type</label>
                <select
                  value={dataType}
                  onChange={(e) => { setDataType(e.target.value as DataType); setImportResult(null); }}
                  className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                >
                  <option value="users">Users</option>
                  <option value="admins">Admins</option>
                  <option value="database">Full Database</option>
                </select>
              </div>
              <div>
                <label className="mb-2 block text-sm font-medium text-slate-300">Import Mode</label>
                <select
                  value={importMode}
                  onChange={(e) => { setImportMode(e.target.value as ImportMode); setImportResult(null); }}
                  className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                >
                  <option value="MERGE">MERGE</option>
                  <option value="REPLACE">REPLACE</option>
                </select>
              </div>
            </div>

            <div>
              <label className="mb-2 block text-sm font-medium text-slate-300">
                Reason <span className="text-red-400">*</span>
              </label>
              <textarea
                value={reason}
                onChange={(e) => { setReason(e.target.value); setImportResult(null); }}
                placeholder="Provide a reason for this import (minimum 5 characters)..."
                rows={3}
                minLength={5}
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none resize-none"
              />
              <p className="mt-1 text-xs text-slate-500">{reason.length}/5 minimum characters</p>
            </div>

            <button
              onClick={handleImport}
              disabled={importLoading || !file || previewData.length === 0 || reason.trim().length < 5}
              className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
            >
              {importLoading ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Upload className="h-4 w-4" />
              )}
              {importLoading ? 'Importing...' : 'Import Data'}
            </button>
          </div>
        </div>
      </div>

      {parseError && (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400 flex items-center gap-2">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          {parseError}
        </div>
      )}

      {showPreview && previewData.length > 0 && (
        <div className="rounded-xl border border-white/10 bg-white/5 p-6">
          <div className="mb-4 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Eye className="h-5 w-5 text-cyan-400" />
              <h3 className="text-sm font-semibold text-slate-200">Preview ({previewData.length} rows)</h3>
            </div>
            <button onClick={() => setShowPreview(false)} className="rounded-lg p-1 text-slate-400 hover:text-white">
              <EyeOff className="h-4 w-4" />
            </button>
          </div>
          <div className="overflow-x-auto max-h-80 rounded-lg border border-white/10">
            <table className="w-full text-left text-xs">
              <thead className="bg-white/5 text-slate-400 sticky top-0">
                <tr className="border-b border-white/5">
                  <th className="px-3 py-2 font-medium w-10">#</th>
                  {columns.map((col) => (
                    <th key={col} className="px-3 py-2 font-medium whitespace-nowrap">{col}</th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5">
                {previewData.slice(0, 50).map((row, i) => (
                  <tr key={i} className="hover:bg-white/5">
                    <td className="px-3 py-2 text-slate-500 font-mono">{i + 1}</td>
                    {columns.map((col) => (
                      <td key={col} className="px-3 py-2 text-slate-300 max-w-[200px] truncate" title={String(row[col] ?? '')}>
                        {row[col] == null ? '-' : String(row[col])}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {previewData.length > 50 && (
            <p className="mt-2 text-xs text-slate-500">Showing first 50 of {previewData.length} rows.</p>
          )}
        </div>
      )}

      {importResult && (
        <div className="rounded-xl border border-white/10 bg-white/5 p-6">
          <h3 className="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-200">
            <Database className="h-4 w-4 text-slate-400" />
            Import Results
          </h3>
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div className="rounded-lg border border-emerald-500/20 bg-emerald-500/10 p-4 text-center">
              <CheckCircle2 className="mx-auto h-6 w-6 text-emerald-400" />
              <p className="mt-1 text-2xl font-bold text-emerald-400">{importResult.success}</p>
              <p className="text-xs text-slate-400">Success</p>
            </div>
            <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-center">
              <XCircle className="mx-auto h-6 w-6 text-red-400" />
              <p className="mt-1 text-2xl font-bold text-red-400">{importResult.errors}</p>
              <p className="text-xs text-slate-400">Errors</p>
            </div>
          </div>
          {importResult.details.length > 0 && (
            <div className="mt-4 max-h-48 overflow-y-auto rounded-lg border border-white/10 bg-white/5 p-3">
              {importResult.details.map((detail, i) => (
                <p key={i} className="text-xs text-slate-300 py-1 border-b border-white/5 last:border-0">
                  {detail}
                </p>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}