'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 { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Plus, Pencil, Trash2 } from 'lucide-react'
import { toast } from 'sonner'

const DIETARY_TAGS = ['VEGETARIAN', 'VEGAN', 'GLUTEN_FREE', 'PESCATARIAN'] as const
type DietaryTag = (typeof DIETARY_TAGS)[number]

function formatTag(tag: string): string {
  return tag.replace('_', ' ').toLowerCase()
}

export function LunchDishes({
  programId,
  lunchEventId,
}: {
  programId: string
  lunchEventId: string
}) {
  const utils = trpc.useUtils()
  const { data: dishes } = trpc.lunch.listDishes.useQuery({ lunchEventId })

  const invalidateAll = () => {
    utils.lunch.listDishes.invalidate({ lunchEventId })
    utils.lunch.getManifest.invalidate({ programId })
  }

  const create = trpc.lunch.createDish.useMutation({
    onSuccess: invalidateAll,
    onError: (e) => toast.error(e.message),
  })
  const update = trpc.lunch.updateDish.useMutation({
    onSuccess: invalidateAll,
    onError: (e) => toast.error(e.message),
  })
  const del = trpc.lunch.deleteDish.useMutation({
    onSuccess: invalidateAll,
    onError: (e) => toast.error(e.message),
  })

  const [newName, setNewName] = useState('')
  const [newTags, setNewTags] = useState<DietaryTag[]>([])

  return (
    <Card>
      <CardHeader>
        <CardTitle>Dishes</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {dishes && dishes.length === 0 && (
          <p className="text-muted-foreground text-sm">
            Add at least one dish to open picks.
          </p>
        )}
        <ul className="space-y-2">
          {dishes?.map((d) => (
            <li
              key={d.id}
              className="flex items-center gap-3 rounded-md border p-3"
            >
              <span className="font-medium">{d.name}</span>
              <div className="flex gap-1">
                {d.dietaryTags.map((t) => (
                  <Badge key={t} variant="outline">
                    {formatTag(t)}
                  </Badge>
                ))}
              </div>
              <div className="ml-auto flex gap-2">
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => {
                    const name = prompt('Edit dish name', d.name)
                    if (name && name !== d.name) {
                      update.mutate({ dishId: d.id, name })
                    }
                  }}
                >
                  <Pencil className="h-4 w-4" />
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => {
                    if (
                      confirm(
                        `Delete "${d.name}"? Existing picks will go back to "not picked".`,
                      )
                    ) {
                      del.mutate({ dishId: d.id })
                    }
                  }}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            </li>
          ))}
        </ul>

        <div className="flex flex-wrap items-center gap-2 border-t pt-4">
          <Input
            placeholder="New dish name"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            className="max-w-xs"
          />
          <div className="flex flex-wrap gap-1">
            {DIETARY_TAGS.map((t) => (
              <Button
                key={t}
                size="sm"
                variant={newTags.includes(t) ? 'default' : 'outline'}
                type="button"
                onClick={() =>
                  setNewTags(
                    newTags.includes(t)
                      ? newTags.filter((x) => x !== t)
                      : [...newTags, t],
                  )
                }
              >
                {formatTag(t)}
              </Button>
            ))}
          </div>
          <Button
            disabled={!newName.trim() || create.isPending}
            onClick={() => {
              if (!newName.trim()) return
              create.mutate(
                {
                  lunchEventId,
                  name: newName.trim(),
                  dietaryTags: newTags,
                  sortOrder: dishes?.length ?? 0,
                },
                {
                  onSuccess: () => {
                    setNewName('')
                    setNewTags([])
                  },
                },
              )
            }}
          >
            <Plus className="mr-1 h-4 w-4" /> Add
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}