users/app/scenarios/new/steps/FriendRequestSettings.tsx

"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export function FriendRequestSettings({ onBack, onNext }: { onBack: () => void; onNext: () => void }) {
  const [enableFriendRequests, setEnableFriendRequests] = useState(false)
  const [requestMessage, setRequestMessage] = useState("")
  const [requestLimit, setRequestLimit] = useState("10")
  const [requestInterval, setRequestInterval] = useState("daily")

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存好友请求设置数据的逻辑
    onNext()
  }

  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-friend-requests" className="flex flex-col space-y-1">
              <span>启用好友请求</span>
              <span className="font-normal text-sm text-muted-foreground">启用后将允许系统自动发送好友请求</span>
            </Label>
            <Switch
              id="enable-friend-requests"
              checked={enableFriendRequests}
              onCheckedChange={setEnableFriendRequests}
            />
          </div>

          {enableFriendRequests && (
            <>
              <div className="space-y-2">
                <Label htmlFor="request-message">请求消息</Label>
                <Textarea
                  id="request-message"
                  value={requestMessage}
                  onChange={(e) => setRequestMessage(e.target.value)}
                  placeholder="请输入好友请求附带的消息"
                  rows={3}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="request-limit">请求限制</Label>
                  <Input
                    id="request-limit"
                    type="number"
                    min="1"
                    value={requestLimit}
                    onChange={(e) => setRequestLimit(e.target.value)}
                    placeholder="请求数量上限"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="request-interval">请求频率</Label>
                  <Select value={requestInterval} onValueChange={setRequestInterval}>
                    <SelectTrigger id="request-interval">
                      <SelectValue placeholder="选择请求频率" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hourly">每小时</SelectItem>
                      <SelectItem value="daily">每天</SelectItem>
                      <SelectItem value="weekly">每周</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button" onClick={onBack}>
            上一步
          </Button>
          <Button type="submit">下一步</Button>
        </CardFooter>
      </form>
    </Card>
  )
}