"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

export default function QRCodesPage() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-3xl font-bold tracking-tight">二维码管理</h2>
        <p className="text-muted-foreground">管理用于引流和支付的二维码图片。</p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>私域引流码</CardTitle>
            <CardDescription>用于文章底部、个人中心等位置的加群/加好友二维码。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 h-48 bg-slate-50">
              <span className="text-muted-foreground">预览区域</span>
            </div>
            <div className="grid w-full max-w-sm items-center gap-1.5">
              <Label htmlFor="traffic-qr">上传新图片</Label>
              <Input id="traffic-qr" type="file" />
            </div>
            <Button className="w-full">更新引流码</Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>群活码</CardTitle>
            <CardDescription>用于派对活动引流的动态群活码。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
             <div className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 h-48 bg-slate-50">
              <span className="text-muted-foreground">预览区域</span>
            </div>
            <div className="grid w-full max-w-sm items-center gap-1.5">
              <Label htmlFor="group-qr">上传新图片</Label>
              <Input id="group-qr" type="file" />
            </div>
            <div className="grid w-full max-w-sm items-center gap-1.5">
              <Label htmlFor="group-url">活码链接 (可选)</Label>
              <Input id="group-url" placeholder="https://..." defaultValue="https://soul.cn/party" />
            </div>
            <Button className="w-full">更新群活码</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}