'use client'

import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'

export type Platform = 'linux' | 'macos'

const PlatformContext = createContext<{
  platform: Platform
  setPlatform: (p: Platform) => void
}>({ platform: 'linux', setPlatform: () => {} })

export function PlatformProvider({ children }: { children: ReactNode }) {
  const [platform, setPlatform] = useState<Platform>('linux')

  useEffect(() => {
    if (navigator.userAgent.includes('Mac')) {
      setPlatform('macos')
    }
  }, [])

  return (
    <PlatformContext.Provider value={{ platform, setPlatform }}>
      {children}
    </PlatformContext.Provider>
  )
}

export function usePlatform() {
  const { platform, setPlatform } = useContext(PlatformContext)
  return [platform, setPlatform] as const
}

export function PlatformToggle() {
  const [platform, setPlatform] = usePlatform()

  return (
    <div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5 shrink-0 self-start">
      <button
        onClick={() => setPlatform('linux')}
        className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
          platform === 'linux'
            ? 'bg-primary text-primary-foreground shadow-sm'
            : 'text-muted-foreground hover:text-foreground'
        }`}
      >
        Linux
      </button>
      <button
        onClick={() => setPlatform('macos')}
        className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
          platform === 'macos'
            ? 'bg-primary text-primary-foreground shadow-sm'
            : 'text-muted-foreground hover:text-foreground'
        }`}
      >
        macOS
      </button>
    </div>
  )
}