"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 {
  createArticleAction,
  updateArticleAction,
} from "@/lib/actions/articles";
import { ACCESS_LEVELS } from "@/lib/utils";
import type { Article } from "@/lib/types";

interface ArticleFormProps {
  article?: Article;
  citySlugs: string[];
  articleCategories: { nameZh: string }[];
}

export function ArticleForm({
  article,
  citySlugs,
  articleCategories,
}: ArticleFormProps) {
  const isEdit = !!article;
  const action = isEdit
    ? updateArticleAction.bind(null, article.id)
    : createArticleAction;

  const defaultDate = article
    ? new Date(article.publishedAt).toISOString().slice(0, 10)
    : new Date().toISOString().slice(0, 10);

  return (
    <form action={action} className="max-w-3xl space-y-6">
      <div>
        <Label htmlFor="title">標題 *</Label>
        <Input
          id="title"
          name="title"
          defaultValue={article?.title}
          required
          className="mt-1"
        />
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label htmlFor="slug">Slug *</Label>
          <Input
            id="slug"
            name="slug"
            defaultValue={article?.slug}
            required
            className="mt-1"
          />
        </div>
        <div>
          <Label htmlFor="category">分類 *</Label>
          <select
            id="category"
            name="category"
            defaultValue={article?.category ?? articleCategories[0]?.nameZh}
            required
            className="mt-1 flex h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm"
          >
            {articleCategories.map((c) => (
              <option key={c.nameZh} value={c.nameZh}>
                {c.nameZh}
              </option>
            ))}
          </select>
          <p className="mt-1 text-xs text-muted-foreground">
            <a href="/admin/categories?kind=article" className="text-primary hover:underline">
              管理指南分類 →
            </a>
          </p>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label htmlFor="citySlug">相關城市</Label>
          <select
            id="citySlug"
            name="citySlug"
            defaultValue={article?.citySlug ?? ""}
            className="mt-1 flex h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm"
          >
            <option value="">不限城市</option>
            {citySlugs.map((s) => (
              <option key={s} value={s}>
                {s}
              </option>
            ))}
          </select>
        </div>
        <div>
          <Label htmlFor="accessLevel">存取權限</Label>
          <select
            id="accessLevel"
            name="accessLevel"
            defaultValue={article?.accessLevel ?? "free"}
            className="mt-1 flex h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm"
          >
            {ACCESS_LEVELS.map((l) => (
              <option key={l.value} value={l.value}>
                {l.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div>
        <Label htmlFor="publishedAt">發布日期 *</Label>
        <Input
          id="publishedAt"
          name="publishedAt"
          type="date"
          defaultValue={defaultDate}
          required
          className="mt-1"
        />
      </div>

      <div>
        <Label htmlFor="excerpt">摘要 *</Label>
        <Textarea
          id="excerpt"
          name="excerpt"
          defaultValue={article?.excerpt}
          required
          rows={2}
          className="mt-1"
        />
      </div>

      <div>
        <Label htmlFor="coverImage">封面圖片 URL *</Label>
        <Input
          id="coverImage"
          name="coverImage"
          defaultValue={article?.coverImage}
          required
          className="mt-1"
        />
      </div>

      <div>
        <Label htmlFor="content">內容（Markdown）*</Label>
        <Textarea
          id="content"
          name="content"
          defaultValue={article?.content}
          required
          rows={16}
          className="mt-1 font-mono text-sm"
        />
      </div>

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

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