'use client'

import { Loader2, Plus } from 'lucide-react'
import { useState } from 'react'
import { toast } from 'sonner'
import { createCatalogPage } from '@/actions/catalog'
import { createBcPage } from '@/actions/catalog-bc'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useServerAction } from '@/hooks/use-server-action'
import { CATALOG_LAYOUTS } from '@/lib/catalog-layouts'

interface CatalogActionsProps {
  catalogType?: 'normal' | 'bc'
}

export function CatalogActions({ catalogType = 'normal' }: CatalogActionsProps) {
  const { run, isPending } = useServerAction()
  const [open, setOpen] = useState(false)
  const [caption, setCaption] = useState('')
  const [parentId, setParentId] = useState('-1')
  const [pageLayout, setPageLayout] = useState('default_3x3')
  const isBc = catalogType === 'bc'

  function handleCreate() {
    if (!caption.trim()) {
      toast.error('Caption is required')
      return
    }

    const input = {
      caption: caption.trim(),
      parentId: parseInt(parentId, 10),
      pageLayout,
    }

    const fn = isBc ? () => createBcPage(input) : () => createCatalogPage(input)

    run(fn, {
      successMessage: `Catalog page "${caption.trim()}" created.`,
      onSuccess: (data) => {
        setOpen(false)
        setCaption('')
        setParentId('-1')
        if (data.id) {
          window.location.href = isBc
            ? `/admin/catalog/builder-club/${data.id}`
            : `/admin/catalog/${data.id}`
        }
      },
    })
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          New Page
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{isBc ? 'Create Builder Club Page' : 'Create Catalog Page'}</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="caption">Caption</Label>
            <Input
              id="caption"
              value={caption}
              onChange={(e) => setCaption(e.target.value)}
              placeholder="Page name"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="parentId">Parent ID (-1 = root)</Label>
            <Input
              id="parentId"
              type="number"
              value={parentId}
              onChange={(e) => setParentId(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label>Layout</Label>
            <Select value={pageLayout} onValueChange={setPageLayout}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {CATALOG_LAYOUTS.map((layout) => (
                  <SelectItem key={layout} value={layout}>
                    {layout}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <Button onClick={handleCreate} disabled={isPending} className="w-full">
            {isPending ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <Plus className="mr-2 h-4 w-4" />
            )}
            Create Page
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}