'use client';

import { useState } from 'react';
import { databaseService, type BackupResult } from '@/services/database.service';
import { cn } from '@/lib/utils';
import { Download, Upload, Trash2, RefreshCw, AlertTriangle, CheckCircle2, Clock } from 'lucide-react';

export default function SuperAdminBackupPage() {
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState<'backup' | 'restore'>('backup');
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [result, setResult] = useState<BackupResult | null>(null);

  const handleBackup = async () => {
    setLoading(true);
    setError(null);
    setSuccess(null);
    setResult(null);
    try {
      const res = await databaseService.createBackup();
      setResult(res);
      setSuccess('Backup completed successfully');
    } catch (err: any) {
      setError(err?.message || 'Failed to create backup');
    } finally {
      setLoading(false);
    }
  };

  const handleDownload = () => {
    if (!result?.filePath) return;
    window.open(`/api/admin/database/download?path=${encodeURIComponent(result.filePath)}`, '_blank');
  };

  const handleRestore = async (path: string) => {
    if (!confirm('This will restore the database from the selected backup. This action cannot be undone.')) return;
    setLoading(true);
    setError(null);
    setSuccess(null);
    try {
      await databaseService.restoreBackup(path);
      setSuccess('Database restored successfully');
    } catch (err: any) {
      setError(err?.message || 'Failed to restore backup');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Database Backup & Restore</h1>
          <p className="text-sm text-slate-400">Create backups and restore from existing snapshots.</p>
        </div>
      </div>

      {error && (
        <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" />
          {error}
        </div>
      )}
      {success && (
        <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400 flex items-center gap-2">
          <CheckCircle2 className="h-4 w-4" />
          {success}
        </div>
      )}

      <div className="flex gap-2 border-b border-white/10">
        <button
          onClick={() => setActiveTab('backup')}
          className={cn(
            'border-b-2 px-4 py-2 text-sm font-medium',
            activeTab === 'backup'
              ? 'border-blue-600 text-white'
              : 'border-transparent text-slate-400 hover:text-white',
          )}
        >
          Create Backup
        </button>
        <button
          onClick={() => setActiveTab('restore')}
          className={cn(
            'border-b-2 px-4 py-2 text-sm font-medium',
            activeTab === 'restore'
              ? 'border-blue-600 text-white'
              : 'border-transparent text-slate-400 hover:text-white',
          )}
        >
          Restore
        </button>
      </div>

      {activeTab === 'backup' && (
        <div className="space-y-4">
          <button
            onClick={handleBackup}
            disabled={loading}
            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
          >
            {loading ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
            {loading ? 'Creating Backup...' : 'Create Database Backup'}
          </button>

          {result && (
            <div className="rounded-lg border border-white/10 bg-slate-800/50 p-4 space-y-2">
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-slate-400" />
                <span className="text-sm text-slate-300">Backup created at: {result.timestamp}</span>
              </div>
              <div className="text-sm text-slate-300">
                Size: {(result.size / (1024 * 1024)).toFixed(2)} MB
              </div>
              <button
                onClick={handleDownload}
                className="inline-flex items-center gap-2 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-slate-300 hover:bg-white/5"
              >
                <Download className="h-3 w-3" />
                Download Backup
              </button>
            </div>
          )}
        </div>
      )}

      {activeTab === 'restore' && (
        <div className="rounded-lg border border-white/10 bg-slate-800/50 p-6 text-center">
          <Upload className="h-12 w-12 text-slate-600 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-white mb-2">Restore Database</h3>
          <p className="text-slate-400 mb-4">
            Select a backup file to restore. This will overwrite the current database.
          </p>
          <p className="text-sm text-slate-500">
            Use the file path from a backup created above, or upload to the server directly.
          </p>
        </div>
      )}
    </div>
  );
}