src/components/Customise.jsx

import React, { useState, useEffect, useRef } from 'react';

function Customise() {
  const [sensitivity, setSensitivity] = useState(6);
  const [frameRate, setFrameRate] = useState(30);
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
  const [threshold, setThreshold] = useState(30);
  
  //
  const fileInputRef = useRef(null);

  //
  useEffect(() => {
    fetch('/api/settings')
      .then(res => res.json())
      .then(data => {
        if (data) {
          if (data.sensitivity) setSensitivity(data.sensitivity);
          if (data.frame_rate) setFrameRate(data.frame_rate);
          if (data.notification_threshold) setThreshold(data.notification_threshold);
          if (data.notification_enabled !== undefined) setNotificationsEnabled(data.notification_enabled);
        }
      })
      .catch(err => console.error("Failed to load settings", err));
  }, []);

  //
  const handleSave = async () => {
    const settings = {
      sensitivity: parseInt(sensitivity),
      frame_rate: parseInt(frameRate),
      notification_enabled: notificationsEnabled,
      notification_threshold: parseInt(threshold)
    };

    try {
      const response = await fetch('/api/settings', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(settings)
      });
      if (response.ok) alert("Settings saved successfully!");
      else alert("Failed to save settings.");
    } catch (error) {
      alert("Error saving settings: " + error.message);
    }
  };

  //
  const handleExport = async () => {
    try {
      //
      const response = await fetch('/api/sessions?filter=all');
      if (!response.ok) throw new Error("Failed to fetch data");
      
      const data = await response.json();
      
      //
      const jsonString = JSON.stringify(data, null, 2);
      //
      localStorage.setItem('focus_magic_backup', jsonString);

      const blob = new Blob([jsonString], { type: 'application/json' });
      
      //
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      //
      link.download = `focus-guard-backup-${new Date().toISOString().slice(0, 10)}.json`;
      
      //
      document.body.appendChild(link);
      link.click();
      
      //
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error(error);
      alert("Export failed: " + error.message);
    }
  };

  //
  const triggerImport = () => {
    fileInputRef.current.click();
  };

  //
  const handleFileChange = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const content = e.target.result;
        const sessions = JSON.parse(content);

        //
        if (!Array.isArray(sessions)) {
          throw new Error("Invalid file format: Expected a list of sessions.");
        }

        //
        const response = await fetch('/api/import', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(sessions)
        });

        if (response.ok) {
            const result = await response.json();
            alert(`Success! Imported ${result.count} sessions.`);
        } else {
            alert("Import failed on server side.");
        }
      } catch (err) {
        alert("Error parsing file: " + err.message);
      }
      //
      event.target.value = '';
    };
    reader.readAsText(file);
  };

  //
  const handleClearHistory = async () => {
    if (!window.confirm("Are you sure? This will delete ALL your session history permanently.")) {
        return;
    }

    try {
        const response = await fetch('/api/history', { method: 'DELETE' });
        if (response.ok) {
            alert("All history has been cleared.");
        } else {
            alert("Failed to clear history.");
        }
    } catch (err) {
        alert("Error: " + err.message);
    }
  };

  return (
    <main id="page-e" className="page">
      <h1 className="page-title">Customise</h1>

      <div className="settings-container">
        {/* Detection Settings */}
        <div className="setting-group">
          <h2>Detection Settings</h2>
          <div className="setting-item">
            <label htmlFor="sensitivity-slider">Detection Sensitivity</label>
            <div className="slider-group">
              <input type="range" id="sensitivity-slider" min="1" max="10" value={sensitivity} onChange={(e) => setSensitivity(e.target.value)} />
              <span id="sensitivity-value">{sensitivity}</span>
            </div>
            <p className="setting-description">Higher values require stricter focus criteria</p>
          </div>
          <div className="setting-item">
            <label htmlFor="default-framerate">Default Frame Rate</label>
            <div className="slider-group">
              <input type="range" id="default-framerate" min="5" max="60" value={frameRate} onChange={(e) => setFrameRate(e.target.value)} />
              <span id="framerate-value">{frameRate}</span> FPS
            </div>
          </div>
        </div>

        {/* Notifications */}
        <div className="setting-group">
          <h2>Notifications</h2>
          <div className="setting-item">
            <label>
              <input type="checkbox" id="enable-notifications" checked={notificationsEnabled} onChange={(e) => setNotificationsEnabled(e.target.checked)} />
              Enable distraction notifications
            </label>
          </div>
          <div className="setting-item">
            <label htmlFor="notification-threshold">Alert after (seconds)</label>
            <input type="number" id="notification-threshold" value={threshold} onChange={(e) => setThreshold(e.target.value)} min="5" max="300" />
          </div>
        </div>

        {/* Data Management */}
        <div className="setting-group">
          <h2>Data Management</h2>
          
          {/* hidden file input, json only */}
          <input 
            type="file" 
            ref={fileInputRef} 
            style={{ display: 'none' }} 
            accept=".json" 
            onChange={handleFileChange} 
          />

          <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', flexWrap: 'wrap' }}>
            {/* Export */}
            <button id="export-data" className="action-btn blue" onClick={handleExport} style={{ width: '30%', minWidth: '120px' }}>
                Export Data
            </button>
            
            {/* Import */}
            <button id="import-data" className="action-btn yellow" onClick={triggerImport} style={{ width: '30%', minWidth: '120px' }}>
                Import Data
            </button>
            
            {/* Clear */}
            <button id="clear-history" className="action-btn red" onClick={handleClearHistory} style={{ width: '30%', minWidth: '120px' }}>
                Clear History
            </button>
          </div>
        </div>

        <button id="save-settings" className="btn-main" onClick={handleSave}>Save Settings</button>
      </div>
    </main>
  );
}

export default Customise;