"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ContentPage() {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-3xl font-bold tracking-tight">内容管理</h2>
        <Button>发布新内容</Button>
      </div>

      <Tabs defaultValue="chapters" className="space-y-4">
        <TabsList>
          <TabsTrigger value="chapters">章节管理</TabsTrigger>
          <TabsTrigger value="articles">文章管理</TabsTrigger>
          <TabsTrigger value="hooks">钩子配置</TabsTrigger>
        </TabsList>
        
        <TabsContent value="chapters" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>章节列表</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border p-4 text-center text-muted-foreground">
                暂无章节数据，请连接数据库同步
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="articles" className="space-y-4">
           <Card>
            <CardHeader>
              <CardTitle>文章列表</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border p-4 text-center text-muted-foreground">
                暂无文章数据
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="hooks" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>引流钩子配置</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid w-full max-w-sm items-center gap-1.5">
                <Label htmlFor="hook-chapter">触发章节</Label>
                <Select defaultValue="3">
                  <SelectTrigger id="hook-chapter">
                    <SelectValue placeholder="选择章节" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">第一章</SelectItem>
                    <SelectItem value="2">第二章</SelectItem>
                    <SelectItem value="3">第三章 (默认)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid w-full gap-1.5">
                <Label htmlFor="message">引流文案</Label>
                <Textarea placeholder="输入引导用户加群的文案..." id="message" defaultValue="阅读更多精彩内容，请加入Soul创业实验派对群..." />
              </div>
              <Button>保存配置</Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}