'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Mail } from 'lucide-react'
import { EmailPreviewDialog } from './email-preview-dialog'

interface SendMentorshipWelcomeButtonProps {
  roundId: string
}

export function SendMentorshipWelcomeButton({ roundId }: SendMentorshipWelcomeButtonProps) {
  const [open, setOpen] = useState(false)
  const [customMessage, setCustomMessage] = useState<string | undefined>()

  const preview = trpc.mentor.previewMentorshipWelcome.useQuery(
    { roundId, customNote: customMessage },
    { enabled: open },
  )

  const sendMutation = trpc.mentor.sendMentorshipWelcome.useMutation({
    onSuccess: (data) => {
      toast.success(
        `Sent ${data.sent} email${data.sent !== 1 ? 's' : ''}${data.failed ? ` (${data.failed} failed)` : ''}`,
      )
      setOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-sky-500 hover:-translate-y-0.5 hover:shadow-md transition-all text-left w-full"
      >
        <Mail className="h-5 w-5 text-sky-600 mt-0.5 shrink-0" />
        <div>
          <p className="text-sm font-medium">Send Welcome / Reminder</p>
          <p className="text-xs text-muted-foreground mt-0.5">
            Email all mentors &amp; teams how to use mentorship
          </p>
        </div>
      </button>

      <EmailPreviewDialog
        open={open}
        onOpenChange={setOpen}
        title="Send Mentorship Welcome / Reminder"
        description="Emails every mentor and team member in this round with their assignment and how to use the mentorship features. You can add an optional note below."
        recipientCount={preview.data?.recipientCount ?? 0}
        previewHtml={preview.data?.html}
        isPreviewLoading={preview.isLoading}
        onSend={(msg) => sendMutation.mutate({ roundId, customNote: msg })}
        isSending={sendMutation.isPending}
        onRefreshPreview={(msg) => setCustomMessage(msg)}
      />
    </>
  )
}
