import React from 'react';
import { Database, RotateCcw, Download, Upload, Zap, History, Clock } from 'lucide-react';
import { cn } from '@/lib/utils';

interface DatabaseManagerProps {
  dbStats: any;
  isBackingUp: boolean;
  onCreateBackup: () => void;
  dbSettings: any;
  onUpdateDbSettings: (settings: any) => void;
  backups: any[];
  onRestore: (filename: string) => void;
  onExport: () => void;
  onImport: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function DatabaseManager({
  dbStats,
  isBackingUp,
  onCreateBackup,
  dbSettings,
  onUpdateDbSettings,
  backups,
  onRestore,
  onExport,
  onImport
}: DatabaseManagerProps) {
  const formatSize = (bytes: number) => {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
  };

  return (
    <div className="space-y-6 md:space-y-8 h-full">
      <div className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl overflow-hidden relative group transition-all">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
            <Database size={20} />
          </div>
          <h2 className="text-xl font-black text-white tracking-tight">System Integrity</h2>
        </div>
        
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
          <div className="space-y-1 sm:pr-6">
            <p className="text-xs font-bold text-slate-500 tracking-tight uppercase">Database Health</p>
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
              <span className="text-sm font-bold text-slate-200">Operational</span>
            </div>
          </div>
          <div className="sm:pl-6 sm:border-l border-slate-800">
            <p className="text-xs font-bold text-slate-500 tracking-tight uppercase">Last Backup</p>
            <p className="text-sm font-bold text-slate-200 tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
          </div>
          <div className="ml-auto">
              <button 
                onClick={onCreateBackup}
                disabled={isBackingUp}
                className="flex items-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-indigo-600/10 tracking-tight"
              >
               {isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
               {isBackingUp ? "Snapshotting..." : "Force Backup"}
             </button>
          </div>
        </div>
      </div>

      <div className="bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-8">
        <div className="space-y-6">
          <div className="flex items-center gap-4">
             <div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
               <History size={20} />
             </div>
             <div>
                <h3 className="text-lg font-black text-white tracking-tight">Storage Policy</h3>
                <p className="text-xs text-slate-400 font-bold tracking-tight">Retention & Maintenance</p>
              </div>
          </div>

          <div className="grid sm:grid-cols-3 gap-6">
            <div className="space-y-2">
              <label className="text-xs font-bold text-slate-500 tracking-tight ml-1 flex items-center gap-2 uppercase">
                <History size={10} /> Max Backups
              </label>
              <input 
                type="number" 
                value={dbSettings.retention_count}
                onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})}
                className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all tabular-nums"
              />
            </div>
            <div className="space-y-2">
              <label className="text-xs font-bold text-slate-500 tracking-tight ml-1 flex items-center gap-2 uppercase">
                <Clock size={10} /> Schedule (Hour)
              </label>
              <input 
                type="number" 
                min="0" max="23"
                value={dbSettings.schedule_hour}
                onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_hour: parseInt(e.target.value)})}
                className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all tabular-nums"
              />
            </div>
            <div className="space-y-2">
              <label className="text-xs font-bold text-slate-500 tracking-tight ml-1 flex items-center gap-2 uppercase">
                <Zap size={10} /> Frequency (Days)
              </label>
              <input 
                type="number" 
                min="1"
                value={dbSettings.schedule_freq_days}
                onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_freq_days: parseInt(e.target.value)})}
                className="w-full bg-slate-950/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-indigo-500/50 transition-all tabular-nums"
              />
            </div>
          </div>
        </div>

        <div className="space-y-4">
          <div className="flex items-center justify-between px-1">
              <label className="text-xs font-bold text-slate-500 tracking-tight">Recovery Points</label>
              <div className="text-xs font-bold text-indigo-400 tracking-tight bg-indigo-500/5 px-3 py-1 rounded-full border border-indigo-500/10">
                {formatSize(dbStats.total_size_bytes)} Used
              </div>
          </div>
          
          <div className="space-y-2 pr-2 overflow-y-auto max-h-[300px] scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
            {backups.map((bak: any) => (
              <div key={bak.filename} className="flex items-center justify-between p-3.5 bg-slate-950/40 border border-slate-800/40 rounded-2xl group/item hover:border-indigo-500/30 transition-all">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-500">
                    <Database size={14} />
                  </div>
                  <div>
                     <p className="text-xs font-bold text-slate-200">{bak.filename}</p>
                     <p className="text-[11px] text-slate-400 font-medium tabular-nums">
                       {new Date(bak.created_at).toLocaleString()} • {formatSize(bak.size_bytes)}
                     </p>
                  </div>
                </div>
                <button 
                  onClick={() => onRestore(bak.filename)}
                  className="p-2 text-slate-600 hover:text-indigo-400 hover:bg-indigo-500/5 rounded-xl transition-all opacity-0 group-hover/item:opacity-100"
                  title="Restore this point"
                >
                  <RotateCcw size={16} />
                </button>
              </div>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 pt-2">
           <button 
             onClick={onExport}
             className="flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-indigo-500/50 text-indigo-400 rounded-2xl text-sm font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20"
           >
             <Download size={14} /> Export Database
           </button>
          <div className="relative">
            <input 
              type="file" 
              accept=".db"
              onChange={onImport}
              className="absolute inset-0 opacity-0 cursor-pointer z-10"
            />
             <button className="w-full flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-black transition-all tracking-tight shadow-xl shadow-black/20">
               <Upload size={14} /> Import Database
             </button>
          </div>
        </div>
      </div>
    </div>
  );
}