"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 { upsertBannerAction } from "@/lib/actions/banners";
import {
  BANNER_PLACEMENTS,
  type BannerPlacement,
} from "@/lib/constants/promotions";
import type { Banner } from "@/app/generated/prisma/client";

interface BannerFormProps {
  placement: BannerPlacement;
  banner?: Banner | null;
}

export function BannerForm({ placement, banner }: BannerFormProps) {
  const meta = BANNER_PLACEMENTS[placement];
  const action = upsertBannerAction.bind(null, placement);
  const isHero = placement === "hero";

  return (
    <form action={action} className="max-w-2xl space-y-6">
      <div className="rounded-lg border border-border bg-muted/30 p-4 text-sm text-muted-foreground">
        <p className="font-medium text-foreground">{meta.label}</p>
        <p className="mt-1">{meta.description}</p>
      </div>

      {!isHero && (
        <div>
          <Label htmlFor="eyebrow">小標籤（選填）</Label>
          <Input
            id="eyebrow"
            name="eyebrow"
            defaultValue={banner?.eyebrow ?? ""}
            placeholder="例：夜遊老司機社群"
            className="mt-1"
          />
        </div>
      )}

      <div>
        <Label htmlFor="title">{isHero ? "副標題（主標題下的大字）" : "標題"} *</Label>
        <Input
          id="title"
          name="title"
          defaultValue={banner?.title ?? ""}
          required
          className="mt-1"
        />
      </div>

      <div>
        <Label htmlFor="subtitle">說明文字 *</Label>
        <Textarea
          id="subtitle"
          name="subtitle"
          defaultValue={banner?.subtitle ?? ""}
          required
          rows={3}
          className="mt-1"
        />
      </div>

      <div>
        <Label htmlFor="imageUrl">背景圖片 URL *</Label>
        <Input
          id="imageUrl"
          name="imageUrl"
          defaultValue={banner?.imageUrl ?? ""}
          required
          placeholder="https://images.unsplash.com/..."
          className="mt-1"
        />
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label htmlFor="cta1Text">按鈕一文字</Label>
          <Input
            id="cta1Text"
            name="cta1Text"
            defaultValue={banner?.cta1Text ?? ""}
            className="mt-1"
          />
        </div>
        <div>
          <Label htmlFor="cta1Url">按鈕一連結</Label>
          <Input
            id="cta1Url"
            name="cta1Url"
            defaultValue={banner?.cta1Url ?? ""}
            placeholder="/explore 或 https://..."
            className="mt-1"
          />
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label htmlFor="cta2Text">按鈕二文字</Label>
          <Input
            id="cta2Text"
            name="cta2Text"
            defaultValue={banner?.cta2Text ?? ""}
            className="mt-1"
          />
        </div>
        <div>
          <Label htmlFor="cta2Url">按鈕二連結</Label>
          <Input
            id="cta2Url"
            name="cta2Url"
            defaultValue={banner?.cta2Url ?? ""}
            className="mt-1"
          />
        </div>
      </div>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="published"
          defaultChecked={banner?.published ?? true}
          className="size-4 rounded border-input"
        />
        已發布（關閉則使用預設內容）
      </label>

      <Button type="submit" className="bg-primary text-primary-foreground">
        儲存橫幅
      </Button>
    </form>
  );
}