import { DollarSign, Edit, ExternalLink, ListOrdered, Star, Users } from "lucide-react"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { mockShops } from "@/lib/mock-data"

export default function ShopManagementPage() {
  const shop = mockShops[0]

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">店铺管理</h1>
        <Button variant="outline" size="sm" asChild>
          <Link href={`/shop/${shop.id}`}>
            <ExternalLink className="mr-1 h-4 w-4" />
            查看店铺主页
          </Link>
        </Button>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">总订单</CardTitle>
            <ListOrdered className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{shop.totalOrders}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">评分</CardTitle>
            <Star className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{shop.rating}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">签约打手</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{shop.playerCount}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">抽成比例</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {shop.commissionType === "percentage"
                ? `${shop.commissionValue}%`
                : `¥${shop.commissionValue}`}
            </div>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">基本信息</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="shop-name">店铺名称</Label>
            <Input id="shop-name" defaultValue={shop.name} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="shop-desc">店铺简介</Label>
            <Textarea id="shop-desc" defaultValue={shop.description} rows={3} />
          </div>
          <Button>
            <Edit className="mr-1 h-4 w-4" />
            保存修改
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">公告管理</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {shop.announcements.map((announcement) => (
            <div
              key={announcement}
              className="flex items-center justify-between rounded-md border p-3"
            >
              <span className="text-sm">{announcement}</span>
              <Button variant="ghost" size="sm">
                编辑
              </Button>
            </div>
          ))}
          <Separator />
          <Button variant="outline" size="sm">
            添加公告
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">运营设置</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <div className="flex items-center justify-between">
            <span className="text-muted-foreground">派单模式</span>
            <Badge variant="outline">
              {shop.dispatchMode === "manual" ? "手动派单" : "自动派单"}
            </Badge>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-muted-foreground">允许多店挂靠</span>
            <Badge variant={shop.allowMultiShop ? "default" : "secondary"}>
              {shop.allowMultiShop ? "是" : "否"}
            </Badge>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-muted-foreground">允许独立接单</span>
            <Badge variant={shop.allowIndependentOrders ? "default" : "secondary"}>
              {shop.allowIndependentOrders ? "是" : "否"}
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}