import { ComponentConfig } from "@reacteditor/core";
import { useState } from "react";
import { HelpCircle, Plus, Minus } from "lucide-react";
import { Typography } from "~/editor/theme/Typography";

export type FAQProps = {
  tagline: string;
  heading: string;
  subheading: string;
  items: Array<{ question: string; answer: string }>;
};

function FAQ({ tagline, heading, subheading, items }: FAQProps) {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <section className="bg-background py-20 md:py-28">
      <div className="container mx-auto max-w-3xl px-6">
        <div className="mb-12 text-center">
          {tagline ? (
            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
              {tagline}
            </p>
          ) : null}
          <Typography variant="h2">{heading}</Typography>
          {subheading ? (
            <Typography variant="subtitle1" className="mt-3">
              {subheading}
            </Typography>
          ) : null}
        </div>

        <div className="divide-y divide-border border-y border-border">
          {items.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i}>
                <button
                  onClick={() => setOpen(isOpen ? null : i)}
                  className="flex w-full items-center justify-between py-6 text-left"
                >
                  <span className="text-base font-medium tracking-tight md:text-lg">
                    {item.question}
                  </span>
                  {isOpen ? (
                    <Minus size={18} strokeWidth={1.5} className="flex-shrink-0" />
                  ) : (
                    <Plus size={18} strokeWidth={1.5} className="flex-shrink-0" />
                  )}
                </button>
                {isOpen ? (
                  <p className="pb-6 pr-8 text-sm leading-relaxed text-muted-foreground md:text-base">
                    {item.answer}
                  </p>
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export const faqEditor: ComponentConfig<FAQProps> = {
  label: "FAQ",
  icon: <HelpCircle size={16} />,
  category: "content",
  defaultProps: {
    tagline: "Help",
    heading: "Common questions",
    subheading: "",
    items: [
      {
        question: "What's your return policy?",
        answer:
          "Free returns within 30 days of delivery. Items should be unworn with original tags attached.",
      },
      {
        question: "Where do you ship?",
        answer:
          "We ship worldwide. Free standard shipping on orders over $150 in the US, $250 international.",
      },
      {
        question: "How are your products made?",
        answer:
          "In small batches at family-run mills in Portugal, Italy, and Japan. Every piece is sampled and approved by our team.",
      },
      {
        question: "How do I care for my pieces?",
        answer:
          "Cold wash, lay flat to dry, iron when damp. Care details are on every product page and on the inner label.",
      },
    ],
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "text", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
    items: {
      label: "Items",
      type: "array",
      defaultItemProps: { question: "", answer: "" },
      getItemSummary: (it) => it?.question || "Question",
      arrayFields: {
        question: { label: "Question", type: "text", contentEditable: true },
        answer: { label: "Answer", type: "textarea", contentEditable: true },
      },
    },
  },
  render: (props) => <FAQ {...props} />,
};