'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import { Send, Eye } from 'lucide-react'
import { toast } from 'sonner'

export function LunchRecapActions({
  programId,
  recapSentAt,
  extraRecipientCount,
}: {
  programId: string
  recapSentAt: Date | null
  extraRecipientCount: number
}) {
  const utils = trpc.useUtils()
  const [previewOpen, setPreviewOpen] = useState(false)

  const send = trpc.lunch.sendRecap.useMutation({
    onSuccess: () => {
      utils.lunch.getEvent.invalidate({ programId })
      toast.success('Recap sent')
    },
    onError: (e) => {
      if (e.data?.code === 'PRECONDITION_FAILED') {
        if (
          confirm(
            "You've already sent a recap. Send updated version to all recipients?",
          )
        ) {
          send.mutate({ programId, forceUpdate: true })
        }
      } else {
        toast.error(e.message)
      }
    },
  })

  const { data: preview, isLoading: loadingPreview } =
    trpc.lunch.getRecapPreview.useQuery(
      { programId },
      { enabled: previewOpen },
    )

  return (
    <Card>
      <CardHeader>
        <CardTitle>Recap</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" onClick={() => setPreviewOpen(true)}>
            <Eye className="mr-2 h-4 w-4" /> Preview recap
          </Button>
          <Button
            onClick={() => send.mutate({ programId })}
            disabled={send.isPending}
          >
            <Send className="mr-2 h-4 w-4" /> Send recap now
          </Button>
        </div>
        <p className="text-muted-foreground text-xs">
          {recapSentAt
            ? `Last sent: ${new Date(recapSentAt).toLocaleString()}. Recipients: edition admins${extraRecipientCount > 0 ? ` + ${extraRecipientCount} extra` : ''}.`
            : 'Recap has not been sent yet.'}
        </p>
      </CardContent>

      <Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Recap preview</DialogTitle>
          </DialogHeader>
          {loadingPreview && (
            <p className="text-muted-foreground text-sm">Loading…</p>
          )}
          {preview && (
            <div className="space-y-4 text-sm">
              <p>
                <strong>
                  {preview.summary.picked}/{preview.summary.total}
                </strong>{' '}
                picked
                {preview.summary.missing > 0
                  ? ` · ${preview.summary.missing} missing`
                  : ''}
              </p>
              {Object.keys(preview.dishCounts).length > 0 && (
                <div>
                  <h4 className="font-medium">Dishes</h4>
                  <ul className="ml-4 list-disc">
                    {Object.entries(preview.dishCounts).map(([n, c]) => (
                      <li key={n}>
                        {c}× {n}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {Object.keys(preview.dietaryCounts).length > 0 && (
                <div>
                  <h4 className="font-medium">Dietary tags</h4>
                  <ul className="ml-4 list-disc">
                    {Object.entries(preview.dietaryCounts).map(([n, c]) => (
                      <li key={n}>
                        {c}× {n.replace('_', ' ').toLowerCase()}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              <div>
                <h4 className="font-medium">Allergens</h4>
                {Object.keys(preview.allergenCounts).length === 0 ? (
                  <p className="text-muted-foreground">None reported.</p>
                ) : (
                  <ul className="ml-4 list-disc">
                    {Object.entries(preview.allergenCounts).map(([n, c]) => (
                      <li key={n}>
                        {c}× {n.replace('_', ' ').toLowerCase()}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setPreviewOpen(false)}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}