import React from "react";
import { StyleSheet, Text, View } from "react-native";

import { sansSemibold } from "@/constants/typography";
import { useColors } from "@/hooks/useColors";

type Tone =
  | "pending"
  | "confirmed"
  | "due"
  | "paid"
  | "failed"
  | "ready"
  | "training"
  | "queued"
  | "processing"
  | "completed";

interface StatusPillProps {
  tone: Tone;
  label?: string;
  small?: boolean;
}

export function StatusPill({ tone, label, small }: StatusPillProps) {
  const colors = useColors();

  const map: Record<Tone, { bg: string; fg: string; text: string }> = {
    pending: { bg: colors.pendingBg, fg: colors.warning, text: "Pending" },
    confirmed: {
      bg: colors.confirmedBg,
      fg: colors.success,
      text: "Confirmed",
    },
    due: { bg: colors.dueBg, fg: colors.primary, text: "Due" },
    paid: { bg: colors.paidBg, fg: colors.textSecondary, text: "Paid" },
    failed: { bg: colors.failedBg, fg: colors.destructive, text: "Failed" },
    ready: { bg: colors.confirmedBg, fg: colors.success, text: "Ready" },
    training: { bg: colors.dueBg, fg: colors.primary, text: "Training" },
    queued: { bg: colors.pendingBg, fg: colors.warning, text: "Queued" },
    processing: {
      bg: colors.dueBg,
      fg: colors.primary,
      text: "Processing",
    },
    completed: {
      bg: colors.confirmedBg,
      fg: colors.success,
      text: "Completed",
    },
  };

  const cfg = map[tone];

  return (
    <View
      style={[
        styles.pill,
        {
          backgroundColor: cfg.bg,
          paddingVertical: small ? 3 : 5,
          paddingHorizontal: small ? 8 : 10,
        },
      ]}
    >
      <View
        style={[
          styles.dot,
          {
            backgroundColor: cfg.fg,
            width: small ? 5 : 6,
            height: small ? 5 : 6,
          },
        ]}
      />
      <Text
        style={{
          color: cfg.fg,
          fontFamily: sansSemibold,
          fontSize: small ? 10 : 11,
          letterSpacing: 0.4,
          textTransform: "uppercase",
        }}
      >
        {label ?? cfg.text}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  pill: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    borderRadius: 999,
    alignSelf: "flex-start",
  },
  dot: {
    borderRadius: 999,
  },
});