'use client'

import { Product, 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 { Badge } from '@/components/ui/badge'
import { Edit2, Trash2, Layers } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { deleteProduct } from '@/lib/actions/products'
import { useState, useEffect } from 'react'
import { CreateProductDialog } from './create-product-dialog'

export function ProductList({ initialProducts, categories }: { initialProducts: Product[], categories: Category[] }) {
  const [products, setProducts] = useState(initialProducts)

  useEffect(() => {
    setProducts(initialProducts)
  }, [initialProducts])

  const handleDelete = async (id: string) => {
    if (confirm('Möchten Sie dieses Produkt wirklich löschen?')) {
      await deleteProduct(id)
      setProducts(products.filter(p => p.id !== id))
    }
  }

  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>Produktübersicht</CardTitle>
        <CardDescription className="text-slate-500 dark:text-slate-400">
          Alle konfigurierten Software-Lösungen und Erweiterungen.
        </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">Name</TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold">Basispreis</TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold">Module</TableHead>
              <TableHead className="text-slate-700 dark:text-white font-bold">Status</TableHead>
              <TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {products.map((product) => (
              <TableRow key={product.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                <TableCell className="font-medium text-slate-900 dark:text-white">
                  <div className="flex flex-col gap-1">
                    <div className="flex items-center gap-2">
                      {product.name}
                      {product.category && (
                        <Badge variant="outline" className="text-[10px] uppercase border-primary/30 text-primary py-0 h-4">
                          {product.category.name}
                        </Badge>
                      )}
                      {product.billing_interval === 'monthly' && (
                        <Badge className="text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-500/30 py-0 h-4">Abo/Monat</Badge>
                      )}
                      {product.billing_interval === 'one_time' && (
                        <Badge className="text-[10px] bg-slate-500/20 text-slate-600 dark:text-slate-300 border border-slate-500/30 py-0 h-4">Einmalig</Badge>
                      )}
                    </div>
                    <p className="text-xs text-slate-500 dark:text-slate-400 font-normal">{product.description}</p>
                  </div>
                </TableCell>
                <TableCell className="text-slate-900 dark:text-white font-semibold">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}</TableCell>
                <TableCell>
                  <div className="flex items-center gap-1">
                    <Layers className="w-3 h-3 text-primary" />
                    <span className="text-slate-700 dark:text-slate-200">{product.modules?.length || 0} Module</span>
                  </div>
                </TableCell>
                <TableCell>
                  <Badge variant={product.billing_interval === 'monthly' ? 'default' : 'secondary'}>
                    {product.billing_interval === 'monthly' ? 'Abo/Monat' : 'Einmalig'}
                  </Badge>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <CreateProductDialog categories={categories} product={product}>
                      <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>
                    </CreateProductDialog>
                    <Button 
                      variant="ghost" 
                      size="icon" 
                      className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                      onClick={() => handleDelete(product.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
            {products.length === 0 && (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-10 text-slate-500 dark:text-slate-400">
                  Keine Produkte gefunden. Erstellen Sie Ihr erstes Produkt!
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
