"use client";

import { Button, Card, Input, Select, Space } from "antd";

export type SiteContentBlock = {
  type: string;
  title?: string;
  subtitle?: string;
  body?: string;
  html?: string;
  ctaLabel?: string;
  ctaHref?: string;
  buttonLabel?: string;
  buttonHref?: string;
};

const BLOCK_TYPES = [
  { value: "hero", label: "Hero" },
  { value: "richText", label: "Rich text (HTML)" },
  { value: "section", label: "Section" },
  { value: "cta", label: "Call to action" },
];

function emptyBlock(type: string): SiteContentBlock {
  switch (type) {
    case "hero":
      return { type: "hero", title: "", subtitle: "", ctaLabel: "", ctaHref: "" };
    case "richText":
      return { type: "richText", html: "" };
    case "section":
      return { type: "section", title: "", body: "" };
    case "cta":
      return { type: "cta", title: "", body: "", buttonLabel: "", buttonHref: "" };
    default:
      return { type: "section", title: "", body: "" };
  }
}

export function BlockEditor({
  blocks,
  onChange,
}: {
  blocks: SiteContentBlock[];
  onChange: (blocks: SiteContentBlock[]) => void;
}) {
  const updateBlock = (index: number, patch: Partial<SiteContentBlock>) => {
    const next = blocks.map((b, i) => (i === index ? { ...b, ...patch } : b));
    onChange(next);
  };

  const move = (index: number, dir: -1 | 1) => {
    const target = index + dir;
    if (target < 0 || target >= blocks.length) return;
    const next = [...blocks];
    const [item] = next.splice(index, 1);
    next.splice(target, 0, item);
    onChange(next);
  };

  return (
    <Space direction="vertical" className="w-full" size="middle">
      {blocks.map((block, index) => (
        <Card
          key={`block-${index}`}
          size="small"
          title={`Khối ${index + 1}: ${block.type}`}
          extra={
            <Space>
              <Button size="small" disabled={index === 0} onClick={() => move(index, -1)}>
                ↑
              </Button>
              <Button
                size="small"
                disabled={index === blocks.length - 1}
                onClick={() => move(index, 1)}
              >
                ↓
              </Button>
              <Button
                size="small"
                danger
                onClick={() => onChange(blocks.filter((_, i) => i !== index))}
              >
                Xóa
              </Button>
            </Space>
          }
        >
          <Select
            className="mb-3 w-full"
            value={block.type}
            options={BLOCK_TYPES}
            onChange={(type) => updateBlock(index, emptyBlock(type))}
          />
          {(block.type === "hero" || block.type === "section" || block.type === "cta") && (
            <Input
              className="mb-2"
              placeholder="Tiêu đề"
              value={block.title ?? ""}
              onChange={(e) => updateBlock(index, { title: e.target.value })}
            />
          )}
          {block.type === "hero" && (
            <>
              <Input
                className="mb-2"
                placeholder="Phụ đề"
                value={block.subtitle ?? ""}
                onChange={(e) => updateBlock(index, { subtitle: e.target.value })}
              />
              <Input
                className="mb-2"
                placeholder="Nhãn nút CTA"
                value={block.ctaLabel ?? ""}
                onChange={(e) => updateBlock(index, { ctaLabel: e.target.value })}
              />
              <Input
                placeholder="Liên kết CTA"
                value={block.ctaHref ?? ""}
                onChange={(e) => updateBlock(index, { ctaHref: e.target.value })}
              />
            </>
          )}
          {block.type === "richText" && (
            <Input.TextArea
              rows={6}
              placeholder="HTML"
              value={block.html ?? ""}
              onChange={(e) => updateBlock(index, { html: e.target.value })}
            />
          )}
          {(block.type === "section" || block.type === "cta") && (
            <Input.TextArea
              className="mb-2"
              rows={4}
              placeholder="Nội dung"
              value={block.body ?? ""}
              onChange={(e) => updateBlock(index, { body: e.target.value })}
            />
          )}
          {block.type === "cta" && (
            <>
              <Input
                className="mb-2"
                placeholder="Nhãn nút"
                value={block.buttonLabel ?? ""}
                onChange={(e) => updateBlock(index, { buttonLabel: e.target.value })}
              />
              <Input
                placeholder="Liên kết nút"
                value={block.buttonHref ?? ""}
                onChange={(e) => updateBlock(index, { buttonHref: e.target.value })}
              />
            </>
          )}
        </Card>
      ))}
      <Button type="dashed" block onClick={() => onChange([...blocks, emptyBlock("section")])}>
        + Thêm khối
      </Button>
    </Space>
  );
}