"use client";

import { useSearchParams, useRouter } from "next/navigation";
import { useState, useEffect } from "react";
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";
import { AnimatedSection } from "@/components/animated-section";
import { SiteFooter } from "@/components/site-footer";
import {
  MARITAL_STATUS_OPTIONS,
  type MaritalStatusValue,
} from "@/lib/readings/marital-status";

const SPREADS: Record<string, { label: string; count: number }> = {
  "7-card": { label: "فال هفت کارته تک نیت", count: 7 },
  "18-card": { label: "فال ۱۸ کارت فال احساسی", count: 18 },
  "48-card": { label: "فال ۴۸ کارته فال کلی", count: 48 },
};

const selectClassName =
  "mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm";

export function ReadingFormClient() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const spread = searchParams.get("spread") ?? "7-card";
  const config = SPREADS[spread];

  const [userName, setUserName] = useState("");
  const [intention, setIntention] = useState("");
  const [partnerName, setPartnerName] = useState("");
  const [userMaritalStatus, setUserMaritalStatus] = useState<MaritalStatusValue | "">("");
  const [partnerMaritalStatus, setPartnerMaritalStatus] = useState<MaritalStatusValue | "">("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!config) router.replace("/reading");
  }, [config, router]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (!userName.trim()) {
      setError("نام را وارد کنید.");
      return;
    }
    if (spread === "7-card" && !intention.trim()) {
      setError("نیت را وارد کنید.");
      return;
    }

    setLoading(true);
    try {
      const body: Record<string, string> = {
        spreadType: spread,
        userName: userName.trim(),
      };
      if (spread === "7-card") {
        body.intention = intention.trim();
      } else if (intention.trim()) {
        body.intention = intention.trim();
      }
      if (partnerName.trim()) body.partnerName = partnerName.trim();
      if (userMaritalStatus) body.userMaritalStatus = userMaritalStatus;
      if (partnerMaritalStatus) body.partnerMaritalStatus = partnerMaritalStatus;

      const res = await fetch("/api/readings/draft", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!res.ok) {
        if (res.status === 401) {
          router.push(`/login?callbackUrl=${encodeURIComponent(`/reading/form?spread=${spread}`)}`);
          return;
        }
        setError(data.error ?? "خطا در ثبت");
        setLoading(false);
        return;
      }
      router.push(`/reading/select?readingId=${data.readingId}`);
    } catch {
      setError("خطایی رخ داد.");
      setLoading(false);
    }
  }

  if (!config) return null;

  return (
    <div className="min-h-screen flex flex-col">
      <div className="container mx-auto px-4 py-12 max-w-md flex-1">
        <AnimatedSection>
          <h1 className="text-2xl font-bold text-center mb-2">{config.label}</h1>
          <p className="text-muted-foreground text-center mb-8">
            لطفاً اطلاعات زیر را وارد کنید؛ سپس {config.count} کارت انتخاب خواهید کرد.
          </p>
        </AnimatedSection>
        <AnimatedSection delay={0.15}>
          <Card>
            <CardHeader>
              <CardTitle className="text-base">اطلاعات</CardTitle>
              <CardDescription>
                {spread === "7-card"
                  ? "نام و نیت شما الزامی است. نام شریک و وضعیت تاهل در صورت تمایل برای تفسیر دقیق‌تر استفاده می‌شوند."
                  : "فقط نام شما الزامی است. نیت، نام شریک و وضعیت تاهل در صورت تمایل برای تفسیر دقیق‌تر استفاده می‌شوند."}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="userName">نام شما *</Label>
                  <Input
                    id="userName"
                    value={userName}
                    onChange={(e) => setUserName(e.target.value)}
                    placeholder="نام"
                    required
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label htmlFor="intention">
                    نیت{spread === "7-card" ? " *" : " (اختیاری)"}
                  </Label>
                  <Input
                    id="intention"
                    value={intention}
                    onChange={(e) => setIntention(e.target.value)}
                    placeholder={
                      spread === "18-card"
                        ? "مثلاً: آیا او هنوز به من علاقه دارد؟"
                        : "نیت یا سوال خود را بنویسید"
                    }
                    required={spread === "7-card"}
                    className="mt-1"
                  />
                  {spread === "18-card" && (
                    <p className="mt-2 text-sm text-amber-700 dark:text-amber-400" role="note">
                      لطفاً فقط نیت یا سوال <strong>احساسی</strong> وارد کنید (رابطه، عشق، احساسات
                      طرف مقابل). سوالات مالی، کاری یا عمومی برای این فال مناسب نیستند.
                    </p>
                  )}
                </div>
                <div>
                  <Label htmlFor="partnerName">نام شریک (اختیاری)</Label>
                  <Input
                    id="partnerName"
                    value={partnerName}
                    onChange={(e) => setPartnerName(e.target.value)}
                    placeholder="نام شریک یا طرف رابطه"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label htmlFor="userMaritalStatus">وضعیت تاهل شما (اختیاری)</Label>
                  <select
                    id="userMaritalStatus"
                    className={selectClassName}
                    value={userMaritalStatus}
                    onChange={(e) =>
                      setUserMaritalStatus(e.target.value as MaritalStatusValue | "")
                    }
                  >
                    <option value="">انتخاب کنید</option>
                    {MARITAL_STATUS_OPTIONS.map((opt) => (
                      <option key={opt.value} value={opt.value}>
                        {opt.labelFa}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <Label htmlFor="partnerMaritalStatus">وضعیت تاهل پارتنر (اختیاری)</Label>
                  <select
                    id="partnerMaritalStatus"
                    className={selectClassName}
                    value={partnerMaritalStatus}
                    onChange={(e) =>
                      setPartnerMaritalStatus(e.target.value as MaritalStatusValue | "")
                    }
                  >
                    <option value="">انتخاب کنید</option>
                    {MARITAL_STATUS_OPTIONS.map((opt) => (
                      <option key={opt.value} value={opt.value}>
                        {opt.labelFa}
                      </option>
                    ))}
                  </select>
                </div>
                {error && (
                  <p className="text-sm text-destructive" role="alert">
                    {error}
                  </p>
                )}
                <Button type="submit" className="w-full" disabled={loading}>
                  {loading ? "در حال ثبت..." : `ادامه و انتخاب ${config.count} کارت`}
                </Button>
              </form>
            </CardContent>
          </Card>
        </AnimatedSection>
        <AnimatedSection delay={0.25}>
          <p className="text-center text-sm text-muted-foreground mt-6">
            <Link href="/reading" className="underline">
              بازگشت به انتخاب نوع فال
            </Link>
          </p>
        </AnimatedSection>
      </div>
      <SiteFooter />
    </div>
  );
}