import React, { useState, useEffect } from 'react';
import './Options.css';
import useSSE from './useSSE';

const Options = () => {
  const [message, setMessage] = useState('');
  const [messageType, setMessageType] = useState('info');
  const [isSettingWaypoints, setIsSettingWaypoints] = useState(false);
  const [settings, setSettings] = useState({
    cargo: '',
    max_warp_speed: '',
    max_subwarp_speed: '',
    risk_cost: '',
    ship_cost: '',
    tax_rate: '',
    profit_threshold: '',
    max_capital: '',
    snipe_profit_threshold: ''
  });
  const { data: sseData } = useSSE('http://localhost:8000/data_stream');
  const route = Array.isArray(sseData?.route) ? sseData.route : [];
  const hasRouteWaypoints = route.length > 1;

  useEffect(() => {
    fetch('http://localhost:8000/settings')
      .then(res => res.json())
      .then(data => {
        setSettings({
          cargo: data.cargo,
          max_warp_speed: data.max_warp_speed,
          max_subwarp_speed: data.max_subwarp_speed,
          risk_cost: data.risk_cost,
          ship_cost: data.ship_cost,
          tax_rate: data.tax_rate,
          profit_threshold: data.profit_threshold,
          max_capital: data.max_capital,
          snipe_profit_threshold: data.snipe_profit_threshold
        });
      })
      .catch(err => console.error("Error fetching settings", err));
  }, []);

  const handleSettingsChange = (e) => {
    const { name, value } = e.target;
    setSettings(prev => ({ ...prev, [name]: value }));
  };

  const handleSaveSettings = async () => {
    try {
      const response = await fetch('http://localhost:8000/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          cargo: Number(settings.cargo),
          max_warp_speed: Number(settings.max_warp_speed),
          max_subwarp_speed: Number(settings.max_subwarp_speed),
          risk_cost: Number(settings.risk_cost),
          ship_cost: Number(settings.ship_cost),
          tax_rate: Number(settings.tax_rate),
          profit_threshold: Number(settings.profit_threshold),
          max_capital: Number(settings.max_capital),
          snipe_profit_threshold: Number(settings.snipe_profit_threshold)
        })
      });
      if (response.ok) {
        setMessageType('success');
        setMessage('Settings saved');
        setTimeout(() => setMessage(''), 3000);
      }
    } catch (error) {
      setMessageType('error');
      setMessage(`Error: ${error.message}`);
    }
  };

  const handleCreateRoute = async () => {
    try {
      await fetch('http://localhost:8000/create_route', { method: 'POST' });
    } catch (error) {
      setMessage(`Error: ${error}`);
    }
  };

  const handleSetWaypoints = async () => {
    if (!hasRouteWaypoints) {
      setMessageType('error');
      setMessage('No route exists');
      return;
    }

    setIsSettingWaypoints(true);
    setMessageType('info');
    setMessage('Sending to EVE...');
    try {
      const response = await fetch('http://localhost:8000/set_waypoints', { method: 'POST' });
      const resData = await response.json();
      const nextMessage = resData.message || resData.status || 'Waypoint request completed';
      const nextType = resData.success ? 'success' : resData.status === 'partial' ? 'warning' : 'error';
      setMessageType(nextType);
      setMessage(nextMessage);
      if (resData.success) {
        setTimeout(() => setMessage(''), 4000);
      }
    } catch (error) {
      setMessageType('error');
      setMessage(`Error: ${error}`);
    } finally {
      setIsSettingWaypoints(false);
    }
  };

  const messageClassName = messageType === 'error'
    ? 'mb-1 text-red-400'
    : messageType === 'warning'
      ? 'mb-1 text-yellow-300'
      : 'mb-1 text-green-400';

  const waypointButtonClassName = hasRouteWaypoints && !isSettingWaypoints
    ? 'options-button flex-1 px-2 py-1 text-sm bg-green-700 hover:bg-green-600 text-white rounded'
    : 'options-button flex-1 px-2 py-1 text-sm bg-green-900 text-white rounded opacity-50 cursor-not-allowed';

  return (
    <div className="p-2 options-container flex flex-col content-start h-full text-white text-xs">
      <div className="flex gap-2 mb-2">
        <button className="options-button flex-1 px-2 py-1 text-sm bg-blue-600 hover:bg-blue-500 text-white rounded" onClick={handleCreateRoute}>
          Create Route
        </button>
        <button
          className={waypointButtonClassName}
          onClick={handleSetWaypoints}
          disabled={!hasRouteWaypoints || isSettingWaypoints}
        >
          Set in Game
        </button>
      </div>
      
      {message && <p className={messageClassName}>{message}</p>}

      <div className="settings-form grid grid-cols-4 gap-x-2 gap-y-1 items-center">
        <label>Cargo (m³)</label>
        <input name="cargo" type="number" value={settings.cargo} onChange={handleSettingsChange} className="text-black p-1 w-full" />
        
        <label>Risk (ISK)</label>
        <input name="risk_cost" type="number" value={settings.risk_cost} onChange={handleSettingsChange} className="text-black p-1 w-full" />
        
        <label>Warp (AU/s)</label>
        <input name="max_warp_speed" type="number" step="0.1" value={settings.max_warp_speed} onChange={handleSettingsChange} className="text-black p-1 w-full" />
        
        <label>Ship (ISK)</label>
        <input name="ship_cost" type="number" value={settings.ship_cost} onChange={handleSettingsChange} className="text-black p-1 w-full" />
        
        <label>Sub (m/s)</label>
        <input name="max_subwarp_speed" type="number" step="0.1" value={settings.max_subwarp_speed} onChange={handleSettingsChange} className="text-black p-1 w-full" />
        
        <label>Tax (%)</label>
        <input name="tax_rate" type="number" step="0.1" value={settings.tax_rate} onChange={handleSettingsChange} className="text-black p-1 w-full" />

        <label>Prof. Thr.</label>
        <input name="profit_threshold" type="number" value={settings.profit_threshold} onChange={handleSettingsChange} className="text-black p-1 w-full" />
        
        <label>Max Cap.</label>
        <input name="max_capital" type="number" value={settings.max_capital} onChange={handleSettingsChange} className="text-black p-1 w-full" />

        <label>Snipe Thr.</label>
        <input name="snipe_profit_threshold" type="number" value={settings.snipe_profit_threshold} onChange={handleSettingsChange} className="text-black p-1 w-full" />
      </div>
      
      <button className="mt-2 bg-blue-600 hover:bg-blue-500 py-1 px-2 text-white font-bold rounded" onClick={handleSaveSettings}>
        Save
      </button>
    </div>
  );
}

export default Options;