'use client'

import { useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  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 { Loader2, Mail, RefreshCw } from 'lucide-react'

interface EmailPreviewDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description: string
  recipientCount: number
  previewHtml: string | undefined
  isPreviewLoading: boolean
  onSend: (customMessage?: string) => void
  isSending: boolean
  showCustomMessage?: boolean
  onRefreshPreview?: (customMessage?: string) => void
  previewOnly?: boolean
}

export function EmailPreviewDialog({
  open,
  onOpenChange,
  title,
  description,
  recipientCount,
  previewHtml,
  isPreviewLoading,
  onSend,
  isSending,
  showCustomMessage = true,
  onRefreshPreview,
  previewOnly = false,
}: EmailPreviewDialogProps) {
  const [customMessage, setCustomMessage] = useState('')

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Mail className="h-5 w-5" />
            {title}
          </DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-hidden grid grid-cols-1 md:grid-cols-2 gap-4 min-h-0">
          {/* Left: Custom message */}
          {showCustomMessage && (
            <div className="space-y-3">
              <Label>Custom Message (optional)</Label>
              <Textarea
                placeholder="Add a personal message to include in the email..."
                value={customMessage}
                onChange={(e) => setCustomMessage(e.target.value)}
                className="min-h-[200px] resize-none"
              />
              {onRefreshPreview && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => onRefreshPreview(customMessage || undefined)}
                  disabled={isPreviewLoading}
                >
                  <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
                  Refresh Preview
                </Button>
              )}
            </div>
          )}

          {/* Right: Email preview */}
          <div className="border rounded-lg overflow-hidden bg-gray-50">
            <div className="px-3 py-1.5 bg-gray-100 border-b text-xs text-muted-foreground font-medium">
              Email Preview
            </div>
            {isPreviewLoading ? (
              <div className="flex items-center justify-center h-[300px]">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              </div>
            ) : previewHtml ? (
              <iframe
                srcDoc={previewHtml}
                sandbox="allow-same-origin"
                className="w-full h-[400px] border-0"
                title="Email Preview"
              />
            ) : (
              <div className="flex items-center justify-center h-[300px] text-sm text-muted-foreground">
                No preview available
              </div>
            )}
          </div>
        </div>

        <DialogFooter className="mt-4">
          {previewOnly ? (
            <Button onClick={() => onOpenChange(false)}>Close</Button>
          ) : (
            <>
              <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSending}>
                Cancel
              </Button>
              <Button
                onClick={() => onSend(customMessage || undefined)}
                disabled={isSending || recipientCount === 0}
              >
                {isSending ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    Sending...
                  </>
                ) : (
                  <>
                    <Mail className="h-4 w-4 mr-2" />
                    Send to {recipientCount} recipient{recipientCount !== 1 ? 's' : ''}
                  </>
                )}
              </Button>
            </>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
