import { ReactNode } from "react";

export type ArmKey =
  | "nexus"
  | "corp"
  | "foundation"
  | "gameforge"
  | "labs"
  | "devlink"
  | "staff";

interface ThemeConfig {
  arm: ArmKey;
  primaryColor: string;
  secondaryColor: string;
  accentColor: string;
  bgGradient: string;
  borderColor: string;
  tabsListBg: string;
  headerGradient: string;
  fontFamily?: string;
  fontStyle?: string;
}

const themeConfig: Record<ArmKey, ThemeConfig> = {
  nexus: {
    arm: "nexus",
    primaryColor: "purple",
    secondaryColor: "blue",
    accentColor: "purple-500",
    bgGradient: "from-black via-purple-950/20 to-black",
    borderColor: "purple-500/20",
    tabsListBg: "purple-950/30",
    headerGradient: "from-purple-300 via-blue-300 to-purple-300",
    fontFamily: "font-sans",
  },
  corp: {
    arm: "corp",
    primaryColor: "blue",
    secondaryColor: "cyan",
    accentColor: "blue-500",
    bgGradient: "from-black via-blue-950/20 to-black",
    borderColor: "blue-500/20",
    tabsListBg: "blue-950/30",
    headerGradient: "from-blue-300 via-cyan-300 to-blue-300",
    fontFamily: "font-sans",
  },
  foundation: {
    arm: "foundation",
    primaryColor: "red",
    secondaryColor: "orange",
    accentColor: "red-500",
    bgGradient: "from-black via-red-950/20 to-black",
    borderColor: "red-500/20",
    tabsListBg: "red-950/30",
    headerGradient: "from-red-300 via-orange-300 to-red-300",
    fontFamily: "font-serif",
  },
  gameforge: {
    arm: "gameforge",
    primaryColor: "green",
    secondaryColor: "emerald",
    accentColor: "green-500",
    bgGradient: "from-black via-green-950/20 to-black",
    borderColor: "green-500/20",
    tabsListBg: "green-950/30",
    headerGradient: "from-green-300 to-emerald-300",
    fontFamily: "font-mono",
    fontStyle: "retro",
  },
  labs: {
    arm: "labs",
    primaryColor: "amber",
    secondaryColor: "yellow",
    accentColor: "amber-500",
    bgGradient: "from-black via-amber-950/20 to-black",
    borderColor: "amber-500/20",
    tabsListBg: "amber-950/30",
    headerGradient: "from-amber-300 to-yellow-300",
    fontFamily: "font-mono",
  },
  devlink: {
    arm: "devlink",
    primaryColor: "cyan",
    secondaryColor: "blue",
    accentColor: "cyan-500",
    bgGradient: "from-black via-cyan-950/20 to-black",
    borderColor: "cyan-500/20",
    tabsListBg: "cyan-950/30",
    headerGradient: "from-cyan-300 to-blue-300",
    fontFamily: "font-sans",
  },
  staff: {
    arm: "staff",
    primaryColor: "purple",
    secondaryColor: "pink",
    accentColor: "purple-500",
    bgGradient: "from-black via-purple-950/20 to-black",
    borderColor: "purple-500/20",
    tabsListBg: "purple-950/30",
    headerGradient: "from-purple-300 to-pink-300",
    fontFamily: "font-sans",
  },
};

export function getTheme(arm: ArmKey): ThemeConfig {
  return themeConfig[arm];
}

interface DashboardThemeProviderProps {
  arm: ArmKey;
  children: ReactNode;
}

export function DashboardThemeProvider({
  arm,
  children,
}: DashboardThemeProviderProps) {
  const theme = getTheme(arm);

  return (
    <div
      className={`min-h-screen bg-gradient-to-b ${theme.bgGradient} ${theme.fontFamily}`}
    >
      {children}
    </div>
  );
}

interface DashboardHeaderProps {
  arm: ArmKey;
  title: string;
  subtitle?: string;
}

export function DashboardHeader({
  arm,
  title,
  subtitle,
}: DashboardHeaderProps) {
  const theme = getTheme(arm);

  return (
    <div className="space-y-4 animate-slide-down">
      <div className="space-y-2">
        <h1
          className={`text-5xl md:text-6xl font-bold bg-gradient-to-r ${theme.headerGradient} bg-clip-text text-transparent`}
        >
          {title}
        </h1>
        {subtitle && <p className="text-gray-400 text-lg">{subtitle}</p>}
      </div>
    </div>
  );
}

interface ColorPaletteConfig {
  arm: ArmKey;
  variant?: "default" | "alt";
}

export function getColorClasses(
  arm: ArmKey,
  variant: "default" | "alt" = "default",
) {
  const configs: Record<ArmKey, Record<string, Record<string, string>>> = {
    nexus: {
      default: {
        card: "bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20",
        cardAlt: "from-blue-950/40 to-blue-900/20 border-blue-500/20",
        text: "text-purple-300",
        border: "border-purple-500/20",
        accent: "bg-purple-600 hover:bg-purple-700",
      },
      alt: {
        card: "bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20",
        cardAlt: "from-purple-950/40 to-purple-900/20 border-purple-500/20",
        text: "text-blue-300",
        border: "border-blue-500/20",
        accent: "bg-blue-600 hover:bg-blue-700",
      },
    },
    corp: {
      default: {
        card: "bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20",
        cardAlt: "from-cyan-950/40 to-cyan-900/20 border-cyan-500/20",
        text: "text-blue-300",
        border: "border-blue-500/20",
        accent: "bg-blue-600 hover:bg-blue-700",
      },
      alt: {
        card: "bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20",
        cardAlt: "from-blue-950/40 to-blue-900/20 border-blue-500/20",
        text: "text-cyan-300",
        border: "border-cyan-500/20",
        accent: "bg-cyan-600 hover:bg-cyan-700",
      },
    },
    foundation: {
      default: {
        card: "bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20",
        cardAlt: "from-orange-950/40 to-orange-900/20 border-orange-500/20",
        text: "text-red-300",
        border: "border-red-500/20",
        accent: "bg-red-600 hover:bg-red-700",
      },
      alt: {
        card: "bg-gradient-to-br from-orange-950/40 to-orange-900/20 border-orange-500/20",
        cardAlt: "from-red-950/40 to-red-900/20 border-red-500/20",
        text: "text-orange-300",
        border: "border-orange-500/20",
        accent: "bg-orange-600 hover:bg-orange-700",
      },
    },
    gameforge: {
      default: {
        card: "bg-gradient-to-br from-green-950/40 to-green-900/20 border-green-500/20",
        cardAlt: "from-emerald-950/40 to-emerald-900/20 border-emerald-500/20",
        text: "text-green-300",
        border: "border-green-500/20",
        accent: "bg-green-600 hover:bg-green-700",
      },
      alt: {
        card: "bg-gradient-to-br from-emerald-950/40 to-emerald-900/20 border-emerald-500/20",
        cardAlt: "from-green-950/40 to-green-900/20 border-green-500/20",
        text: "text-emerald-300",
        border: "border-emerald-500/20",
        accent: "bg-emerald-600 hover:bg-emerald-700",
      },
    },
    labs: {
      default: {
        card: "bg-gradient-to-br from-amber-950/40 to-amber-900/20 border-amber-500/20",
        cardAlt: "from-yellow-950/40 to-yellow-900/20 border-yellow-500/20",
        text: "text-amber-300",
        border: "border-amber-500/20",
        accent: "bg-amber-600 hover:bg-amber-700",
      },
      alt: {
        card: "bg-gradient-to-br from-yellow-950/40 to-yellow-900/20 border-yellow-500/20",
        cardAlt: "from-amber-950/40 to-amber-900/20 border-amber-500/20",
        text: "text-yellow-300",
        border: "border-yellow-500/20",
        accent: "bg-yellow-600 hover:bg-yellow-700",
      },
    },
    devlink: {
      default: {
        card: "bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20",
        cardAlt: "from-blue-950/40 to-blue-900/20 border-blue-500/20",
        text: "text-cyan-300",
        border: "border-cyan-500/20",
        accent: "bg-cyan-600 hover:bg-cyan-700",
      },
      alt: {
        card: "bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20",
        cardAlt: "from-cyan-950/40 to-cyan-900/20 border-cyan-500/20",
        text: "text-blue-300",
        border: "border-blue-500/20",
        accent: "bg-blue-600 hover:bg-blue-700",
      },
    },
    staff: {
      default: {
        card: "bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20",
        cardAlt: "from-pink-950/40 to-pink-900/20 border-pink-500/20",
        text: "text-purple-300",
        border: "border-purple-500/20",
        accent: "bg-purple-600 hover:bg-purple-700",
      },
      alt: {
        card: "bg-gradient-to-br from-pink-950/40 to-pink-900/20 border-pink-500/20",
        cardAlt: "from-purple-950/40 to-purple-900/20 border-purple-500/20",
        text: "text-pink-300",
        border: "border-pink-500/20",
        accent: "bg-pink-600 hover:bg-pink-700",
      },
    },
  };

  return configs[arm][variant];
}

export default {
  getTheme,
  getColorClasses,
  DashboardThemeProvider,
  DashboardHeader,
};