import { Switch } from "~/components/ui/switch";
import { Label } from "~/components/ui/label";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
import type { NotificationMode } from "~/hooks/useDraftNotifications";

interface NotificationSettingsProps {
  enabled: boolean;
  onEnabledChange: (enabled: boolean) => void;
  mode: NotificationMode;
  onModeChange: (mode: NotificationMode) => void;
  permissionState: NotificationPermission | "unsupported";
}

export function NotificationSettings({
  enabled,
  onEnabledChange,
  mode,
  onModeChange,
  permissionState,
}: NotificationSettingsProps) {
  if (permissionState === "unsupported") {
    return null;
  }

  return (
    <div>
      <div className="flex items-center justify-between">
        <Label htmlFor="notifications-switch" className="text-sm font-semibold">
          Notifications
        </Label>
        <Switch
          id="notifications-switch"
          checked={enabled}
          onCheckedChange={onEnabledChange}
          disabled={permissionState === "denied"}
        />
      </div>

      {permissionState === "denied" && (
        <p className="text-xs text-muted-foreground mt-2">
          Notifications blocked by browser. Update in browser settings to
          enable.
        </p>
      )}

      {enabled && (
        <RadioGroup
          value={mode}
          onValueChange={(value) => onModeChange(value as NotificationMode)}
          className="space-y-2 mt-3"
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="my_turn" id="notif_my_turn" />
            <Label htmlFor="notif_my_turn" className="text-sm cursor-pointer">
              My Turn Only
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="all_picks" id="notif_all_picks" />
            <Label htmlFor="notif_all_picks" className="text-sm cursor-pointer">
              All Picks
            </Label>
          </div>
        </RadioGroup>
      )}
    </div>
  );
}