'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Trophy } from 'lucide-react'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { EmailPreviewDialog } from './email-preview-dialog'

interface NotifyAdvancedButtonProps {
  roundId: string
  targetRoundId?: string
}

export function NotifyAdvancedButton({ roundId, targetRoundId }: NotifyAdvancedButtonProps) {
  const [open, setOpen] = useState(false)
  const [customMessage, setCustomMessage] = useState<string | undefined>()
  const [fullCustomBody, setFullCustomBody] = useState(false)

  const preview = trpc.round.previewAdvancementEmail.useQuery(
    { roundId, targetRoundId, customMessage, fullCustomBody },
    { enabled: open }
  )

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

  return (
    <>
      <div className="space-y-2">
        <button
          onClick={() => setOpen(true)}
          className="flex items-start gap-3 p-4 rounded-lg border border-l-4 border-l-emerald-500 hover:-translate-y-0.5 hover:shadow-md transition-all text-left w-full"
        >
          <Trophy className="h-5 w-5 text-emerald-600 mt-0.5 shrink-0" />
          <div>
            <p className="text-sm font-medium">Notify Advanced Teams</p>
            <p className="text-xs text-muted-foreground mt-0.5">
              Send advancement emails to passed projects
            </p>
          </div>
        </button>
        <div className="flex items-center gap-2 px-1">
          <Switch
            id="advancement-full-custom-body"
            checked={fullCustomBody}
            onCheckedChange={setFullCustomBody}
          />
          <Label htmlFor="advancement-full-custom-body" className="text-xs cursor-pointer">
            <span className="font-medium">Full custom body</span>
            <span className="text-muted-foreground ml-1">— only your message is sent (no standard text)</span>
          </Label>
        </div>
      </div>

      <EmailPreviewDialog
        open={open}
        onOpenChange={setOpen}
        title="Notify Advanced Teams"
        description="Send advancement notification emails to project team members"
        recipientCount={preview.data?.recipientCount ?? 0}
        previewHtml={preview.data?.html}
        isPreviewLoading={preview.isLoading}
        onSend={(msg) => sendMutation.mutate({ roundId, targetRoundId, customMessage: msg, fullCustomBody })}
        isSending={sendMutation.isPending}
        onRefreshPreview={(msg) => setCustomMessage(msg)}
      />
    </>
  )
}