import { Tooltip, TooltipTrigger, TooltipPopup } from "../ui/tooltip";
import { AppleIcon, AndroidIcon } from "../Icons";
import { DeviceHostAvailability } from "../device/DeviceHostAvailability";
import { Spinner } from "../ui/spinner";
import type {
  DevicePlatformAvailability,
  EnvironmentId,
  SshDeviceHostConfig,
} from "@t3tools/contracts";
import * as Cause from "effect/Cause";
import { randomUUID } from "../../lib/utils";
import { useState } from "react";
import { deviceEnvironment, useDeviceState } from "../../state/device";
import { serverEnvironment } from "../../state/server";
import { useAtomCommand } from "../../state/use-atom-command";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { MoreVertical, PlusIcon } from "lucide-react";
import { Menu, MenuTrigger, MenuPopup, MenuItem } from "../ui/menu";
import { SettingsRow } from "./settingsLayout";

/** Host names and identity paths belong to the selected environment, never all environments. */
export function DeviceHostsSettings(props: {
  environmentId: EnvironmentId | null;
  hosts: ReadonlyArray<SshDeviceHostConfig>;
}) {
  const update = useAtomCommand(serverEnvironment.updateSettings);
  const test = useAtomCommand(deviceEnvironment.testHost, { reportFailure: false });
  const { state } = useDeviceState(props.environmentId);
  const [editing, setEditing] = useState<SshDeviceHostConfig | null>(null);
  const [busy, setBusy] = useState(false);
  const validPort = (port: number | undefined) =>
    port === undefined || (Number.isInteger(port) && port >= 1 && port <= 65535);
  const [checks, setChecks] = useState<
    Record<
      string,
      { pending?: boolean; platforms?: ReadonlyArray<DevicePlatformAvailability>; error?: string }
    >
  >({});
  const setCheck = (id: string, value: (typeof checks)[string]) =>
    setChecks((current) => ({ ...current, [id]: value }));
  const save = async (hosts: ReadonlyArray<SshDeviceHostConfig>) => {
    if (!props.environmentId) return;
    setBusy(true);
    try {
      const saved = await update({
        environmentId: props.environmentId,
        input: { patch: { deviceHosts: hosts } },
      });
      if (saved._tag === "Success") {
        setEditing(null);
      }
    } finally {
      setBusy(false);
    }
  };
  const testConnection = async (host: SshDeviceHostConfig) => {
    if (!props.environmentId || checks[host.id]?.pending) return;
    setCheck(host.id, { pending: true });
    try {
      const summary = await test({ environmentId: props.environmentId, input: host });
      setCheck(
        host.id,
        summary._tag === "Failure"
          ? { error: Cause.pretty(summary.cause) }
          : { platforms: summary.value.platforms },
      );
    } catch (error) {
      setCheck(host.id, { error: error instanceof Error ? error.message : String(error) });
    }
  };
  return (
    <SettingsRow
      id="device-hosts"
      title="Device hosts"
      description="Add remote machines with simulator or emulator runtimes installed, and this environment will connect over SSH and set up device tools automatically."
      control={
        <Button
          size="sm"
          variant="outline"
          disabled={busy || !props.environmentId || editing !== null}
          onClick={() => {
            setEditing({ id: randomUUID(), label: "", target: "" });
          }}
        >
          <PlusIcon className="size-3.5" /> Add host
        </Button>
      }
    >
      <div className="pt-3 pb-2">
        {!props.environmentId ? (
          <p className="text-sm text-muted-foreground">
            Select one connected environment to manage its device hosts.
          </p>
        ) : (
          <>
            {props.hosts.map((host) => {
              const status = state.hostStatuses[host.id];
              const check = checks[host.id];
              const platforms =
                check?.platforms ??
                state.hosts.find((value) => value.id === host.id)?.platforms ??
                [];
              const progress = check?.pending
                ? "Checking connection…"
                : status?.status === "installing"
                  ? "Installing device support…"
                  : status?.status === "starting"
                    ? "Connecting…"
                    : null;
              const error =
                check?.error ?? (status?.status === "failed" ? status.detail : undefined);
              return (
                <div
                  key={host.id}
                  className="flex items-center gap-2 border-t border-border/50 py-2.5"
                >
                  <div className="min-w-0 flex-1">
                    <div className="flex min-w-0 items-center gap-2">
                      <p className="truncate text-sm font-medium">{host.label}</p>
                      {platforms
                        .filter((platform) => platform.available)
                        .map((platform) => (
                          <Tooltip key={platform.platform}>
                            <TooltipTrigger
                              render={
                                <span
                                  tabIndex={0}
                                  role="img"
                                  aria-label={
                                    platform.platform === "ios"
                                      ? "iOS available"
                                      : "Android available"
                                  }
                                  className="shrink-0 text-muted-foreground"
                                />
                              }
                            >
                              {platform.platform === "ios" ? (
                                <AppleIcon className="size-3.5" />
                              ) : (
                                <AndroidIcon className="size-3.5" />
                              )}
                            </TooltipTrigger>
                            <TooltipPopup>
                              {platform.platform === "ios" ? "iOS available" : "Android available"}
                            </TooltipPopup>
                          </Tooltip>
                        ))}
                    </div>
                    <p className="truncate text-xs text-muted-foreground">{host.target}</p>
                    {error ? (
                      <div className="mt-1" role="status">
                        <details className="text-xs text-destructive">
                          <summary>Connection failed</summary>
                          <p className="mt-1 whitespace-pre-wrap break-words">{error}</p>
                        </details>
                      </div>
                    ) : null}
                  </div>
                  {progress ? (
                    <span
                      role="status"
                      className="inline-flex items-center gap-1.5 text-xs text-muted-foreground"
                    >
                      <Spinner className="size-3" />
                      {progress}
                    </span>
                  ) : null}
                  <Menu>
                    <MenuTrigger
                      render={
                        <Button
                          size="icon-sm"
                          variant="ghost-muted"
                          disabled={busy}
                          aria-label={host.label + " options"}
                        />
                      }
                    >
                      <MoreVertical />
                    </MenuTrigger>
                    <MenuPopup align="end">
                      <MenuItem
                        onClick={() => {
                          setEditing(host);
                        }}
                      >
                        Edit
                      </MenuItem>
                      <MenuItem
                        variant="destructive"
                        onClick={() =>
                          void save(props.hosts.filter((value) => value.id !== host.id))
                        }
                      >
                        Remove
                      </MenuItem>
                    </MenuPopup>
                  </Menu>
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={busy || progress !== null}
                    onClick={() => void testConnection(host)}
                  >
                    Test connection
                  </Button>
                </div>
              );
            })}
            {editing ? (
              <form
                className="space-y-3 border-t border-border/50 py-3"
                onSubmit={(event) => {
                  event.preventDefault();
                  void save([...props.hosts.filter((host) => host.id !== editing.id), editing]);
                }}
              >
                <label className="block space-y-1 text-sm">
                  <span>Name</span>
                  <Input
                    required
                    value={editing.label}
                    disabled={busy}
                    onChange={(event) => setEditing({ ...editing, label: event.target.value })}
                    placeholder="Mac mini"
                  />
                </label>
                <label className="block space-y-1 text-sm">
                  <span>SSH target</span>
                  <Input
                    required
                    value={editing.target}
                    disabled={busy}
                    onChange={(event) => setEditing({ ...editing, target: event.target.value })}
                    placeholder="user@host or SSH alias"
                  />
                </label>
                <label className="block space-y-1 text-sm">
                  <span>Identity file, optional</span>
                  <Input
                    value={editing.identityFile ?? ""}
                    disabled={busy}
                    onChange={(event) => {
                      const { identityFile: _, ...rest } = editing;
                      setEditing(
                        event.target.value ? { ...rest, identityFile: event.target.value } : rest,
                      );
                    }}
                    placeholder="~/.ssh/id_ed25519"
                  />
                </label>
                <label className="block space-y-1 text-sm">
                  <span>Port, optional</span>
                  <Input
                    type="number"
                    min={1}
                    max={65535}
                    value={editing.port ?? ""}
                    disabled={busy}
                    onChange={(event) => {
                      const { port: _, ...rest } = editing;
                      setEditing(
                        event.target.value ? { ...rest, port: Number(event.target.value) } : rest,
                      );
                    }}
                    placeholder="SSH config default"
                  />
                </label>
                <div className="flex flex-wrap gap-2">
                  <Button
                    size="sm"
                    type="submit"
                    disabled={
                      busy ||
                      !editing.label.trim() ||
                      !editing.target.trim() ||
                      !validPort(editing.port)
                    }
                  >
                    Save host
                  </Button>
                  <Button
                    size="sm"
                    type="button"
                    variant="outline"
                    disabled={
                      busy ||
                      !editing.label.trim() ||
                      !editing.target.trim() ||
                      !validPort(editing.port)
                    }
                    onClick={() => void testConnection(editing)}
                  >
                    Test connection
                  </Button>
                  <Button
                    size="sm"
                    type="button"
                    variant="ghost"
                    disabled={busy}
                    onClick={() => {
                      setEditing(null);
                    }}
                  >
                    Cancel
                  </Button>
                </div>
                {checks[editing.id]?.pending ? (
                  <span
                    role="status"
                    className="inline-flex items-center gap-1.5 text-xs text-muted-foreground"
                  >
                    <Spinner className="size-3" />
                    Checking connection…
                  </span>
                ) : null}
                {checks[editing.id]?.platforms ? (
                  <DeviceHostAvailability platforms={checks[editing.id]?.platforms ?? []} />
                ) : null}
                {checks[editing.id]?.error ? (
                  <p role="alert" className="text-xs text-destructive">
                    {checks[editing.id]?.error}
                  </p>
                ) : null}
              </form>
            ) : null}
          </>
        )}
      </div>
    </SettingsRow>
  );
}