import { isLiquidGlassSupported, LiquidGlassView } from "@callstack/liquid-glass";
import type { ComposerTriggerKind } from "@t3tools/shared/composerTrigger";
import type { ServerProviderSkill, ServerProviderSlashCommand } from "@t3tools/contracts";
import { SymbolView } from "expo-symbols";
import { memo } from "react";
import { Pressable, ScrollView, useColorScheme, View, type ViewStyle } from "react-native";

import { AppText as Text } from "../../components/AppText";
import { PierreEntryIcon } from "../../components/PierreEntryIcon";
export type ComposerCommandItem =
  | {
      readonly id: string;
      readonly type: "path";
      readonly path: string;
      readonly kind: "file" | "directory";
      readonly label: string;
      readonly description: string;
    }
  | {
      readonly id: string;
      readonly type: "slash-command";
      readonly command: string;
      readonly label: string;
      readonly description: string;
    }
  | {
      readonly id: string;
      readonly type: "provider-slash-command";
      readonly command: ServerProviderSlashCommand;
      readonly label: string;
      readonly description: string;
    }
  | {
      readonly id: string;
      readonly type: "skill";
      readonly skill: ServerProviderSkill;
      readonly label: string;
      readonly description: string;
    };

interface ComposerCommandPopoverProps {
  readonly items: ReadonlyArray<ComposerCommandItem>;
  readonly triggerKind: ComposerTriggerKind | null;
  readonly isLoading: boolean;
  readonly onSelect: (item: ComposerCommandItem) => void;
}

function PopoverSurface(props: {
  readonly children: React.ReactNode;
  readonly isDarkMode: boolean;
  readonly style?: ViewStyle;
}) {
  const baseStyle: ViewStyle = {
    borderRadius: 16,
    overflow: "hidden",
    ...props.style,
  };

  if (isLiquidGlassSupported) {
    return (
      <LiquidGlassView
        effect="clear"
        interactive={false}
        tintColor={props.isDarkMode ? "rgba(30,30,32,0.95)" : "rgba(255,255,255,0.92)"}
        colorScheme={props.isDarkMode ? "dark" : "light"}
        style={baseStyle}
      >
        {props.children}
      </LiquidGlassView>
    );
  }

  return (
    <View
      style={[
        baseStyle,
        {
          backgroundColor: props.isDarkMode ? "rgba(44,44,46,0.96)" : "rgba(255,255,255,0.96)",
          borderWidth: 1,
          borderColor: props.isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
        },
      ]}
    >
      {props.children}
    </View>
  );
}

function itemIcon(item: ComposerCommandItem) {
  switch (item.type) {
    case "slash-command":
    case "provider-slash-command":
      return "terminal" as const;
    case "skill":
      return "cube" as const;
    case "path":
      return null;
  }
}

function groupLabel(triggerKind: ComposerTriggerKind | null): string | null {
  switch (triggerKind) {
    case "slash-command":
      return "Commands";
    case "skill":
      return "Skills";
    case "path":
      return "Files";
    default:
      return null;
  }
}

function emptyText(triggerKind: ComposerTriggerKind | null, isLoading: boolean): string {
  if (isLoading) {
    return triggerKind === "path" ? "Searching files…" : "Loading…";
  }
  switch (triggerKind) {
    case "path":
      return "No matching files or folders.";
    case "skill":
      return "No skills found.";
    case "slash-command":
      return "No matching commands.";
    default:
      return "No results.";
  }
}

const CommandRow = memo(function CommandRow(props: {
  readonly item: ComposerCommandItem;
  readonly onPress: () => void;
  readonly isLast: boolean;
}) {
  const iconName = itemIcon(props.item);
  const iconColor = "#a1a1aa";

  return (
    <Pressable
      onPress={props.onPress}
      style={({ pressed }) => ({
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 14,
        paddingVertical: 10,
        gap: 10,
        opacity: pressed ? 0.6 : 1,
        borderBottomWidth: props.isLast ? 0 : 0.5,
        borderBottomColor: "rgba(255,255,255,0.1)",
      })}
    >
      {props.item.type === "path" ? (
        <PierreEntryIcon path={props.item.path} kind={props.item.kind} size={16} />
      ) : iconName ? (
        <SymbolView name={iconName} size={14} tintColor={iconColor} type="monochrome" />
      ) : null}
      <Text
        className="text-base font-t3-medium text-foreground"
        numberOfLines={1}
        style={{ flexShrink: 0 }}
      >
        {props.item.label}
      </Text>
      {props.item.description ? (
        <Text
          className="text-xs"
          numberOfLines={1}
          style={{
            flex: 1,
            minWidth: 0,
            color: "#a1a1aa",
          }}
        >
          {props.item.description}
        </Text>
      ) : null}
    </Pressable>
  );
});

export const ComposerCommandPopover = memo(function ComposerCommandPopover(
  props: ComposerCommandPopoverProps,
) {
  const isDarkMode = useColorScheme() === "dark";
  const label = groupLabel(props.triggerKind);

  return (
    <PopoverSurface isDarkMode={isDarkMode}>
      {label ? (
        <View style={{ paddingHorizontal: 14, paddingTop: 10, paddingBottom: 4 }}>
          <Text
            className="text-3xs font-t3-bold text-foreground-muted"
            style={{ letterSpacing: 0.8, textTransform: "uppercase" }}
          >
            {label}
          </Text>
        </View>
      ) : null}
      {props.items.length > 0 ? (
        <ScrollView
          style={{ maxHeight: 180 }}
          keyboardShouldPersistTaps="always"
          showsVerticalScrollIndicator={false}
        >
          {props.items.map((item, index) => (
            <CommandRow
              key={item.id}
              item={item}
              onPress={() => props.onSelect(item)}
              isLast={index === props.items.length - 1}
            />
          ))}
        </ScrollView>
      ) : (
        <View style={{ paddingHorizontal: 14, paddingVertical: 10 }}>
          <Text className="text-xs text-foreground-tertiary">
            {emptyText(props.triggerKind, props.isLoading)}
          </Text>
        </View>
      )}
    </PopoverSurface>
  );
});