"use client";

import { useEffect, useState } from "react";
import { useAuth } from "@/lib/stores/auth-store";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

interface SurveyTemplate {
  id: string;
  title: string;
  questions: Array<{ id: string; title: string; type: string }>;
  courses: Array<{ id: string; title: string }>;
}

export default function SurveyPage() {
  const { isAuthenticated } = useAuth();
  const router = useRouter();
  const [survey, setSurvey] = useState<SurveyTemplate | null>(null);
  const [answers, setAnswers] = useState<Record<string, string>>({});
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (!isAuthenticated) { router.push("/auth"); return; }
    fetch("/api/surveys", {
      headers: { Authorization: `Bearer ${localStorage.getItem("auth_token")}` },
    })
      .then((r) => r.json())
      .then((data: SurveyTemplate[]) => {
        if (data.length > 0) setSurvey(data[0]);
      })
      .catch(() => {});
  }, [isAuthenticated, router]);

  const handleSubmit = async () => {
    if (!survey) return;
    for (const q of survey.questions) {
      if (!answers[q.id]) return alert("لطفاً به همه سوالات پاسخ دهید");
    }
    await fetch("/api/surveys/submit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${localStorage.getItem("auth_token")}`,
      },
      body: JSON.stringify({ answers, courseId: survey.courses[0]?.id }),
    });
    setSubmitted(true);
  };

  if (!survey) return (
    <div className="container mx-auto px-4 py-8 text-center">
      <p className="text-gray-500">نظرسنجی فعالی وجود ندارد</p>
    </div>
  );

  if (submitted) return (
    <div className="container mx-auto px-4 py-8 max-w-lg text-center">
      <div className="rounded-xl border bg-white p-8">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">با تشکر</h1>
        <p className="text-gray-600">نظرات شما با موفقیت ثبت شد</p>
      </div>
    </div>
  );

  return (
    <div className="container mx-auto px-4 py-8 max-w-2xl">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">{survey.title}</h1>

      <div className="space-y-6">
        {survey.questions.map((q, i) => (
          <div key={q.id} className="rounded-xl border bg-white p-5">
            <p className="font-medium text-gray-900 mb-3">
              {i + 1}. {q.title}
            </p>
            <div className="flex gap-2">
              {["عالی", "خوب", "متوسط", "ضعیف", "خیلی ضعیف"].map((label, val) => {
                const value = String(5 - val);
                return (
                  <button
                    key={value}
                    onClick={() => setAnswers({ ...answers, [q.id]: value })}
                    className={`flex-1 py-2 px-3 rounded-lg text-sm border transition-colors ${
                      answers[q.id] === value
                        ? "bg-[#2563EB] text-white border-[#2563EB]"
                        : "bg-white text-gray-600 border-gray-200 hover:border-[#2563EB]"
                    }`}
                  >
                    {label}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <Button
        onClick={handleSubmit}
        className="w-full mt-6 bg-[#2563EB] hover:bg-[#1D4ED8]"
      >
        ثبت نظرات
      </Button>
    </div>
  );
}