keeppay/components/waiter-dialog.tsx

'use client'

import { useState, useEffect } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Edit2, Trash2, Plus } from 'lucide-react'
import { WaiterForm } from './waiter-form'
import type { Waiter, CreateWaiterInput, UpdateWaiterInput } from '@/lib/types'
import { getWaiters, createWaiter, updateWaiter, deleteWaiter } from '@/lib/mock-data'

export function WaiterDialog() {
    const [open, setOpen] = useState(false)
    const [waiters, setWaiters] = useState<Waiter[]>([])
    const [editingWaiter, setEditingWaiter] = useState<Waiter | null>(null)
    const [showForm, setShowForm] = useState(false)

    useEffect(() => {
        if (open) {
            setWaiters(getWaiters())
        }
    }, [open])

    const refresh = () => {
        setWaiters(getWaiters())
    }

    const handleSave = (input: CreateWaiterInput) => {
        if (editingWaiter) {
            updateWaiter(editingWaiter.id, input as UpdateWaiterInput)
        } else {
            createWaiter(input)
        }
        refresh()
        setShowForm(false)
        setEditingWaiter(null)
    }

    const handleDelete = (id: string) => {
        deleteWaiter(id)
        refresh()
    }

    const handleEdit = (waiter: Waiter) => {
        setEditingWaiter(waiter)
        setShowForm(true)
    }

    return (
        <Dialog
            open={open}
            onOpenChange={(v) => {
                setOpen(v)
                if (!v) setShowForm(false)
            }}
        >
            <DialogTrigger asChild>
                <Button variant="ghost">服务员管理</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[600px]">
                <DialogHeader>
                    <DialogTitle className="flex items-center justify-between">
                        <span>服务员管理</span>
                        {!showForm && (
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    setEditingWaiter(null)
                                    setShowForm(true)
                                }}
                            >
                                <Plus className="h-4 w-4 mr-1" /> 新增
                            </Button>
                        )}
                    </DialogTitle>
                </DialogHeader>
                {showForm ? (
                    <div>
                        <WaiterForm
                            waiter={editingWaiter}
                            onSave={(input) => {
                                handleSave(input)
                                setShowForm(false)
                            }}
                        />
                        <div className="flex justify-end gap-2 mt-4">
                            <Button
                                variant="outline"
                                onClick={() => {
                                    setShowForm(false)
                                    setEditingWaiter(null)
                                }}
                            >
                                返回
                            </Button>
                        </div>
                    </div>
                ) : (
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>姓名</TableHead>
                                <TableHead>擅长领域</TableHead>
                                <TableHead>分成比例</TableHead>
                                <TableHead className="w-[80px]">操作</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {waiters.map((w) => (
                                <TableRow key={w.id}>
                                    <TableCell className="font-medium">{w.name}</TableCell>
                                    <TableCell>{w.specialty}</TableCell>
                                    <TableCell>{w.commissionRate}%</TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-1">
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                className="h-8 w-8"
                                                onClick={() => handleEdit(w)}
                                            >
                                                <Edit2 className="h-4 w-4" />
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                className="h-8 w-8 text-red-500"
                                                onClick={() => handleDelete(w.id)}
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </Button>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                )}
            </DialogContent>
        </Dialog>
    )
}