'use client'

import { Category } from '@/lib/types'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Edit2, Trash2, Cloud, Utensils, HardDrive, Package, ArrowUpDown } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { deleteCategory } from '@/lib/actions/products'
import { useState, useEffect } from 'react'
import { CategoryDialog } from './category-dialog'

export function CategoryList({ initialCategories }: { initialCategories: Category[] }) {
  const [categories, setCategories] = useState(initialCategories)

  useEffect(() => {
    setCategories(initialCategories)
  }, [initialCategories])

  const handleDelete = async (id: string) => {
    if (confirm('Möchten Sie diese Kategorie wirklich löschen? Alle zugehörigen Produkte werden nicht mehr dieser Kategorie zugeordnet sein.')) {
      await deleteCategory(id)
      setCategories(categories.filter(c => c.id !== id))
    }
  }

  const getIcon = (name?: string | null) => {
    switch (name) {
      case 'Cloud': return <Cloud className="w-4 h-4" />
      case 'Utensils': return <Utensils className="w-4 h-4" />
      case 'HardDrive': return <HardDrive className="w-4 h-4" />
      default: return <Package className="w-4 h-4" />
    }
  }

  return (
    <Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
      <CardHeader>
        <CardTitle>Kategorienübersicht</CardTitle>
        <CardDescription className="text-slate-500 dark:text-slate-400">
          Verwalten Sie die Hauptkategorien für Ihre Produkte.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
              <TableHead className="text-slate-700 dark:text-white font-bold w-10">Icon</TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold">Beschreibung</TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold w-28">
                <span className="flex items-center gap-1">
                  <ArrowUpDown className="w-3 h-3" /> Reihenfolge
                </span>
              </TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold w-24">Typ</TableHead>
              <TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {categories.map((category) => (
              <TableRow key={category.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                <TableCell>
                  <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                    {getIcon(category.icon)}
                  </div>
                </TableCell>
                <TableCell className="font-medium text-slate-900 dark:text-white">{category.name}</TableCell>
                <TableCell className="text-slate-700 dark:text-slate-300">{category.description}</TableCell>
                <TableCell>
                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/20 text-primary text-sm font-bold">
                    {category.sort_order}
                  </span>
                </TableCell>
                <TableCell>
                  {category.is_required ? (
                    <Badge className="bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
                  ) : (
                    <Badge variant="outline" className="border-slate-200 dark:border-white/20 text-slate-500 dark:text-slate-400 whitespace-nowrap">Optional</Badge>
                  )}
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <CategoryDialog category={category}>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                        <Edit2 className="h-4 w-4" />
                      </Button>
                    </CategoryDialog>
                    <Button 
                      variant="ghost" 
                      size="icon" 
                      className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                      onClick={() => handleDelete(category.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
            {categories.length === 0 && (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-10 text-slate-500 dark:text-slate-400">
                  Keine Kategorien gefunden.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
