"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Plus, X, Loader2 } from "lucide-react";

export default function NewSurvey() {
  const router = useRouter();
  const [title, setTitle] = useState("");
  const [questions, setQuestions] = useState<string[]>([""]);
  const [error, setError] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const addQuestion = () => setQuestions([...questions, ""]);
  const removeQuestion = (i: number) => {
    if (questions.length <= 1) return;
    setQuestions(questions.filter((_, idx) => idx !== i));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    const valid = questions.filter((q) => q.trim());
    if (!title.trim()) { setError("عنوان نظرسنجی را وارد کنید"); return; }
    if (valid.length === 0) { setError("حداقل یک سوال وارد کنید"); return; }

    setSubmitting(true);
    const token = localStorage.getItem("auth_token");
    try {
      const res = await fetch("/api/surveys", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({
          title: title.trim(),
          questions: valid.map((q) => ({ title: q.trim() })),
        }),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "خطا");
      }
      router.push("/dashboard/admin/surveys");
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "خطا");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto">
      <button
        onClick={() => router.push("/dashboard/admin/surveys")}
        className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-900 mb-4 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        بازگشت
      </button>

      <h1 className="text-2xl font-bold text-gray-900 mb-6">نظرسنجی جدید</h1>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="border rounded-xl p-6 bg-white">
          <label className="block text-sm font-medium text-gray-700 mb-1">عنوان نظرسنجی</label>
          <input
            className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB]"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="مثلاً: نظرسنجی پایان دوره بدنسازی"
          />
        </div>

        <div className="border rounded-xl p-6 bg-white">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-900">سوالات</h2>
            <span className="text-xs text-gray-400">{questions.filter(q => q.trim()).length} سوال</span>
          </div>

          <div className="space-y-3">
            {questions.map((q, i) => (
              <div key={i} className="flex items-start gap-2">
                <span className="text-sm text-gray-400 mt-3 min-w-[20px]">{i + 1}.</span>
                <input
                  className="flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]/20 focus:border-[#2563EB]"
                  value={q}
                  onChange={(e) => {
                    const next = [...questions];
                    next[i] = e.target.value;
                    setQuestions(next);
                  }}
                  placeholder={`سوال ${i + 1}`}
                />
                {questions.length > 1 && (
                  <button
                    type="button"
                    onClick={() => removeQuestion(i)}
                    className="mt-2.5 p-1 rounded hover:bg-red-50 transition-colors"
                  >
                    <X className="h-4 w-4 text-red-400" />
                  </button>
                )}
              </div>
            ))}
          </div>

          <Button
            type="button"
            variant="outline"
            className="mt-4 w-full"
            onClick={addQuestion}
          >
            <Plus className="h-4 w-4 ml-1" />
            افزودن سوال
          </Button>
        </div>

        {error && (
          <div className="text-sm text-red-600 bg-red-50 p-3 rounded-lg">{error}</div>
        )}

        <div className="flex gap-3">
          <Button
            type="submit"
            className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white flex-1"
            disabled={submitting}
          >
            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : "ایجاد نظرسنجی"}
          </Button>
          <Button variant="outline" className="flex-1" onClick={() => router.push("/dashboard/admin/surveys")}>
            انصراف
          </Button>
        </div>
      </form>
    </div>
  );
}