mnemo_cards/mnemo_cards_admin/src/pages/PacksPage.tsx

import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { packsApi } from '@/api/packs'
import type { EditCardPackDto, CardPackPreviewDto, PaginatedResponse } from '@/types/models'
import type { AxiosError } from 'axios'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'
import { ImageUpload } from '@/components/ui/image-upload'
import { PackCardsManager } from '@/components/PackCardsManager'
import { Plus, Search, Edit, Trash2, ChevronLeft, ChevronRight } from 'lucide-react'

export default function PacksPage() {
  const queryClient = useQueryClient()
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState('')
  const [showDisabled, setShowDisabled] = useState(false)
  const [selectedPack, setSelectedPack] = useState<EditCardPackDto | null>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [packToDelete, setPackToDelete] = useState<CardPackPreviewDto | null>(null)

  // Form state
  const [formData, setFormData] = useState({
    title: '',
    subtitle: '',
    description: '',
    color: '',
    enabled: true,
    googlePlayId: '',
    rustoreId: '',
    appStoreId: '',
    price: '',
    order: 0,
    cover: undefined as string | undefined,
  })

  // Card management state
  const [currentCardIds, setCurrentCardIds] = useState<string[]>([])
  const [cardsToAdd, setCardsToAdd] = useState<string[]>([])
  const [cardsToRemove, setCardsToRemove] = useState<string[]>([])

  const limit = 20

  // Fetch packs
  const { data, isLoading, error } = useQuery<PaginatedResponse<CardPackPreviewDto>>({
    queryKey: ['packs', page, search, showDisabled],
    queryFn: () => packsApi.getPacks({ page, limit, search, showDisabled }),
  })

  // Mutations
  const createMutation = useMutation({
    mutationFn: (pack: EditCardPackDto) => packsApi.upsertPack(pack),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['packs'] })
      toast.success('Pack created successfully')
      closeDialog()
    },
    onError: (error: unknown) => {
      const axiosError = error as AxiosError<{ message?: string }>
      toast.error(axiosError.response?.data?.message || 'Failed to create pack')
    },
  })

  const updateMutation = useMutation({
    mutationFn: (pack: EditCardPackDto) => packsApi.upsertPack(pack),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['packs'] })
      toast.success('Pack updated successfully')
      closeDialog()
    },
    onError: (error: unknown) => {
      const axiosError = error as AxiosError<{ message?: string }>
      toast.error(axiosError.response?.data?.message || 'Failed to update pack')
    },
  })

  const deleteMutation = useMutation({
    mutationFn: (packId: string) => packsApi.deletePack(packId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['packs'] })
      toast.success('Pack deleted successfully')
      setIsDeleteDialogOpen(false)
      setPackToDelete(null)
    },
    onError: (error: unknown) => {
      const axiosError = error as AxiosError<{ message?: string }>
      toast.error(axiosError.response?.data?.message || 'Failed to delete pack')
    },
  })

  const openCreateDialog = () => {
    setSelectedPack(null)
    setFormData({
      title: '',
      subtitle: '',
      description: '',
      color: '',
      enabled: true,
      googlePlayId: '',
      rustoreId: '',
      appStoreId: '',
      price: '',
      order: 0,
      cover: undefined,
    })
    setCurrentCardIds([])
    setCardsToAdd([])
    setCardsToRemove([])
    setIsDialogOpen(true)
  }

  const openEditDialog = async (pack: CardPackPreviewDto) => {
    try {
      const fullPack = await packsApi.getPack(pack.id)
      setSelectedPack(fullPack)
      setFormData({
        title: fullPack.title || '',
        subtitle: fullPack.subtitle || '',
        description: fullPack.description || '',
        color: fullPack.color || '',
        enabled: fullPack.enabled ?? true,
        googlePlayId: fullPack.googlePlayId || '',
        rustoreId: fullPack.rustoreId || '',
        appStoreId: fullPack.appStoreId || '',
        price: fullPack.price || '',
        order: fullPack.order || 0,
        cover: fullPack.cover,
      })
      // Initialize current card IDs from addCardIds (which contains all cards in pack)
      const cardIds = fullPack.addCardIds?.map((id) => id.toString()) || []
      setCurrentCardIds(cardIds)
      setCardsToAdd([])
      setCardsToRemove([])
      setIsDialogOpen(true)
    } catch {
      toast.error('Failed to load pack details')
    }
  }

  const closeDialog = () => {
    setIsDialogOpen(false)
    setSelectedPack(null)
    setCurrentCardIds([])
    setCardsToAdd([])
    setCardsToRemove([])
  }

  const handleCardsChange = (addIds: string[], removeIds: string[]) => {
    setCardsToAdd(addIds)
    setCardsToRemove(removeIds)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    if (!formData.title.trim()) {
      toast.error('Title is required')
      return
    }

    const packData: EditCardPackDto = {
      id: selectedPack?.id || '',
      title: formData.title.trim(),
      subtitle: formData.subtitle.trim() || undefined,
      description: formData.description.trim() || undefined,
      color: formData.color.trim() || undefined,
      enabled: formData.enabled,
      googlePlayId: formData.googlePlayId.trim() || undefined,
      rustoreId: formData.rustoreId.trim() || undefined,
      appStoreId: formData.appStoreId.trim() || undefined,
      price: formData.price.trim() || undefined,
      order: formData.order,
      cover: formData.cover || undefined,
      addCardIds: cardsToAdd.length > 0 ? cardsToAdd : undefined,
      removeCardIds: cardsToRemove.length > 0 ? cardsToRemove : undefined,
    }

    if (selectedPack) {
      updateMutation.mutate(packData)
    } else {
      createMutation.mutate(packData)
    }
  }

  const handleDelete = (pack: CardPackPreviewDto) => {
    setPackToDelete(pack)
    setIsDeleteDialogOpen(true)
  }

  const confirmDelete = () => {
    if (packToDelete) {
      deleteMutation.mutate(packToDelete.id)
    }
  }

  const handleSearch = (value: string) => {
    setSearch(value)
    setPage(1) // Reset to first page when searching
  }

  if (error) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Packs Management</h1>
          <p className="text-muted-foreground">Error loading packs</p>
        </div>
        <Card>
          <CardContent className="pt-6">
            <p className="text-red-500">Failed to load packs. Please try again later.</p>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Packs Management</h1>
          <p className="text-muted-foreground">
            View, create, edit and delete card packs
          </p>
        </div>
        <Button onClick={openCreateDialog}>
          <Plus className="mr-2 h-4 w-4" />
          Add Pack
        </Button>
      </div>

      {/* Search and Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <Search className="h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search packs..."
                value={search}
                onChange={(e) => handleSearch(e.target.value)}
                className="max-w-sm"
              />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="showDisabled"
                checked={showDisabled}
                onCheckedChange={(checked) => setShowDisabled(checked as boolean)}
              />
              <Label htmlFor="showDisabled">Show disabled packs</Label>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Packs Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Packs ({data?.total || 0})</CardTitle>
          <CardDescription>
            Manage card packs and their contents
          </CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="text-center py-8">Loading packs...</div>
          ) : (
            <>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>ID</TableHead>
                    <TableHead>Title</TableHead>
                    <TableHead>Cards</TableHead>
                    <TableHead>Enabled</TableHead>
                    <TableHead>Order</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data?.items.map((pack) => (
                    <TableRow key={pack.id}>
                      <TableCell className="font-mono text-sm">{pack.id}</TableCell>
                      <TableCell>
                        <div>
                          <div className="font-medium">{pack.title}</div>
                          {pack.subtitle && (
                            <div className="text-sm text-muted-foreground">{pack.subtitle}</div>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>{pack.cards}</TableCell>
                      <TableCell>
                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                          pack.enabled
                            ? 'bg-green-100 text-green-800'
                            : 'bg-red-100 text-red-800'
                        }`}>
                          {pack.enabled ? 'Enabled' : 'Disabled'}
                        </span>
                      </TableCell>
                      <TableCell>{pack.order ?? 0}</TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => openEditDialog(pack)}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(pack)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>

              {/* Pagination */}
              {data && data.totalPages > 1 && (
                <div className="flex items-center justify-between mt-4">
                  <div className="text-sm text-muted-foreground">
                    Showing {((page - 1) * limit) + 1} to {Math.min(page * limit, data.total)} of {data.total} packs
                  </div>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage(page - 1)}
                      disabled={page <= 1}
                    >
                      <ChevronLeft className="h-4 w-4" />
                      Previous
                    </Button>
                    <span className="text-sm">
                      Page {page} of {data.totalPages}
                    </span>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage(page + 1)}
                      disabled={page >= data.totalPages}
                    >
                      Next
                      <ChevronRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>

      {/* Create/Edit Dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {selectedPack ? 'Edit Pack' : 'Create New Pack'}
            </DialogTitle>
            <DialogDescription>
              {selectedPack ? 'Update the pack information' : 'Add a new pack to the system'}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Title *</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
                    placeholder="Pack title"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="subtitle">Subtitle</Label>
                  <Input
                    id="subtitle"
                    value={formData.subtitle}
                    onChange={(e) => setFormData(prev => ({ ...prev, subtitle: e.target.value }))}
                    placeholder="Pack subtitle"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                  placeholder="Pack description"
                  rows={3}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="color">Color</Label>
                  <Input
                    id="color"
                    value={formData.color}
                    onChange={(e) => setFormData(prev => ({ ...prev, color: e.target.value }))}
                    placeholder="#FF0000"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="order">Order</Label>
                  <Input
                    id="order"
                    type="number"
                    value={formData.order}
                    onChange={(e) => setFormData(prev => ({ ...prev, order: parseInt(e.target.value) || 0 }))}
                    placeholder="0"
                  />
                </div>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="enabled"
                  checked={formData.enabled}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, enabled: checked as boolean }))}
                />
                <Label htmlFor="enabled">Enabled</Label>
              </div>

              <div className="space-y-2">
                <Label>Store IDs</Label>
                <div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="googlePlayId" className="text-xs">Google Play</Label>
                    <Input
                      id="googlePlayId"
                      value={formData.googlePlayId}
                      onChange={(e) => setFormData(prev => ({ ...prev, googlePlayId: e.target.value }))}
                      placeholder="com.example.app"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="rustoreId" className="text-xs">RuStore</Label>
                    <Input
                      id="rustoreId"
                      value={formData.rustoreId}
                      onChange={(e) => setFormData(prev => ({ ...prev, rustoreId: e.target.value }))}
                      placeholder="123456789"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="appStoreId" className="text-xs">App Store</Label>
                    <Input
                      id="appStoreId"
                      value={formData.appStoreId}
                      onChange={(e) => setFormData(prev => ({ ...prev, appStoreId: e.target.value }))}
                      placeholder="1234567890"
                    />
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="price">Price</Label>
                <Input
                  id="price"
                  value={formData.price}
                  onChange={(e) => setFormData(prev => ({ ...prev, price: e.target.value }))}
                  placeholder="Free, $1.99, etc."
                />
              </div>

              <div className="space-y-2">
                <ImageUpload
                  label="Cover Image"
                  value={formData.cover}
                  onChange={(value) => setFormData(prev => ({ ...prev, cover: value }))}
                  disabled={createMutation.isPending || updateMutation.isPending}
                />
              </div>

              {selectedPack && (
                <div className="space-y-2">
                  <PackCardsManager
                    currentCardIds={currentCardIds}
                    onCardsChange={handleCardsChange}
                    disabled={createMutation.isPending || updateMutation.isPending}
                  />
                </div>
              )}
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={closeDialog}>
                Cancel
              </Button>
              <Button type="submit" disabled={createMutation.isPending || updateMutation.isPending}>
                {createMutation.isPending || updateMutation.isPending ? 'Saving...' : (selectedPack ? 'Update' : 'Create')}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Pack</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete the pack "{packToDelete?.title}"? This action cannot be undone and will remove all associated cards.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDelete}
              className="bg-red-600 hover:bg-red-700"
              disabled={deleteMutation.isPending}
            >
              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}