"use client";

import React from "react";
import {
  Bot,
  Power,
  PowerOff,
  AlertCircle,
  CheckCircle2,
  RotateCcw,
  RotateCw,
  ArrowUp,
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  Square,
} from "lucide-react";
import { Badge } from "~/components/ui/badge";
import { Separator } from "~/components/ui/separator";
import { ScrollArea } from "~/components/ui/scroll-area";
import { Alert, AlertDescription } from "~/components/ui/alert";
import { Button } from "~/components/ui/button";
import { Switch } from "~/components/ui/switch";
import { Label } from "~/components/ui/label";
import { RobotActionsPanel } from "../RobotActionsPanel";

interface WizardMonitoringPanelProps {
  rosConnected: boolean;
  rosConnecting: boolean;
  rosError?: string;
  robotStatus: {
    connected: boolean;
    battery: number;
    position: { x: number; y: number; theta: number };
    joints: Record<string, unknown>;
    sensors: Record<string, unknown>;
    lastUpdate: Date;
  };
  connectRos: () => Promise<void>;
  disconnectRos: () => void;
  executeRosAction: (
    pluginName: string,
    actionId: string,
    parameters: Record<string, unknown>,
  ) => Promise<unknown>;
  onSetAutonomousLife?: (enabled: boolean) => Promise<boolean | void>;
  onExecuteRobotAction?: (
    pluginName: string,
    actionId: string,
    parameters: Record<string, unknown>,
  ) => Promise<void>;
  studyId?: string;
  trialId?: string;
  trialStatus?: string;
  readOnly?: boolean;
}

const WizardMonitoringPanel = function WizardMonitoringPanel({
  rosConnected,
  rosConnecting,
  rosError,
  robotStatus,
  connectRos,
  disconnectRos,
  executeRosAction,
  onSetAutonomousLife,
  onExecuteRobotAction,
  studyId,
  trialId,
  trialStatus,
  readOnly = false,
}: WizardMonitoringPanelProps) {
  const [autonomousLife, setAutonomousLife] = React.useState(true);

  const handleAutonomousLifeChange = React.useCallback(
    async (checked: boolean) => {
      setAutonomousLife(checked); // Optimistic update
      if (onSetAutonomousLife) {
        try {
          const result = await onSetAutonomousLife(checked);
          if (result === false) {
            throw new Error("Service unavailable");
          }
        } catch (error) {
          console.error("Failed to set autonomous life:", error);
          setAutonomousLife(!checked); // Revert on failure
        }
      }
    },
    [onSetAutonomousLife],
  );
  return (
    <div className="flex h-full flex-col p-2">
      {/* Robot Controls - Scrollable */}
      <div className="bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border shadow-sm">
        <ScrollArea className="flex-1">
          <div className="space-y-4 p-3">
            {/* Robot Status */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <div className="text-sm font-medium">Robot Status</div>
                <div className="flex items-center gap-1">
                  {rosConnected ? (
                    <Power className="h-3 w-3 text-green-600" />
                  ) : (
                    <Badge
                      variant="outline"
                      className="text-muted-foreground w-auto border-gray-300 px-1.5 py-0 text-xs text-gray-500"
                    >
                      Offline
                    </Badge>
                  )}
                </div>
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-muted-foreground text-xs">
                    ROS Bridge
                  </span>
                  <div className="flex items-center gap-1">
                    <Badge
                      variant={
                        rosConnected
                          ? "default"
                          : rosError
                            ? "destructive"
                            : "outline"
                      }
                      className="text-xs"
                    >
                      {rosConnecting
                        ? "Connecting..."
                        : rosConnected
                          ? "Ready"
                          : rosError
                            ? "Failed"
                            : "Offline"}
                    </Badge>
                    {rosConnected && (
                      <span className="animate-pulse text-xs text-green-600">
                        ●
                      </span>
                    )}
                    {rosConnecting && (
                      <span className="animate-spin text-xs text-blue-600">
                        ⟳
                      </span>
                    )}
                  </div>
                </div>
              </div>

              {/* ROS Connection Controls */}
              <div className="pt-2">
                {!rosConnected ? (
                  <Button
                    size="sm"
                    variant="outline"
                    className="w-full text-xs"
                    onClick={() => connectRos()}
                    disabled={rosConnecting || rosConnected || readOnly}
                  >
                    <Bot className="mr-1 h-3 w-3" />
                    {rosConnecting ? (
                      "Connecting..."
                    ) : rosConnected ? (
                      <div className="flex items-center gap-1.5">
                        <span>Connected</span>
                        <CheckCircle2 className="h-3 w-3" />
                      </div>
                    ) : (
                      "Connect to NAO6"
                    )}
                  </Button>
                ) : (
                  <Button
                    size="sm"
                    variant="outline"
                    className="w-full text-xs"
                    onClick={() => disconnectRos()}
                    disabled={readOnly}
                  >
                    <PowerOff className="mr-1 h-3 w-3" />
                    Disconnect
                  </Button>
                )}
              </div>

              {rosError && (
                <Alert variant="destructive" className="mt-2">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription className="text-xs">
                    {rosError}
                  </AlertDescription>
                </Alert>
              )}

              {!rosConnected && !rosConnecting && (
                <div className="mt-4">
                  <Alert>
                    <AlertCircle className="h-4 w-4" />
                    <AlertDescription className="text-xs">
                      Connect to ROS bridge for live robot monitoring and
                      control.
                    </AlertDescription>
                  </Alert>
                </div>
              )}
            </div>

            <Separator />

            {/* Autonomous Life Toggle */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label
                  htmlFor="autonomous-life"
                  className="text-muted-foreground text-xs font-normal"
                >
                  Autonomous Life
                </Label>
                <Switch
                  id="tour-wizard-autonomous"
                  checked={!!autonomousLife}
                  onCheckedChange={handleAutonomousLifeChange}
                  disabled={!rosConnected || readOnly}
                  className="scale-75"
                />
              </div>
            </div>

            <Separator />

            {/* Robot Actions Panel */}
            {studyId && trialId && onExecuteRobotAction ? (
              <div className={readOnly ? "pointer-events-none opacity-50" : ""}>
                <RobotActionsPanel
                  studyId={studyId}
                  trialId={trialId}
                  onExecuteAction={onExecuteRobotAction}
                />
              </div>
            ) : null}

            <Separator />

            {/* Movement Controls */}
            {rosConnected && (
              <div className="space-y-2">
                <div className="text-sm font-medium">Movement</div>
                <div className="grid grid-cols-3 gap-2">
                  {/* Row 1: Turn Left, Forward, Turn Right */}
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "turn_left", {
                        speed: 0.3,
                      }).catch(console.error);
                    }}
                    disabled={readOnly}
                  >
                    <RotateCcw className="mr-1 h-3 w-3" /> Turn L
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "walk_forward", {
                        speed: 0.5,
                      }).catch(console.error);
                    }}
                    disabled={readOnly}
                  >
                    <ArrowUp className="mr-1 h-3 w-3" /> Forward
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "turn_right", {
                        speed: 0.3,
                      }).catch(console.error);
                    }}
                    disabled={readOnly}
                  >
                    Turn R <RotateCw className="ml-1 h-3 w-3" />
                  </Button>

                  {/* Row 2: Left, Stop, Right */}
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "strafe_left", {
                        speed: 0.3,
                      }).catch(console.error);
                    }}
                    disabled={readOnly}
                  >
                    <ArrowLeft className="mr-1 h-3 w-3" /> Left
                  </Button>
                  <Button
                    size="sm"
                    variant="destructive"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "emergency_stop", {}).catch(
                        console.error,
                      );
                    }}
                    disabled={readOnly}
                  >
                    <Square className="mr-1 h-3 w-3 fill-current" /> Stop
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "strafe_right", {
                        speed: 0.3,
                      }).catch(console.error);
                    }}
                    disabled={readOnly}
                  >
                    Right <ArrowRight className="ml-1 h-3 w-3" />
                  </Button>

                  {/* Row 3: Empty, Back, Empty */}
                  <div></div>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      executeRosAction("nao6-ros2", "walk_backward", {
                        speed: 0.3,
                      }).catch(console.error);
                    }}
                    disabled={readOnly}
                  >
                    <ArrowDown className="mr-1 h-3 w-3" /> Back
                  </Button>
                  <div></div>
                </div>
              </div>
            )}

            <Separator />

            {/* Quick Actions */}
            {rosConnected && (
              <div className="space-y-2">
                <div className="text-sm font-medium">Quick Actions</div>

                {/* TTS Input */}
                <div className="flex gap-2">
                  <input
                    type="text"
                    placeholder="Type text to speak..."
                    className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex-1 rounded-md border px-2 py-1 text-xs focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
                    disabled={readOnly}
                    onKeyDown={(e) => {
                      if (
                        e.key === "Enter" &&
                        e.currentTarget.value.trim() &&
                        !readOnly
                      ) {
                        executeRosAction("nao6-ros2", "say_text", {
                          text: e.currentTarget.value.trim(),
                        }).catch(console.error);
                        e.currentTarget.value = "";
                      }
                    }}
                  />
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={(e) => {
                      const input = e.currentTarget
                        .previousElementSibling as HTMLInputElement;
                      if (input?.value.trim()) {
                        executeRosAction("nao6-ros2", "say_text", {
                          text: input.value.trim(),
                        }).catch(console.error);
                        input.value = "";
                      }
                    }}
                    disabled={readOnly}
                  >
                    Say
                  </Button>
                </div>

                {/* Preset Actions */}
                <div className="grid grid-cols-2 gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      if (rosConnected) {
                        executeRosAction("nao6-ros2", "say_text", {
                          text: "Hello! I am NAO!",
                        }).catch(console.error);
                      }
                    }}
                    disabled={readOnly}
                  >
                    Say Hello
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-xs"
                    onClick={() => {
                      if (rosConnected) {
                        executeRosAction("nao6-ros2", "say_text", {
                          text: "I am ready!",
                        }).catch(console.error);
                      }
                    }}
                    disabled={readOnly}
                  >
                    Say Ready
                  </Button>
                </div>
              </div>
            )}
          </div>
        </ScrollArea>
      </div>
    </div>
  );
};

export { WizardMonitoringPanel };
