"use client"

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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
import type { Shop } from "@/lib/types"
import { useAuthStore } from "@/store/auth"
import { useShopStore } from "@/store/shops"
import { Save } from "lucide-react"
import { useState } from "react"

export default function ShopRulesPage() {
  const userId = useAuthStore((state) => state.user?.id)
  const shops = useShopStore((state) => state.shops)
  const shop = resolveOwnerShop(userId, shops)
  const updateShop = useShopStore((state) => state.updateShop)

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

  return <ShopRulesForm key={shop.id} shop={shop} updateShop={updateShop} />
}

function ShopRulesForm({
  shop,
  updateShop,
}: {
  shop: Shop
  updateShop: (shopId: string, patch: Partial<Omit<Shop, "id" | "owner">>) => void
}) {
  const [allowMultiShop, setAllowMultiShop] = useState(shop.allowMultiShop)
  const [allowIndependentOrders, setAllowIndependentOrders] = useState(shop.allowIndependentOrders)
  const [dispatchMode, setDispatchMode] = useState<Shop["dispatchMode"]>(shop.dispatchMode)
  const [commissionType, setCommissionType] = useState<Shop["commissionType"]>(shop.commissionType)
  const [commissionValue, setCommissionValue] = useState(shop.commissionValue.toString())

  const handleSave = () => {
    updateShop(shop.id, {
      allowMultiShop,
      allowIndependentOrders,
      dispatchMode,
      commissionType,
      commissionValue: Number(commissionValue),
    })
  }

  return (
    <div className="container mx-auto max-w-4xl px-4 py-8 space-y-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">规则设置</h1>
        <Button onClick={handleSave}>
          <Save className="mr-2 h-4 w-4" />
          保存设置
        </Button>
      </div>

      <div className="grid gap-6">
        <Card className="hover:shadow-card-hover">
          <CardHeader>
            <CardTitle className="text-base">员工权限</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between space-x-2">
              <Label htmlFor="allow-multi-shop" className="flex flex-col space-y-1">
                <span>允许员工同时挂靠其他店铺</span>
                <span className="font-normal text-sm text-muted-foreground">
                  开启后，员工可以同时加入其他店铺接单
                </span>
              </Label>
              <Switch
                id="allow-multi-shop"
                checked={allowMultiShop}
                onCheckedChange={setAllowMultiShop}
              />
            </div>
            <div className="flex items-center justify-between space-x-2">
              <Label htmlFor="allow-independent" className="flex flex-col space-y-1">
                <span>允许员工独立接单</span>
                <span className="font-normal text-sm text-muted-foreground">
                  开启后，员工可以在店铺外独立接单
                </span>
              </Label>
              <Switch
                id="allow-independent"
                checked={allowIndependentOrders}
                onCheckedChange={setAllowIndependentOrders}
              />
            </div>
          </CardContent>
        </Card>

        <Card className="hover:shadow-card-hover">
          <CardHeader>
            <CardTitle className="text-base">派单设置</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label>派单模式</Label>
              <Select
                value={dispatchMode}
                onValueChange={(v) => setDispatchMode(v as Shop["dispatchMode"])}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="manual">手动指派</SelectItem>
                  <SelectItem value="auto">自动匹配</SelectItem>
                </SelectContent>
              </Select>
              <p className="text-sm text-muted-foreground">
                手动指派需要店主确认分配；自动匹配将根据打手状态自动分单
              </p>
            </div>
          </CardContent>
        </Card>

        <Card className="hover:shadow-card-hover">
          <CardHeader>
            <CardTitle className="text-base">抽成设置</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label>抽成方式</Label>
                <Select
                  value={commissionType}
                  onValueChange={(v) => setCommissionType(v as Shop["commissionType"])}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="fixed">按单固定金额</SelectItem>
                    <SelectItem value="percentage">百分比抽成</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>抽成数值</Label>
                <div className="relative">
                  <Input
                    type="number"
                    value={commissionValue}
                    onChange={(e) => setCommissionValue(e.target.value)}
                  />
                  <div className="absolute right-3 top-2.5 text-sm text-muted-foreground">
                    {commissionType === "percentage" ? "%" : "元"}
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}