"use client"

import { useState } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Loader2, XCircle, AlertTriangle } from 'lucide-react'

interface RejectDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onReject: (adminNotes: string) => Promise<void>
  title: string
  itemName: string
  itemType: 'feature' | 'template'
}

export function RejectDialog({
  open,
  onOpenChange,
  onReject,
  title,
  itemName,
  itemType
}: RejectDialogProps) {
  const [adminNotes, setAdminNotes] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!adminNotes.trim()) {
      setError('Please provide a reason for rejection')
      return
    }

    try {
      setLoading(true)
      setError(null)
      
      await onReject(adminNotes.trim())
      
      // Reset form and close dialog
      setAdminNotes('')
      onOpenChange(false)
    } catch (error) {
      setError(error instanceof Error ? error.message : `Failed to reject ${itemType}`)
      console.error(`Error rejecting ${itemType}:`, error)
    } finally {
      setLoading(false)
    }
  }

  const handleCancel = () => {
    setAdminNotes('')
    setError(null)
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center text-red-600">
            <XCircle className="h-5 w-5 mr-2" />
            {title}
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
            <p className="text-sm text-red-800">
              You are about to reject: <strong>{itemName}</strong>
            </p>
            <p className="text-xs text-red-600 mt-1">
              This action will mark the {itemType} as rejected and notify the submitter.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="adminNotes">Reason for Rejection *</Label>
              <Textarea
                id="adminNotes"
                value={adminNotes}
                onChange={(e) => setAdminNotes(e.target.value)}
                placeholder={`Explain why this ${itemType} is being rejected...`}
                rows={4}
                required
              />
              <p className="text-xs text-gray-500">
                This message will be visible to the submitter
              </p>
            </div>

            {/* Error Display */}
            {error && (
              <Alert>
                <AlertTriangle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {/* Action Buttons */}
            <div className="flex justify-end space-x-2 pt-2">
              <Button
                type="button"
                variant="outline"
                onClick={handleCancel}
                disabled={loading}
              >
                Cancel
              </Button>
              <Button 
                type="submit" 
                variant="destructive"
                disabled={loading || !adminNotes.trim()}
              >
                {loading ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
                    Rejecting...
                  </>
                ) : (
                  <>
                    <XCircle className="h-4 w-4 mr-2" />
                    Reject {itemType === 'feature' ? 'Feature' : 'Template'}
                  </>
                )}
              </Button>
            </div>
          </form>
        </div>
      </DialogContent>
    </Dialog>
  )
}