import React, { useState } from 'react';
import './AmneziaVPN.css';

interface AmneziaVPNProps {
  onConnectedChange?: (connected: boolean) => void;
}

const AmneziaVPN: React.FC<AmneziaVPNProps> = ({ onConnectedChange }) => {
  const [connected, setConnected] = useState(() => localStorage.getItem('amnezia_connected') === 'true');
  const [connecting, setConnecting] = useState(false);

  const handleToggle = () => {
    if (connected) {
      setConnected(false);
      localStorage.setItem('amnezia_connected', 'false');
      onConnectedChange?.(false);
    } else {
      setConnecting(true);
      setTimeout(() => {
        setConnecting(false);
        setConnected(true);
        localStorage.setItem('amnezia_connected', 'true');
        onConnectedChange?.(true);
      }, 1500);
    }
  };

  const statusText = connecting ? 'Подключение...' : connected ? 'Подключено' : 'Отключено';
  const statusClass = connecting ? 'connecting' : connected ? 'connected' : 'disconnected';

  return (
    <div className="amnezia-app">
      <div className="amnezia-header">
        <div className="amnezia-logo">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <circle cx="16" cy="16" r="15" stroke="#6c63ff" strokeWidth="2"/>
            <path d="M16 8 L20 14 L16 12 L12 14 Z" fill="#6c63ff"/>
            <circle cx="16" cy="20" r="3" fill="#6c63ff"/>
            <line x1="16" y1="14" x2="16" y2="17" stroke="#6c63ff" strokeWidth="2"/>
          </svg>
        </div>
        <span className="amnezia-title">AmneziaVPN</span>
      </div>

      <div className="amnezia-body">
        <div className={`status-indicator ${statusClass}`}>
          <div className="status-dot" />
          <span className="status-text">{statusText}</span>
        </div>

        <div className={`shield ${statusClass}`}>
          <svg width="120" height="140" viewBox="0 0 120 140" fill="none">
            <path
              d="M60 5 L110 25 L110 75 C110 105 60 135 60 135 C60 135 10 105 10 75 L10 25 Z"
              fill={connected ? '#6c63ff22' : '#ffffff11'}
              stroke={connected ? '#6c63ff' : connecting ? '#f5a623' : '#555'}
              strokeWidth="2"
            />
            {connected && (
              <path
                d="M40 70 L55 85 L82 55"
                stroke="#6c63ff"
                strokeWidth="4"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            )}
            {!connected && !connecting && (
              <line x1="45" y1="55" x2="75" y2="85" stroke="#555" strokeWidth="4" strokeLinecap="round"/>
            )}
            {connecting && (
              <circle cx="60" cy="70" r="12" stroke="#f5a623" strokeWidth="3" strokeDasharray="20 10" className="spin"/>
            )}
          </svg>
        </div>

        <button
          className={`connect-btn ${statusClass}`}
          onClick={handleToggle}
          disabled={connecting}
        >
          {connecting ? 'Подключение...' : connected ? 'Отключиться' : 'Подключиться'}
        </button>

        {connected && (
          <div className="connection-info">
            <div className="info-row">
              <span className="info-label">Сервер</span>
              <span className="info-value">Netherlands #3</span>
            </div>
            <div className="info-row">
              <span className="info-label">Протокол</span>
              <span className="info-value">WireGuard</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default AmneziaVPN;
