"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 { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function MessageSettings({ onBack, onNext }: { onBack: () => void; onNext: () => void }) {
  const [enableMessages, setEnableMessages] = useState(false)
  const [messageType, setMessageType] = useState("text")
  const [messageContent, setMessageContent] = useState("")
  const [messageSchedule, setMessageSchedule] = useState("immediate")
  const [customTime, setCustomTime] = useState("")

  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-messages" className="flex flex-col space-y-1">
              <span>启用消息发送</span>
              <span className="font-normal text-sm text-muted-foreground">启用后将允许系统自动发送消息</span>
            </Label>
            <Switch id="enable-messages" checked={enableMessages} onCheckedChange={setEnableMessages} />
          </div>

          {enableMessages && (
            <>
              <div className="space-y-2">
                <Label>消息类型</Label>
                <Tabs value={messageType} onValueChange={setMessageType}>
                  <TabsList className="grid grid-cols-3">
                    <TabsTrigger value="text">文本消息</TabsTrigger>
                    <TabsTrigger value="image">图片消息</TabsTrigger>
                    <TabsTrigger value="link">链接消息</TabsTrigger>
                  </TabsList>
                  <TabsContent value="text" className="mt-4">
                    <Textarea
                      value={messageContent}
                      onChange={(e) => setMessageContent(e.target.value)}
                      placeholder="请输入文本消息内容"
                      rows={4}
                    />
                  </TabsContent>
                  <TabsContent value="image" className="mt-4">
                    <div className="space-y-4">
                      <Input type="file" accept="image/*" />
                      <Textarea
                        value={messageContent}
                        onChange={(e) => setMessageContent(e.target.value)}
                        placeholder="请输入图片描述（可选）"
                        rows={2}
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="link" className="mt-4 space-y-4">
                    <Input
                      value={messageContent}
                      onChange={(e) => setMessageContent(e.target.value)}
                      placeholder="请输入链接地址"
                    />
                    <Textarea placeholder="请输入链接描述（可选）" rows={2} />
                  </TabsContent>
                </Tabs>
              </div>

              <div className="space-y-4">
                <Label>发送时间</Label>
                <Select value={messageSchedule} onValueChange={setMessageSchedule}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择发送时间" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="immediate">立即发送</SelectItem>
                    <SelectItem value="scheduled">定时发送</SelectItem>
                    <SelectItem value="triggered">触发发送</SelectItem>
                  </SelectContent>
                </Select>

                {messageSchedule === "scheduled" && (
                  <div className="pt-2">
                    <Label htmlFor="custom-time">选择发送时间</Label>
                    <Input
                      id="custom-time"
                      type="datetime-local"
                      value={customTime}
                      onChange={(e) => setCustomTime(e.target.value)}
                      className="mt-2"
                    />
                  </div>
                )}

                {messageSchedule === "triggered" && (
                  <div className="border rounded-md p-4 mt-2">
                    <p className="text-sm text-muted-foreground">触发条件将在下一步配置</p>
                  </div>
                )}
              </div>
            </>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button" onClick={onBack}>
            上一步
          </Button>
          <Button type="submit">下一步</Button>
        </CardFooter>
      </form>
    </Card>
  )
}