import React, { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ChevronDown, Loader2 } from "lucide-react"
import { toast } from "@/components/ui/use-toast"
import TCPOverUDP from "./V0-tcp-over-udp"
import SSTPOverUDP from "./V0 sstp-over-udp"

type Protocol = "TCP" | "SSTP"
type ConnectionStatus = "disconnected" | "connecting" | "connected"

interface ConnectionDetails {
  protocol: Protocol
  address: string
  port: string
}

const ProtocolOption: React.FC<{
  protocol: Protocol
  onSelect: (protocol: Protocol) => void
  isActive: boolean
}> = ({ protocol, onSelect, isActive }) => (
  <DropdownMenuItem
    onSelect={() => onSelect(protocol)}
    className={`cursor-pointer ${
      isActive ? "bg-accent text-accent-foreground" : ""
    } hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground`}
    role="menuitem"
  >
    {protocol} over UDP
  </DropdownMenuItem>
)

const ConnectionForm: React.FC<{
  isEnabled: boolean
  connectionDetails: ConnectionDetails
  setConnectionDetails: React.Dispatch<React.SetStateAction<ConnectionDetails>>
  connectionStatus: ConnectionStatus
}> = ({ isEnabled, connectionDetails, setConnectionDetails, connectionStatus }) => (
  <div className="grid gap-6 sm:grid-cols-2">
    <div className="space-y-2">
      <Label htmlFor="remote-address">Remote Address (IP)</Label>
      <Input
        id="remote-address"
        value={connectionDetails.address}
        onChange={(e) =>
          setConnectionDetails((prev) => ({ ...prev, address: e.target.value }))
        }
        placeholder="e.g., 192.168.1.1"
        disabled={!isEnabled || connectionStatus !== "disconnected"}
      />
    </div>
    <div className="space-y-2">
      <Label htmlFor="remote-port">Remote Port</Label>
      <Input
        id="remote-port"
        value={connectionDetails.port}
        onChange={(e) =>
          setConnectionDetails((prev) => ({ ...prev, port: e.target.value }))
        }
        placeholder="e.g., 51820"
        type="number"
        disabled={!isEnabled || connectionStatus !== "disconnected"}
      />
    </div>
  </div>
)

const ProtocolSelector: React.FC<{
  isEnabled: boolean
  connectionDetails: ConnectionDetails
  setConnectionDetails: React.Dispatch<React.SetStateAction<ConnectionDetails>>
  connectionStatus: ConnectionStatus
  onConnect: () => void
}> = ({ isEnabled, connectionDetails, setConnectionDetails, connectionStatus, onConnect }) => {
  const isValidInput = connectionDetails.address.trim() !== "" && connectionDetails.port.trim() !== ""

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          className="w-full sm:w-auto"
          disabled={!isEnabled || !isValidInput || connectionStatus !== "disconnected"}
        >
          {connectionDetails.protocol || "Select Protocol"}
          <ChevronDown className="ml-2 h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <ProtocolOption
          protocol="TCP"
          onSelect={(protocol) => {
            setConnectionDetails((prev) => ({ ...prev, protocol }))
            onConnect()
          }}
          isActive={connectionDetails.protocol === "TCP"}
        />
        <ProtocolOption
          protocol="SSTP"
          onSelect={(protocol) => {
            setConnectionDetails((prev) => ({ ...prev, protocol }))
            onConnect()
          }}
          isActive={connectionDetails.protocol === "SSTP"}
        />
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default function WireGuardProtocolSelector() {
  const [isEnabled, setIsEnabled] = useState(false)
  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>("disconnected")
  const [connectionDetails, setConnectionDetails] = useState<ConnectionDetails>({
    protocol: "TCP",
    address: "",
    port: "",
  })
  const [connection, setConnection] = useState<TCPOverUDP | SSTPOverUDP | null>(null)

  useEffect(() => {
    if (!isEnabled) {
      disconnectProtocol()
    }
  }, [isEnabled])

  const toggleEnabled = () => {
    setIsEnabled((prev) => !prev)
  }

  const connectProtocol = async () => {
    if (connection) {
      await disconnectProtocol()
    }

    setConnectionStatus("connecting")
    let newConnection
    try {
      if (connectionDetails.protocol === "TCP") {
        newConnection = new TCPOverUDP(connectionDetails.address, parseInt(connectionDetails.port, 10))
      } else {
        newConnection = new SSTPOverUDP(connectionDetails.address, parseInt(connectionDetails.port, 10))
      }
      await newConnection.connect()
      setConnection(newConnection)
      setConnectionStatus("connected")
      toast({
        title: "Connection Established",
        description: `Connected to ${connectionDetails.protocol} over UDP (${connectionDetails.address}:${connectionDetails.port})`,
      })
    } catch (error) {
      console.error(`Failed to connect using ${connectionDetails.protocol}:`, error)
      toast({
        title: "Connection Failed",
        description: `Failed to connect using ${connectionDetails.protocol}. Please try again.`,
        variant: "destructive",
      })
      setConnectionStatus("disconnected")
    }
  }

  const disconnectProtocol = async () => {
    if (connection) {
      try {
        await connection.close()
        toast({
          title: "Disconnected",
          description: "Protocol connection closed successfully.",
        })
      } catch (error) {
        console.error("Error disconnecting:", error)
        toast({
          title: "Disconnection Error",
          description: "Failed to disconnect properly. Please try again.",
          variant: "destructive",
        })
      }
    }
    setConnection(null)
    setConnectionStatus("disconnected")
    setConnectionDetails((prev) => ({ ...prev, protocol: "TCP" }))
  }

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8 bg-background rounded-lg shadow-md">
      <ConnectionForm
        isEnabled={isEnabled}
        connectionDetails={connectionDetails}
        setConnectionDetails={setConnectionDetails}
        connectionStatus={connectionStatus}
      />
      <div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:space-x-4 sm:space-y-0">
        <Button
          variant="outline"
          onClick={toggleEnabled}
          aria-pressed={isEnabled}
          className="w-full sm:w-auto"
        >
          {isEnabled ? "Disable" : "Enable"} WireGuard Protocols
        </Button>
        {isEnabled && (
          <ProtocolSelector
            isEnabled={isEnabled}
            connectionDetails={connectionDetails}
            setConnectionDetails={setConnectionDetails}
            connectionStatus={connectionStatus}
            onConnect={connectProtocol}
          />
        )}
        {connectionStatus === "connected" && (
          <Button onClick={disconnectProtocol} variant="destructive" className="w-full sm:w-auto">
            Disconnect
          </Button>
        )}
        {connectionStatus === "connecting" && (
          <Button disabled className="w-full sm:w-auto">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Connecting...
          </Button>
        )}
      </div>
      <div className="text-sm text-muted-foreground">
        {isEnabled
          ? connectionStatus === "connected"
            ? `Connected: ${connectionDetails.protocol} over UDP (${connectionDetails.address}:${connectionDetails.port})`
            : connectionStatus === "connecting"
            ? "Establishing connection..."
            : "Please select a protocol"
          : "WireGuard protocols are disabled"}
      </div>
    </div>
  )
}