"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

export type FaqItem = { question: string; answer: string };

export function FaqEditor({
  initialTitle,
  initialItems,
}: {
  initialTitle: string;
  initialItems: FaqItem[];
}) {
  const router = useRouter();
  const [titleFa, setTitleFa] = useState(initialTitle);
  const [items, setItems] = useState<FaqItem[]>(
    initialItems.length > 0 ? initialItems : [{ question: "", answer: "" }]
  );
  const [loading, setLoading] = useState(false);

  function addItem() {
    setItems((prev) => [...prev, { question: "", answer: "" }]);
  }

  function removeItem(index: number) {
    setItems((prev) => prev.filter((_, i) => i !== index));
  }

  function updateItem(index: number, field: "question" | "answer", value: string) {
    setItems((prev) =>
      prev.map((item, i) => (i === index ? { ...item, [field]: value } : item))
    );
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const toSave = items.filter((i) => i.question.trim() || i.answer.trim());
    setLoading(true);
    await fetch("/api/admin/pages/faq", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        titleFa,
        content: JSON.stringify(toSave.length > 0 ? toSave : []),
      }),
    });
    setLoading(false);
    router.refresh();
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <Label htmlFor="faq-title">عنوان صفحه</Label>
        <Input
          id="faq-title"
          value={titleFa}
          onChange={(e) => setTitleFa(e.target.value)}
          placeholder="سوالات متداول"
          className="mt-1 max-w-md"
        />
      </div>

      <div>
        <div className="flex items-center justify-between mb-2">
          <Label>سوال و پاسخ‌ها</Label>
          <Button type="button" variant="outline" size="sm" onClick={addItem}>
            افزودن سوال
          </Button>
        </div>
        <div className="space-y-4">
          {items.map((item, index) => (
            <Card key={index}>
              <CardHeader className="py-3 flex flex-row items-center justify-between space-y-0">
                <span className="text-sm font-medium">سوال {index + 1}</span>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => removeItem(index)}
                  className="text-destructive hover:text-destructive"
                >
                  حذف
                </Button>
              </CardHeader>
              <CardContent className="space-y-3 pt-0">
                <div>
                  <Label className="text-xs">سوال</Label>
                  <Input
                    value={item.question}
                    onChange={(e) => updateItem(index, "question", e.target.value)}
                    placeholder="متن سوال..."
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label className="text-xs">پاسخ</Label>
                  <textarea
                    value={item.answer}
                    onChange={(e) => updateItem(index, "answer", e.target.value)}
                    placeholder="متن پاسخ..."
                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm mt-1"
                  />
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <Button type="submit" disabled={loading}>
        {loading ? "در حال ذخیره..." : "ذخیره"}
      </Button>
    </form>
  );
}