import { SymbolView } from "expo-symbols";
import type { ComponentProps } from "react";
import { Pressable, View } from "react-native";
import { useThemeColor } from "../../../lib/useThemeColor";
import { AppText as Text } from "../../../components/AppText";

/* ─── Shared sheet components ──────────────────────────────────────── */

export function SheetActionButton(props: {
  readonly icon: ComponentProps<typeof SymbolView>["name"];
  readonly label: string;
  readonly disabled?: boolean;
  readonly tone?: "primary" | "secondary" | "danger";
  readonly onPress: () => void;
}) {
  const primaryBg = useThemeColor("--color-primary");
  const primaryFg = useThemeColor("--color-primary-foreground");
  const dangerBg = useThemeColor("--color-danger");
  const dangerBorder = useThemeColor("--color-danger-border");
  const dangerFg = useThemeColor("--color-danger-foreground");
  const secondaryBg = useThemeColor("--color-secondary");
  const secondaryBorder = useThemeColor("--color-secondary-border");
  const secondaryFg = useThemeColor("--color-secondary-foreground");

  const tone = props.tone ?? "secondary";
  const colors =
    tone === "primary"
      ? {
          backgroundColor: primaryBg,
          borderColor: "transparent",
          textColor: primaryFg,
        }
      : tone === "danger"
        ? {
            backgroundColor: dangerBg,
            borderColor: dangerBorder,
            textColor: dangerFg,
          }
        : {
            backgroundColor: secondaryBg,
            borderColor: secondaryBorder,
            textColor: secondaryFg,
          };

  return (
    <Pressable
      className="min-h-[48px] flex-1 flex-row items-center justify-center gap-2 rounded-[18px] px-4 py-3"
      disabled={props.disabled}
      style={{
        backgroundColor: colors.backgroundColor,
        borderWidth: tone === "primary" ? 0 : 1,
        borderColor: colors.borderColor,
        opacity: props.disabled ? 0.45 : 1,
      }}
      onPress={props.onPress}
    >
      <SymbolView name={props.icon} size={16} tintColor={colors.textColor} type="monochrome" />
      <Text
        className="text-[12px] font-t3-bold uppercase"
        style={{ color: colors.textColor, letterSpacing: 0.9 }}
      >
        {props.label}
      </Text>
    </Pressable>
  );
}

export function MetaCard(props: { readonly label: string; readonly value: string }) {
  return (
    <View className="rounded-[18px] border border-border bg-card px-4 py-3">
      <Text
        className="text-foreground-muted text-[11px] font-t3-bold uppercase"
        style={{ letterSpacing: 0.9 }}
      >
        {props.label}
      </Text>
      <Text selectable className="text-foreground text-[13px] font-medium" numberOfLines={1}>
        {props.value}
      </Text>
    </View>
  );
}

export function SheetListRow(props: {
  readonly icon: ComponentProps<typeof SymbolView>["name"];
  readonly title: string;
  readonly subtitle?: string | null;
  readonly disabled?: boolean;
  readonly onPress: () => void;
}) {
  const iconColor = useThemeColor("--color-icon");
  const iconSubtleColor = useThemeColor("--color-icon-subtle");

  return (
    <Pressable
      className="flex-row items-center gap-3 px-1 py-3"
      disabled={props.disabled}
      style={{ opacity: props.disabled ? 0.45 : 1 }}
      onPress={props.onPress}
    >
      <View className="bg-subtle h-9 w-9 items-center justify-center rounded-full">
        <SymbolView name={props.icon} size={16} tintColor={iconColor} type="monochrome" />
      </View>
      <View className="flex-1 gap-0.5">
        <Text className="text-foreground text-[16px] font-t3-bold">{props.title}</Text>
        {props.subtitle ? (
          <Text className="text-foreground-muted text-[12px] leading-[17px]">{props.subtitle}</Text>
        ) : null}
      </View>
      <SymbolView name="chevron.right" size={13} tintColor={iconSubtleColor} type="monochrome" />
    </Pressable>
  );
}

/* ─── Shared utilities ──────────────────────────────────────────────── */

export function menuItemIconName(
  icon: "commit" | "push" | "pr",
): ComponentProps<typeof SymbolView>["name"] {
  if (icon === "commit") return "checkmark.circle";
  if (icon === "push") return "arrow.up.circle";
  return "arrow.up.right.circle";
}

export function statusSummary(
  gitStatus: {
    readonly isRepo?: boolean;
    readonly hasWorkingTreeChanges?: boolean;
    readonly workingTree?: { readonly files: readonly { readonly path: string }[] };
    readonly aheadCount?: number;
    readonly behindCount?: number;
    readonly pr?: { readonly state?: string; readonly number?: number } | null;
  } | null,
): string {
  if (!gitStatus) {
    return "Loading branch status\u2026";
  }

  if (!gitStatus.isRepo) {
    return "Not a git repository";
  }

  const parts: string[] = [];
  if (gitStatus.hasWorkingTreeChanges) {
    const fileCount = gitStatus.workingTree?.files.length ?? 0;
    parts.push(`${fileCount} file${fileCount === 1 ? "" : "s"} changed`);
  } else {
    parts.push("Clean");
  }
  if ((gitStatus.aheadCount ?? 0) > 0) {
    parts.push(`${gitStatus.aheadCount} ahead`);
  }
  if ((gitStatus.behindCount ?? 0) > 0) {
    parts.push(`${gitStatus.behindCount} behind`);
  }
  if (gitStatus.pr?.state === "open") {
    parts.push(`PR #${gitStatus.pr.number} open`);
  }

  return parts.join(" \u00b7 ");
}