tfm_ainventory/frontend/components/admin/DatabaseManager.tsx

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-3 md:space-y-4 h-full">
      <div data-testid="database-info" className="level-1 p-4 md:p-6 overflow-hidden relative group transition-all">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
            <Database size={20} />
          </div>
          <h2 className="text-xl font-normal text-white tracking-tight">System Integrity</h2>
        </div>
        
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div className="space-y-1 sm:pr-4">
            <p className="text-xs font-normal text-muted tracking-tight">Database Health</p>
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-green-500 animate-pulse" />
              <span className="text-sm font-normal text-secondary">Operational</span>
            </div>
          </div>
          <div className="sm:pl-4 sm:border-l border-border">
            <p className="text-xs font-normal text-muted tracking-tight">Last Backup</p>
            <p className="text-sm font-normal text-secondary tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
          </div>
          <div className="ml-auto">
              <button
                onClick={onCreateBackup}
                disabled={isBackingUp}
                data-testid="backup-button"
                className="btn-primary"
                aria-label="Create database backup"
              >
               {isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
               {isBackingUp ? "Snapshotting..." : "Force Backup"}
             </button>
          </div>
        </div>
      </div>

      <div className="level-1 p-4 md:p-6 space-y-4">
        <div className="space-y-3">
          <div className="flex items-center gap-3">
             <div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
               <History size={20} />
             </div>
             <div>
                <h3 className="text-lg font-normal text-white tracking-tight">Storage Policy</h3>
                <p className="text-sm text-secondary font-normal tracking-tight">Retention & Maintenance</p>
              </div>
          </div>

          <div className="grid sm:grid-cols-3 gap-3">
            <div className="space-y-1">
              <label className="text-sm font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
                <History size={10} /> Max Backups
              </label>
              <input
                type="number"
                value={dbSettings.retention_count}
                onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})}
                className="input-field w-full text-xs tabular-nums"
              />
            </div>
            <div className="space-y-1">
              <label className="text-sm font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
                <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="input-field w-full text-xs tabular-nums"
              />
            </div>
            <div className="space-y-1">
              <label className="text-sm font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
                <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="input-field w-full text-xs tabular-nums"
              />
            </div>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between px-1">
              <label className="text-sm font-normal text-muted tracking-tight">Recovery Points</label>
              <div className="text-xs font-normal text-primary tracking-tight bg-primary/5 px-3 py-1 border border-primary/10">
                {formatSize(dbStats.total_size_bytes)} Used
              </div>
          </div>
          
          <div className="space-y-1 pr-2 overflow-y-auto max-h-[300px] custom-scrollbar">
            {backups.map((bak: any) => (
              <div key={bak.filename} className="flex items-center justify-between p-3 level-0 border-border group/item hover:border-primary/30 transition-all">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-surface-bright flex items-center justify-center text-muted">
                    <Database size={14} />
                  </div>
                  <div>
                     <p className="text-xs font-normal text-secondary">{bak.filename}</p>
                     <p className="text-xs text-secondary font-normal tabular-nums">                       {new Date(bak.created_at).toLocaleString()} • {formatSize(bak.size_bytes)}
                     </p>
                  </div>
                </div>
                <button
                  onClick={() => onRestore(bak.filename)}
                  className="p-2 text-secondary hover:text-primary hover:bg-primary/5 transition-all opacity-0 group-hover/item:opacity-100"
                  aria-label={`Restore backup ${bak.filename}`}
                >
                  <RotateCcw size={16} />
                </button>
              </div>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 pt-1">
           <button
             onClick={onExport}
             className="btn-secondary"
             aria-label="Export database"
           >
             <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 btn-secondary text-rose-500 border-rose-500/50 hover:border-rose-500 hover:text-rose-500"
               aria-label="Import database"
             >
               <Upload size={14} /> Import Database
             </button>
          </div>
        </div>
      </div>
    </div>
  );
}