"use client";

import { cn } from "@/lib/utils";
import { CheckCircle2 } from "lucide-react";
import { GoogleMeetIcon, MicrosoftTeamsIcon, ZoomIcon, JitsiIcon } from "@/components/ui/platform-icons";

export type Platform = "google_meet" | "teams" | "zoom" | "jitsi";

interface PlatformConfig {
  id: Platform;
  name: string;
  description: string;
  placeholder: string;
  urlHint: string;
  available: boolean;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  accentColor: string;
  borderColor: string;
  selectedBg: string;
  badgeColor: string;
}

export const PLATFORMS: PlatformConfig[] = [
  {
    id: "google_meet",
    name: "Google Meet",
    description: "Join via Google Meet link",
    placeholder: "https://meet.google.com/xxx-xxxx-xxx",
    urlHint: "Format: meet.google.com/xxx-xxxx-xxx",
    available: true,
    icon: GoogleMeetIcon,
    accentColor: "text-emerald-600 dark:text-emerald-400",
    borderColor: "border-emerald-500 dark:border-emerald-500",
    selectedBg: "bg-emerald-50 dark:bg-emerald-950/40",
    badgeColor: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400",
  },
  {
    id: "teams",
    name: "Microsoft Teams",
    description: "Join via Teams meeting link",
    placeholder: "https://teams.live.com/meet/...",
    urlHint: "teams.microsoft.com or teams.live.com",
    available: true,
    icon: MicrosoftTeamsIcon,
    accentColor: "text-indigo-600 dark:text-indigo-400",
    borderColor: "border-indigo-500 dark:border-indigo-500",
    selectedBg: "bg-indigo-50 dark:bg-indigo-950/40",
    badgeColor: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-400",
  },
  {
    id: "zoom",
    name: "Zoom",
    description: "Join via Zoom meeting link",
    placeholder: "https://zoom.us/j/123456789",
    urlHint: "zoom.us/j/... or *.zoom.us/j/...",
    available: true,
    icon: ZoomIcon,
    accentColor: "text-blue-600 dark:text-blue-400",
    borderColor: "border-blue-500 dark:border-blue-500",
    selectedBg: "bg-blue-50 dark:bg-blue-950/40",
    badgeColor: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400",
  },
  {
    id: "jitsi",
    name: "Jitsi",
    description: "Join via Jitsi meeting link",
    placeholder: "https://meet.jit.si/your-room-name",
    urlHint: "Format: meet.jit.si/room or custom Jitsi server",
    available: false,
    icon: JitsiIcon,
    accentColor: "text-sky-600 dark:text-sky-400",
    borderColor: "border-sky-500 dark:border-sky-500",
    selectedBg: "bg-sky-50 dark:bg-sky-950/40",
    badgeColor: "bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-400",
  },
];

interface PlatformSelectorProps {
  value: Platform;
  onChange: (platform: Platform) => void;
}

export function PlatformSelector({ value, onChange }: PlatformSelectorProps) {
  return (
    <div className="space-y-2">
      <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
        Select Platform
      </p>
      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
        {PLATFORMS.map((platform) => {
          const Icon = platform.icon;
          const isSelected = value === platform.id;
          const isDisabled = !platform.available;

          return (
            <button
              key={platform.id}
              type="button"
              disabled={isDisabled}
              onClick={() => !isDisabled && onChange(platform.id)}
              className={cn(
                "relative flex flex-col items-center gap-2 rounded-xl border-2 p-3 text-center transition-all duration-150",
                isSelected
                  ? cn("border-2", platform.borderColor, platform.selectedBg, "shadow-sm")
                  : isDisabled
                  ? "border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/30 cursor-not-allowed opacity-60"
                  : "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
              )}
            >
              {/* Selected checkmark */}
              {isSelected && (
                <span className="absolute -top-1.5 -right-1.5">
                  <CheckCircle2 className={cn("h-4 w-4", platform.accentColor, "bg-white dark:bg-gray-900 rounded-full")} />
                </span>
              )}

              {/* Coming soon badge */}
              {isDisabled && (
                <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-gray-200 dark:bg-gray-700 px-2 py-0.5 text-[9px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                  Soon
                </span>
              )}

              <Icon size={28} />

              <div className="space-y-0.5">
                <p className={cn(
                  "text-xs font-semibold leading-tight",
                  isSelected ? platform.accentColor : "text-gray-700 dark:text-gray-300"
                )}>
                  {platform.name}
                </p>
              </div>

              {/* Active indicator dot */}
              {platform.available && (
                <span className={cn(
                  "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-medium",
                  isSelected ? platform.badgeColor : "bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500"
                )}>
                  <span className={cn(
                    "h-1 w-1 rounded-full",
                    isSelected ? "bg-current" : "bg-gray-300 dark:bg-gray-600"
                  )} />
                  {isSelected ? "Selected" : "Available"}
                </span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// Helper to get platform config by id
export function getPlatform(id: Platform): PlatformConfig {
  return PLATFORMS.find((p) => p.id === id) ?? PLATFORMS[0];
}