meatloaf-config/src/app/components/ToolsPage.tsx

import { Wrench, Download, Upload, RotateCcw, Database, FileText, HardDrive } from 'lucide-react';
import { toast } from 'sonner';

interface ToolsPageProps {
  config: any;
  setConfig: (config: any) => void;
}

export default function ToolsPage({ config }: ToolsPageProps) {
  const handleBackup = () => {
    const dataStr = JSON.stringify(config, null, 2);
    const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
    const exportFileDefaultName = `meatloaf-config-${new Date().toISOString().split('T')[0]}.json`;

    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    linkElement.click();

    toast.success('Configuration backed up');
  };

  const handleRestore = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.json';
    input.onchange = (e: any) => {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (event: any) => {
        try {
          const config = JSON.parse(event.target.result);
          toast.success('Configuration restored');
          console.log('Restored config:', config);
        } catch (error) {
          toast.error('Invalid configuration file');
        }
      };
      reader.readAsText(file);
    };
    input.click();
  };

  const handleFactoryReset = () => {
    if (confirm('Are you sure you want to reset to factory defaults? This cannot be undone.')) {
      toast.success('Configuration reset to factory defaults');
    }
  };

  const handleFormatSD = () => {
    if (confirm('Are you sure you want to format the SD card? All data will be lost.')) {
      toast.success('SD card formatting started');
    }
  };

  const handleSystemUpdate = () => {
    toast.loading('Checking for updates...');
    setTimeout(() => {
      toast.dismiss();
      toast.success('System is up to date');
    }, 2000);
  };

  const handleExportLogs = () => {
    toast.success('System logs exported');
  };

  return (
    <div className="p-4 space-y-4">
      <h2 className="text-sm text-neutral-500">System Tools</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        <button
          onClick={handleBackup}
          className="w-full p-4 flex items-center gap-3 hover:bg-neutral-50 text-left"
        >
          <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
            <Download className="w-5 h-5 text-blue-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">Backup Configuration</div>
            <div className="text-sm text-neutral-500">Download current config as JSON</div>
          </div>
        </button>

        <button
          onClick={handleRestore}
          className="w-full p-4 flex items-center gap-3 hover:bg-neutral-50 text-left"
        >
          <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
            <Upload className="w-5 h-5 text-green-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">Restore Configuration</div>
            <div className="text-sm text-neutral-500">Upload a config backup file</div>
          </div>
        </button>

        <button
          onClick={handleFactoryReset}
          className="w-full p-4 flex items-center gap-3 hover:bg-neutral-50 text-left"
        >
          <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
            <RotateCcw className="w-5 h-5 text-red-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">Factory Reset</div>
            <div className="text-sm text-neutral-500">Reset to default settings</div>
          </div>
        </button>
      </div>

      <h2 className="text-sm text-neutral-500 pt-4">Storage Tools</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        <button
          onClick={handleFormatSD}
          className="w-full p-4 flex items-center gap-3 hover:bg-neutral-50 text-left"
        >
          <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
            <HardDrive className="w-5 h-5 text-orange-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">Format SD Card</div>
            <div className="text-sm text-neutral-500">Erase and reformat storage</div>
          </div>
        </button>

        <div className="p-4 flex items-center gap-3">
          <div className="w-10 h-10 bg-neutral-100 rounded-lg flex items-center justify-center">
            <Database className="w-5 h-5 text-neutral-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">Storage Info</div>
            <div className="text-sm text-neutral-500">4.2 GB used of 8 GB</div>
          </div>
        </div>
      </div>

      <h2 className="text-sm text-neutral-500 pt-4">System</h2>

      <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
        <button
          onClick={handleSystemUpdate}
          className="w-full p-4 flex items-center gap-3 hover:bg-neutral-50 text-left"
        >
          <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
            <Download className="w-5 h-5 text-purple-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">System Update</div>
            <div className="text-sm text-neutral-500">Check for firmware updates</div>
          </div>
        </button>

        <button
          onClick={handleExportLogs}
          className="w-full p-4 flex items-center gap-3 hover:bg-neutral-50 text-left"
        >
          <div className="w-10 h-10 bg-neutral-100 rounded-lg flex items-center justify-center">
            <FileText className="w-5 h-5 text-neutral-600" />
          </div>
          <div className="flex-1">
            <div className="font-medium">Export System Logs</div>
            <div className="text-sm text-neutral-500">Download diagnostic logs</div>
          </div>
        </button>

        <div className="p-4">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-neutral-100 rounded-lg flex items-center justify-center">
              <Wrench className="w-5 h-5 text-neutral-600" />
            </div>
            <div className="flex-1">
              <div className="font-medium">System Information</div>
            </div>
          </div>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-neutral-500">Firmware Version</span>
              <span className="text-neutral-900">v2.5.1</span>
            </div>
            <div className="flex justify-between">
              <span className="text-neutral-500">Hardware Revision</span>
              <span className="text-neutral-900">Rev C</span>
            </div>
            <div className="flex justify-between">
              <span className="text-neutral-500">Serial Number</span>
              <span className="text-neutral-900">ML-2024-0420</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}