import type { Architecture, Environment, Region } from "@/lib/types";

const ARCH_ORDER: Architecture[] = ["dedicated", "nextgen", "serverless", "byoc"];
const ENV_ORDER: Environment[] = ["dev", "staging", "prod"];

export default function SelectedRegionsSummary({
  selectedRegions,
}: {
  selectedRegions: Region[];
}) {
  if (selectedRegions.length === 0) {
    return (
      <div className="bg-surface-1/50 border border-surface-2 rounded-lg px-4 py-2 text-sm text-text-muted">
        No regions selected.
      </div>
    );
  }

  const byArch = selectedRegions.reduce<Record<Architecture, number>>(
    (acc, region) => {
      acc[region.architecture] += 1;
      return acc;
    },
    { dedicated: 0, nextgen: 0, serverless: 0, byoc: 0 }
  );

  const byEnv = selectedRegions.reduce<Record<Environment, number>>(
    (acc, region) => {
      acc[region.environment] += 1;
      return acc;
    },
    { dev: 0, staging: 0, prod: 0 }
  );

  return (
    <div className="bg-accent-muted border border-accent/20 rounded-lg px-4 py-3 space-y-2">
      <div className="flex items-center gap-2 text-sm">
        <span className="text-accent font-semibold">{selectedRegions.length} selected</span>
        <span className="text-text-muted">regions will be updated</span>
      </div>

      <div className="flex flex-wrap gap-2 text-xs">
        {ARCH_ORDER.map((arch) => (
          <span
            key={arch}
            className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-surface-0 border border-surface-2 text-text-secondary"
          >
            <span className="uppercase tracking-wider">{arch}</span>
            <span className="text-text-primary font-medium">{byArch[arch]}</span>
          </span>
        ))}
      </div>

      <div className="flex flex-wrap gap-2 text-xs">
        {ENV_ORDER.map((env) => (
          <span
            key={env}
            className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-surface-0 border border-surface-2 text-text-secondary"
          >
            <span className="uppercase tracking-wider">{env}</span>
            <span className="text-text-primary font-medium">{byEnv[env]}</span>
          </span>
        ))}
      </div>
    </div>
  );
}