"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
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 { 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 { AlertCircle, Save } from "lucide-react"
import { useState } from "react"

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

  if (loading) {
    return (
      <div className="container mx-auto max-w-4xl px-4 py-8">
        <EmptyState title="规则加载中" icon={Save} />
      </div>
    )
  }

  if (error) {
    return (
      <div className="container mx-auto max-w-4xl px-4 py-8">
        <EmptyState title="规则加载失败" description={error} icon={AlertCircle} />
      </div>
    )
  }

  if (!shop) {
    return (
      <div className="container mx-auto max-w-4xl px-4 py-8">
        <EmptyState title="当前账号没有可管理的店铺" icon={Save} />
      </div>
    )
  }

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

function ShopRulesForm({ shop, setShop }: { shop: Shop; setShop: (shop: Shop | null) => void }) {
  const [commissionType, setCommissionType] = useState<Shop["commissionType"]>(shop.commissionType)
  const [commissionValue, setCommissionValue] = useState(shop.commissionValue)
  const [allowMultiShop, setAllowMultiShop] = useState(shop.allowMultiShop)
  const [allowIndependentOrders, setAllowIndependentOrders] = useState(shop.allowIndependentOrders)
  const [dispatchMode, setDispatchMode] = useState<Shop["dispatchMode"]>(shop.dispatchMode)
  const [saving, setSaving] = useState(false)

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

  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={() => {
            void handleSave()
          }}
          disabled={saving}
        >
          <Save className="mr-2 h-4 w-4" />
          保存设置
        </Button>
      </div>

      <div className="grid gap-6">
        <Card className="border-border/80 shadow-sm">
          <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="border-border/80 shadow-sm">
          <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="border-border/80 shadow-sm">
          <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>
  )
}