"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  createPlanAction,
  updatePlanAction,
} from "@/lib/actions/membership";
import type { MembershipPlan } from "@/app/generated/prisma/client";
import { parseJsonArray } from "@/lib/utils";

interface MembershipPlanFormProps {
  plan?: MembershipPlan;
}

export function MembershipPlanForm({ plan }: MembershipPlanFormProps) {
  const isEdit = !!plan;
  const action = isEdit
    ? updatePlanAction.bind(null, plan.id)
    : createPlanAction;

  return (
    <form action={action} className="max-w-2xl space-y-6">
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label htmlFor="nameZh">方案名稱 *</Label>
          <Input id="nameZh" name="nameZh" defaultValue={plan?.nameZh} required className="mt-1" />
        </div>
        <div>
          <Label htmlFor="slug">Slug *</Label>
          <Input id="slug" name="slug" defaultValue={plan?.slug} required className="mt-1" />
        </div>
      </div>

      <div>
        <Label htmlFor="description">方案說明 *</Label>
        <Textarea id="description" name="description" defaultValue={plan?.description} required rows={2} className="mt-1" />
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        <div>
          <Label htmlFor="priceLabel">顯示價格 *</Label>
          <Input id="priceLabel" name="priceLabel" defaultValue={plan?.priceLabel} placeholder="NT$299 / 月" required className="mt-1" />
        </div>
        <div>
          <Label htmlFor="priceCents">價格（分）*</Label>
          <Input id="priceCents" name="priceCents" type="number" defaultValue={plan?.priceCents ?? 29900} required className="mt-1" />
        </div>
        <div>
          <Label htmlFor="currency">幣別</Label>
          <Input id="currency" name="currency" defaultValue={plan?.currency ?? "TWD"} className="mt-1" />
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label htmlFor="intervalDays">有效天數 *</Label>
          <Input id="intervalDays" name="intervalDays" type="number" defaultValue={plan?.intervalDays ?? 30} required className="mt-1" />
        </div>
        <div>
          <Label htmlFor="sortOrder">排序</Label>
          <Input id="sortOrder" name="sortOrder" type="number" defaultValue={plan?.sortOrder ?? 0} className="mt-1" />
        </div>
      </div>

      <div>
        <Label htmlFor="features">方案權益（每行一項）</Label>
        <Textarea
          id="features"
          name="features"
          defaultValue={plan ? parseJsonArray(plan.features).join("\n") : "解鎖會員專屬指南\n進階場地情報\n老司機私房攻略"}
          rows={5}
          className="mt-1"
        />
      </div>

      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="published" defaultChecked={plan?.published ?? true} className="size-4 rounded border-input" />
        已發布
      </label>

      <Button type="submit" className="bg-primary text-primary-foreground">
        {isEdit ? "更新方案" : "建立方案"}
      </Button>
    </form>
  );
}