"use client";

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

export function ReadingFollowUpForm({
  readingId,
  hasFollowUpAnswer,
  hasSubmittedFollowUpCards,
  followUpQuestion,
}: {
  readingId: string;
  hasFollowUpAnswer: boolean;
  hasSubmittedFollowUpCards: boolean;
  followUpQuestion: string | null;
}) {
  const router = useRouter();
  const [question, setQuestion] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!question.trim()) return;
    setError(null);
    setLoading(true);
    try {
      const res = await fetch(`/api/readings/${readingId}/follow-up`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ question: question.trim() }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error ?? "خطا در ثبت سوال");
        setLoading(false);
        return;
      }
      router.push(`/reading/select?readingId=${readingId}&followUp=1`);
    } catch {
      setError("خطایی رخ داد.");
      setLoading(false);
    }
  }

  if (hasFollowUpAnswer || hasSubmittedFollowUpCards) return null;

  if (followUpQuestion) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-base">سوال شما</CardTitle>
          <CardDescription className="whitespace-pre-wrap">{followUpQuestion}</CardDescription>
        </CardHeader>
        <CardContent>
          <Button asChild>
            <Link href={`/reading/select?readingId=${readingId}&followUp=1`}>
              انتخاب ۱۰ کارت برای پاسخ
            </Link>
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">سوال خود را بپرسید</CardTitle>
        <CardDescription>
          می‌توانید یک سوال بپرسید و ۱۰ کارت دیگر برای پاسخ به آن انتخاب کنید. (اختیاری)
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="followUpQuestion">سوال</Label>
            <Input
              id="followUpQuestion"
              value={question}
              onChange={(e) => setQuestion(e.target.value)}
              placeholder="سوال خود را بنویسید..."
              className="mt-1"
            />
          </div>
          {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
          <Button type="submit" disabled={loading || !question.trim()}>
            {loading ? "در حال ثبت..." : "ثبت سوال و انتخاب ۱۰ کارت"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}