import type { Metadata } from "next";
import { Gift, Sparkles } from "lucide-react";
import { createCoupon, createPromotionRule } from "@/actions/admin/commerce";
import { DetailItem, DetailList } from "@/components/admin/detail-list";
import { ActiveStatusBadge, StatusBadge } from "@/components/admin/status-badge";
import { PageHeader, PageShell, SectionHeader } from "@/components/shared/page-shell";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { getCommerceData } from "./commerce-data";
import { CommerceToggleButton } from "./_components/commerce-actions";

const selectClassName = "premium-input w-full appearance-none px-3.5 py-2 text-sm outline-none";

export const metadata: Metadata = {
  title: "商业配置",
  description: "管理优惠券与满减规则。",
};

export default async function AdminCommercePage() {
  const { coupons, promotions } = await getCommerceData();

  return (
    <PageShell>
      <PageHeader
        eyebrow="商业配置"
        title="优惠与奖励"
      />

      <Tabs defaultValue="create" className="space-y-6">
        <TabsList variant="line" className="surface-card p-1">
          <TabsTrigger value="create">新建规则</TabsTrigger>
          <TabsTrigger value="manage">规则列表</TabsTrigger>
        </TabsList>

        <TabsContent value="create">
          <section className="grid gap-5 xl:grid-cols-2">
            <form action={createCoupon} className="form-panel space-y-4">
              <SectionHeader title="新建优惠券" />
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="coupon-code">优惠码</Label>
                  <Input id="coupon-code" name="code" placeholder="WELCOME10" required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="coupon-name">名称</Label>
                  <Input id="coupon-name" name="name" placeholder="新人礼遇" required />
                </div>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="coupon-type">优惠类型</Label>
                  <select id="coupon-type" name="discountType" className={selectClassName} defaultValue="AMOUNT_OFF">
                    <option value="AMOUNT_OFF">立减金额</option>
                    <option value="PERCENT_OFF">折扣百分比</option>
                  </select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="coupon-value">优惠值</Label>
                  <Input id="coupon-value" name="discountValue" type="number" step="0.01" min="0.01" placeholder="10 或 15" required />
                </div>
              </div>
              <div className="grid gap-3 sm:grid-cols-3">
                <Input name="thresholdAmount" type="number" step="0.01" placeholder="满多少可用" />
                <Input name="totalLimit" type="number" placeholder="总次数" />
                <Input name="perUserLimit" type="number" placeholder="每人次数" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="coupon-public">用户可见</Label>
                <select id="coupon-public" name="isPublic" className={selectClassName} defaultValue="true">
                  <option value="true">公开展示</option>
                  <option value="false">仅发放可用</option>
                </select>
              </div>
              <Button type="submit" className="w-full">创建优惠券</Button>
            </form>

            <form action={createPromotionRule} className="form-panel space-y-4">
              <SectionHeader title="新建满减" />
              <div className="space-y-2">
                <Label htmlFor="promotion-name">规则名称</Label>
                <Input id="promotion-name" name="name" placeholder="满百礼遇" required />
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="promotion-threshold">门槛金额</Label>
                  <Input id="promotion-threshold" name="thresholdAmount" type="number" step="0.01" min="0.01" required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="promotion-discount">减免金额</Label>
                  <Input id="promotion-discount" name="discountAmount" type="number" step="0.01" min="0.01" required />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="promotion-sort">排序</Label>
                <Input id="promotion-sort" name="sortOrder" type="number" defaultValue={100} />
              </div>
              <Button type="submit" className="w-full">创建满减</Button>
            </form>
          </section>
        </TabsContent>

        <TabsContent value="manage" className="space-y-6">
          <section className="space-y-4">
            <SectionHeader title="优惠券" />
            <div className="grid gap-4 lg:grid-cols-2">
              {coupons.map((coupon) => (
                <article key={coupon.id} className="surface-card rounded-xl p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex items-start gap-3">
                      <span className="flex size-10 items-center justify-center rounded-[1rem] bg-amber-500/10 text-amber-700 dark:text-amber-300"><Gift className="size-4" /></span>
                      <div>
                        <h3 className="font-semibold">{coupon.name}</h3>
                        <p className="mt-1 font-mono text-sm text-primary">{coupon.code}</p>
                      </div>
                    </div>
                    <CommerceToggleButton kind="coupon" id={coupon.id} active={coupon.isActive} />
                  </div>
                  <DetailList className="mt-4">
                    <DetailItem label="优惠">{coupon.discountType === "PERCENT_OFF" ? `${Number(coupon.discountValue)}%` : `¥${Number(coupon.discountValue).toFixed(2)}`}</DetailItem>
                    <DetailItem label="门槛">{coupon.thresholdAmount == null ? "无门槛" : `满 ¥${Number(coupon.thresholdAmount).toFixed(2)}`}</DetailItem>
                    <DetailItem label="可见性">{coupon.isPublic ? "公开" : "仅发放"}</DetailItem>
                    <DetailItem label="使用">订单 {coupon._count.orders} · 发放 {coupon._count.grants}</DetailItem>
                  </DetailList>
                </article>
              ))}
            </div>
          </section>

          <section className="space-y-4">
            <SectionHeader title="满减规则" />
            <div className="grid gap-4 lg:grid-cols-2">
              {promotions.map((rule) => (
                <article key={rule.id} className="surface-card rounded-xl p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex items-start gap-3">
                      <span className="flex size-10 items-center justify-center rounded-[1rem] bg-primary/10 text-primary"><Sparkles className="size-4" /></span>
                      <div>
                        <h3 className="font-semibold">{rule.name}</h3>
                        <p className="mt-1 text-sm text-muted-foreground">满 ¥{Number(rule.thresholdAmount).toFixed(2)} 减 ¥{Number(rule.discountAmount).toFixed(2)}</p>
                      </div>
                    </div>
                    <CommerceToggleButton kind="promotion" id={rule.id} active={rule.isActive} />
                  </div>
                  <div className="mt-4 flex flex-wrap gap-2">
                    <ActiveStatusBadge active={rule.isActive} activeLabel="启用中" inactiveLabel="已停用" />
                    <StatusBadge>排序 {rule.sortOrder}</StatusBadge>
                  </div>
                </article>
              ))}
            </div>
          </section>
        </TabsContent>
      </Tabs>
    </PageShell>
  );
}
