"use client"

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 { addShopAnnouncement, deleteShopAnnouncement, updateShop } from "@/lib/api"
import { toApiError } from "@/lib/errors"
import { useMyShop } from "@/lib/hooks/use-my-shop"
import { notifyInfo, notifySuccess } from "@/lib/toast"
import type { Shop } from "@/lib/types"
import { DollarSign, Edit, ExternalLink, ListOrdered, Star, Users } from "lucide-react"
import Link from "next/link"
import { useState } from "react"

export default function ShopManagementPage() {
  const { shop, setShop, loading, error, refreshShop } = useMyShop()

  if (loading) {
    return <div className="text-sm text-muted-foreground">加载中...</div>
  }

  if (error) {
    return <div className="text-sm text-muted-foreground">{error}</div>
  }

  if (!shop) {
    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
  }

  return (
    <ShopManagementContent key={shop.id} shop={shop} setShop={setShop} refreshShop={refreshShop} />
  )
}

function ShopManagementContent({
  shop,
  setShop,
  refreshShop,
}: {
  shop: Shop
  setShop: (shop: Shop | null) => void
  refreshShop: () => Promise<Shop | null>
}) {
  const [name, setName] = useState(shop.name)
  const [description, setDescription] = useState(shop.description)
  const [saving, setSaving] = useState(false)

  const handleSave = async () => {
    setSaving(true)
    try {
      const nextShop = await updateShop(shop.id, {
        name,
        description,
        commissionType: shop.commissionType,
        commissionValue: shop.commissionValue,
        allowMultiShop: shop.allowMultiShop,
        allowIndependentOrders: shop.allowIndependentOrders,
        dispatchMode: shop.dispatchMode,
      })
      setShop(nextShop)
      notifySuccess("店铺信息已保存")
    } catch (error) {
      notifyInfo(toApiError(error).msg)
    } finally {
      setSaving(false)
    }
  }

  const handleAddAnnouncement = async () => {
    const next = window.prompt("", "")
    if (next === null) return
    const value = next.trim()
    if (!value) return

    setSaving(true)
    try {
      await addShopAnnouncement(shop.id, value)
      await refreshShop()
      notifySuccess("公告已添加")
    } catch (error) {
      notifyInfo(toApiError(error).msg)
    } finally {
      setSaving(false)
    }
  }

  const handleDeleteAnnouncement = async (index: number) => {
    setSaving(true)
    try {
      await deleteShopAnnouncement(shop.id, index)
      await refreshShop()
      notifySuccess("公告已删除")
    } catch (error) {
      notifyInfo(toApiError(error).msg)
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
      <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 className="hover:shadow-card-hover">
          <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 className="hover:shadow-card-hover">
          <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 className="hover:shadow-card-hover">
          <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 className="hover:shadow-card-hover">
          <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 className="hover:shadow-card-hover">
        <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" value={name} onChange={(event) => setName(event.target.value)} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="shop-desc">店铺简介</Label>
            <Textarea
              id="shop-desc"
              value={description}
              onChange={(event) => setDescription(event.target.value)}
              rows={3}
            />
          </div>
          <Button
            onClick={() => {
              void handleSave()
            }}
            disabled={saving}
          >
            <Edit className="mr-1 h-4 w-4" />
            保存修改
          </Button>
        </CardContent>
      </Card>

      <Card className="hover:shadow-card-hover">
        <CardHeader>
          <CardTitle className="text-base">公告管理</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {shop.announcements.map((announcement, index) => (
            <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"
                onClick={() => {
                  void handleDeleteAnnouncement(index)
                }}
                disabled={saving}
              >
                删除
              </Button>
            </div>
          ))}
          <Separator />
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              void handleAddAnnouncement()
            }}
            disabled={saving}
          >
            添加公告
          </Button>
        </CardContent>
      </Card>

      <Card className="hover:shadow-card-hover">
        <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>
  )
}