'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { LoadingSpinner } from '@/components/ui/loading-spinner'
import { Lock, Globe, Eye, AlertCircle, CheckCircle2 } from 'lucide-react'

interface PermissionToggleProps {
  permissions: 'private' | 'public'
  visibility?: 'under_review' | 'published' | null
  onUpdate: (permissions: 'private' | 'public') => Promise<void>
  disabled?: boolean
  size?: 'sm' | 'md' | 'lg'
  variant?: 'card' | 'inline' | 'compact'
  className?: string
}

export function PermissionToggle({ 
  permissions, 
  visibility,
  onUpdate, 
  disabled = false,
  size = 'md',
  variant = 'card',
  className = ''
}: PermissionToggleProps) {
  const [isLoading, setIsLoading] = useState(false)

  const handleToggle = async () => {
    if (disabled || isLoading) return
    
    try {
      setIsLoading(true)
      const newPermissions = permissions === 'private' ? 'public' : 'private'
      await onUpdate(newPermissions)
    } catch (error) {
      console.error('Failed to update permissions:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const getStatusInfo = () => {
    if (permissions === 'private') {
      return {
        icon: Lock,
        status: 'Private',
        description: 'Only you can see this prompt',
        color: 'text-slate-600 dark:text-slate-400',
        bgColor: 'bg-slate-100 dark:bg-slate-800'
      }
    }
    
    if (permissions === 'public') {
      if (visibility === 'published') {
        return {
          icon: Globe,
          status: 'Published',
          description: 'Visible in the prompt gallery',
          color: 'text-green-600 dark:text-green-400',
          bgColor: 'bg-green-100 dark:bg-green-900/20'
        }
      } else if (visibility === 'under_review') {
        return {
          icon: Eye,
          status: 'Under Review',
          description: 'Pending approval for the gallery',
          color: 'text-amber-600 dark:text-amber-400',
          bgColor: 'bg-amber-100 dark:bg-amber-900/20'
        }
      } else {
        return {
          icon: AlertCircle,
          status: 'Public',
          description: 'Will be reviewed before appearing in gallery',
          color: 'text-blue-600 dark:text-blue-400',
          bgColor: 'bg-blue-100 dark:bg-blue-900/20'
        }
      }
    }

    return {
      icon: Lock,
      status: 'Private',
      description: 'Only you can see this prompt',
      color: 'text-slate-600 dark:text-slate-400',
      bgColor: 'bg-slate-100 dark:bg-slate-800'
    }
  }

  const statusInfo = getStatusInfo()
  const StatusIcon = statusInfo.icon

  if (variant === 'compact') {
    return (
      <Button
        variant="ghost"
        size="sm"
        onClick={handleToggle}
        disabled={disabled || isLoading}
        className={`flex items-center space-x-2 h-8 px-3 ${statusInfo.bgColor} ${statusInfo.color} hover:opacity-80 ${className}`}
        title={`${statusInfo.status}: ${statusInfo.description}`}
      >
        {isLoading ? (
          <LoadingSpinner size="sm" />
        ) : (
          <StatusIcon className="h-3 w-3" />
        )}
        <span className="text-xs font-medium">{statusInfo.status}</span>
      </Button>
    )
  }

  if (variant === 'inline') {
    return (
      <div className={`flex items-center justify-between ${className}`}>
        <div className="flex items-center space-x-3">
          <div className={`p-2 rounded-full ${statusInfo.bgColor}`}>
            <StatusIcon className={`h-4 w-4 ${statusInfo.color}`} />
          </div>
          <div>
            <div className="flex items-center space-x-2">
              <span className="font-medium text-foreground">{statusInfo.status}</span>
              {visibility === 'published' && (
                <CheckCircle2 className="h-4 w-4 text-green-500" />
              )}
            </div>
            <p className="text-sm text-muted-foreground">{statusInfo.description}</p>
          </div>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={handleToggle}
          disabled={disabled || isLoading}
          className="flex items-center space-x-2"
        >
          {isLoading ? (
            <LoadingSpinner size="sm" />
          ) : (
            <>
              {permissions === 'private' ? (
                <Globe className="h-4 w-4" />
              ) : (
                <Lock className="h-4 w-4" />
              )}
              <span>Make {permissions === 'private' ? 'Public' : 'Private'}</span>
            </>
          )}
        </Button>
      </div>
    )
  }

  // Card variant (default)
  return (
    <div className={`bg-card rounded-lg border border-border p-4 ${className}`}>
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center space-x-3">
          <div className={`p-2 rounded-full ${statusInfo.bgColor}`}>
            <StatusIcon className={`h-5 w-5 ${statusInfo.color}`} />
          </div>
          <div>
            <div className="flex items-center space-x-2">
              <h3 className="font-semibold text-foreground">{statusInfo.status}</h3>
              {visibility === 'published' && (
                <CheckCircle2 className="h-4 w-4 text-green-500" />
              )}
            </div>
            <p className="text-sm text-muted-foreground">{statusInfo.description}</p>
          </div>
        </div>
      </div>

      {permissions === 'public' && !visibility && (
        <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
          <div className="flex items-start space-x-2">
            <AlertCircle className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
            <div className="text-sm">
              <p className="text-blue-800 dark:text-blue-200 font-medium mb-1">Awaiting Review</p>
              <p className="text-blue-700 dark:text-blue-300">
                Public prompts are reviewed by our team before appearing in the prompt gallery. 
                This ensures quality and appropriate content for all users.
              </p>
            </div>
          </div>
        </div>
      )}

      <Button
        variant={permissions === 'private' ? 'default' : 'outline'}
        size={size}
        onClick={handleToggle}
        disabled={disabled || isLoading}
        className="w-full flex items-center justify-center space-x-2"
      >
        {isLoading ? (
          <>
            <LoadingSpinner size="sm" />
            <span>Updating...</span>
          </>
        ) : (
          <>
            {permissions === 'private' ? (
              <>
                <Globe className="h-4 w-4" />
                <span>Make Public</span>
              </>
            ) : (
              <>
                <Lock className="h-4 w-4" />
                <span>Make Private</span>
              </>
            )}
          </>
        )}
      </Button>

      {permissions === 'private' && (
        <p className="text-xs text-muted-foreground mt-2 text-center">
          Making this prompt public will submit it for review
        </p>
      )}
    </div>
  )
}