torqvoice/src/features/email/Components/SendEmailDialog.tsx

'use client'

import { handleGated } from '@/components/upgrade-gate'
import type { GatedFeature } from '@/lib/with-auth'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Loader2, Mail, Send } from 'lucide-react'
import { useGlassModal } from '@/components/glass-modal'
import { AttachPdfOption, useAttachPdf } from '@/features/email/Components/AttachPdfOption'

interface SendEmailDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  defaultEmail?: string
  entityLabel: string
  onSend: (
    email: string,
    message?: string,
    attachPdf?: boolean
  ) => Promise<{ success: boolean; error?: string; gated?: GatedFeature }>
}

export function SendEmailDialog({
  open,
  onOpenChange,
  defaultEmail = '',
  entityLabel,
  onSend,
}: SendEmailDialogProps) {
  const modal = useGlassModal()
  const [sending, setSending] = useState(false)
  const [email, setEmail] = useState(defaultEmail)
  const [message, setMessage] = useState('')
  const [attachPdf, setAttachPdf] = useAttachPdf(open)

  const handleSend = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email) return
    setSending(true)
    const result = await onSend(email, message || undefined, attachPdf)
    if (result.success) {
      modal.open('success', 'Email Sent', `${entityLabel} has been sent to ${email}`)
      onOpenChange(false)
      setMessage('')
    } else if (handleGated(result)) {
      onOpenChange(false)
    } else {
      modal.open('error', 'Error', result.error || 'Failed to send email')
    }
    setSending(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md" aria-describedby={undefined}>
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Mail className="h-5 w-5" />
            Send {entityLabel}
          </DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSend} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Recipient Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="customer@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="message">Message (optional)</Label>
            <Textarea
              id="message"
              placeholder="Add a personal message..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={3}
            />
          </div>
          <AttachPdfOption
            id="attach-pdf-send"
            checked={attachPdf}
            onCheckedChange={setAttachPdf}
          />
          <div className="flex justify-end gap-2">
            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={sending || !email}>
              {sending ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <Send className="mr-2 h-4 w-4" />
              )}
              Send Email
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}