"use client";

import { Zap, CalendarClock } from "lucide-react";
import { cn } from "@/lib/utils";

export type MeetingMode = "now" | "scheduled";

interface MeetingModeSelectorProps {
  value: MeetingMode;
  onChange: (mode: MeetingMode) => void;
}

const modes = [
  {
    id: "now" as MeetingMode,
    label: "Join Now",
    description: "Start immediately",
    icon: Zap,
    iconColor: "text-blue-600 dark:text-blue-400",
    selectedBorder: "border-blue-500 dark:border-blue-500",
    selectedBg: "bg-blue-50 dark:bg-blue-950/40",
    selectedLabel: "text-blue-700 dark:text-blue-300",
    selectedDesc: "text-blue-500 dark:text-blue-400",
    iconBg: "bg-blue-100 dark:bg-blue-900/50",
  },
  {
    id: "scheduled" as MeetingMode,
    label: "Schedule",
    description: "Set a future time",
    icon: CalendarClock,
    iconColor: "text-violet-600 dark:text-violet-400",
    selectedBorder: "border-violet-500 dark:border-violet-500",
    selectedBg: "bg-violet-50 dark:bg-violet-950/40",
    selectedLabel: "text-violet-700 dark:text-violet-300",
    selectedDesc: "text-violet-500 dark:text-violet-400",
    iconBg: "bg-violet-100 dark:bg-violet-900/50",
  },
] as const;

export function MeetingModeSelector({ value, onChange }: MeetingModeSelectorProps) {
  return (
    <div className="grid grid-cols-2 gap-2">
      {modes.map((mode) => {
        const Icon = mode.icon;
        const isSelected = value === mode.id;

        return (
          <button
            key={mode.id}
            type="button"
            onClick={() => onChange(mode.id)}
            className={cn(
              "flex items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition-all duration-150",
              isSelected
                ? cn("border-2", mode.selectedBorder, mode.selectedBg, "shadow-sm")
                : "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"
            )}
          >
            <div className={cn(
              "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors",
              isSelected ? mode.iconBg : "bg-gray-100 dark:bg-gray-800"
            )}>
              <Icon className={cn("h-4 w-4", isSelected ? mode.iconColor : "text-gray-400 dark:text-gray-500")} />
            </div>
            <div className="min-w-0">
              <p className={cn(
                "text-sm font-semibold leading-tight",
                isSelected ? mode.selectedLabel : "text-gray-700 dark:text-gray-300"
              )}>
                {mode.label}
              </p>
              <p className={cn(
                "text-xs mt-0.5 leading-tight",
                isSelected ? mode.selectedDesc : "text-gray-400 dark:text-gray-500"
              )}>
                {mode.description}
              </p>
            </div>
          </button>
        );
      })}
    </div>
  );
}