import { Server, Plug, PlugZap, AlertCircle, Zap } from 'lucide-react'
import { Button } from './Button'
import './Sidebar.css'

interface SidebarProps {
  serverUrl: string
  onServerUrlChange: (url: string) => void
  isConnected: boolean
  isConnecting: boolean
  sessionId: string | null
  isStateless: boolean
  onConnect: () => void
  error: string | null
  isOpen?: boolean
  onClose?: () => void
}

export function Sidebar({
  serverUrl,
  onServerUrlChange,
  isConnected,
  isConnecting,
  sessionId,
  isStateless,
  onConnect,
  error,
  isOpen,
  onClose
}: SidebarProps) {
  const handleConnect = () => {
    onConnect()
    // Close sidebar on mobile after connecting
    if (onClose) onClose()
  }

  return (
    <aside className={`sidebar ${isOpen ? 'open' : ''}`}>
      <div className="sidebar-section">
        <div className="sidebar-section-header">
          <Server size={16} />
          <span>Server Connection</span>
        </div>

        <div className="sidebar-section-content">
          <div className="form-group">
            <label htmlFor="server-url">Server URL</label>
            <input
              id="server-url"
              type="text"
              value={serverUrl}
              onChange={(e) => onServerUrlChange(e.target.value)}
              placeholder="http://localhost:3000/mcp"
              disabled={isConnected}
            />
          </div>

          <Button
            variant={isConnected ? 'default' : 'primary'}
            onClick={handleConnect}
            loading={isConnecting}
            loadingText="Connecting..."
            icon={isConnected ? <PlugZap size={16} /> : <Plug size={16} />}
          >
            {isConnected ? 'Disconnect' : 'Connect'}
          </Button>

          <p className="small">
            Also works with local MCP servers.
          </p>

          {error && (
            <div className="error-message">
              <AlertCircle size={14} />
              <span>{error}</span>
            </div>
          )}

          {isConnected && (
            <div className="session-info">
              {isStateless ? (
                <>
                  <div className="session-label">Mode</div>
                  <div className="stateless-badge">
                    <Zap size={12} />
                    <span>Stateless</span>
                  </div>
                </>
              ) : sessionId ? (
                <>
                  <div className="session-label">Session ID</div>
                  <code className="session-id">{sessionId.slice(0, 26)}...</code>
                </>
              ) : null}
            </div>
          )}
        </div>
      </div>

      <div className="sidebar-section">
        <div className="sidebar-section-header">
          <span>About</span>
        </div>
        <div className="sidebar-section-content">
          <p className="sidebar-about">
            MCP UI Inspector is a developer tool for testing MCP servers with UI capabilities.  </p>
          <div className="sidebar-links">
            <a href="https://github.com/fredjens/mcp-ui-kit" target="_blank" rel="noopener noreferrer">
              MCP UI Kit
            </a>
          </div>
        </div>
      </div>
    </aside>
  )
}
