"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { X } from "lucide-react"

export function TagSettings({ onBack, onComplete }: { onBack: () => void; onComplete: () => void }) {
  const [enableTags, setEnableTags] = useState(false)
  const [tagInput, setTagInput] = useState("")
  const [tags, setTags] = useState<string[]>([])

  const handleAddTag = () => {
    if (tagInput.trim() && !tags.includes(tagInput.trim())) {
      setTags([...tags, tagInput.trim()])
      setTagInput("")
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault()
      handleAddTag()
    }
  }

  const handleRemoveTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存标签设置数据的逻辑
    onComplete()
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>标签设置</CardTitle>
        <CardDescription>配置场景的用户标签</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <Label htmlFor="enable-tags" className="flex flex-col space-y-1">
              <span>启用用户标签</span>
              <span className="font-normal text-sm text-muted-foreground">启用后将为场景中的用户添加标签</span>
            </Label>
            <Switch id="enable-tags" checked={enableTags} onCheckedChange={setEnableTags} />
          </div>

          {enableTags && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="tag-input">添加标签</Label>
                <div className="flex space-x-2">
                  <Input
                    id="tag-input"
                    value={tagInput}
                    onChange={(e) => setTagInput(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="输入标签名称并按回车"
                  />
                  <Button type="button" onClick={handleAddTag}>
                    添加
                  </Button>
                </div>
              </div>

              <div>
                <Label>已添加标签</Label>
                <div className="flex flex-wrap gap-2 mt-2">
                  {tags.length > 0 ? (
                    tags.map((tag) => (
                      <Badge key={tag} className="px-3 py-1 flex items-center gap-1">
                        {tag}
                        <X className="h-3 w-3 cursor-pointer" onClick={() => handleRemoveTag(tag)} />
                      </Badge>
                    ))
                  ) : (
                    <p className="text-sm text-muted-foreground">暂无标签</p>
                  )}
                </div>
              </div>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button" onClick={onBack}>
            上一步
          </Button>
          <Button type="submit">完成</Button>
        </CardFooter>
      </form>
    </Card>
  )
}
