"use client";

import { useState, useTransition } from "react";
import { CheckCircle, AlertCircle, Send, Star as StarIcon } from "lucide-react";
import { submitRating } from "@/services/rating.service";
import { formatDateRange } from "@/lib/formatters/date";
import RatingStarsDisplay from "./RatingStarsDisplay";
import RatingStarsPicker from "./RatingStarsPicker";
import type { RatingDetail } from "@/types/rating";
import styles from "./RatingComponents.module.css";

interface Props {
  token: string;
  detail: RatingDetail;
}

export default function RatingSubmitCard({ token, detail }: Props) {
  const [scores, setScores] = useState<Record<number, number>>({});
  const [review, setReview] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, startSubmitting] = useTransition();
  const [submitted, setSubmitted] = useState(!detail.can_submit);

  const tripLine =
    detail.trip.mountain && detail.trip.start_date && detail.trip.end_date
      ? `${detail.trip.mountain} via ${detail.trip.route || "Jalur Resmi"} · ${formatDateRange(
          detail.trip.start_date,
          detail.trip.end_date
        )}`
      : detail.trip.mountain
      ? `${detail.trip.mountain} via ${detail.trip.route || "Jalur Resmi"}`
      : null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const unanswered = detail.questions.filter((q) => !scores[q.id]);
    if (unanswered.length > 0) {
      setError("Beri rating bintang untuk semua pertanyaan terlebih dahulu.");
      return;
    }
    setError(null);
    startSubmitting(async () => {
      try {
        await submitRating(token, {
          answers: detail.questions.map((q) => ({ rating_question_id: q.id, score: scores[q.id] })),
          review: review.trim() || undefined,
        });
        setSubmitted(true);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Gagal mengirim rating. Coba kembali.");
      }
    });
  };

  if (submitted) {
    return (
      <article className={styles.ratingCard}>
        <div className={styles.topIconHeader}>
          <div className={styles.iconBadgeWrapper}>
            <CheckCircle size={32} strokeWidth={2.2} aria-hidden />
          </div>
        </div>
        <h1 className={styles.cardTitle}>Terima Kasih!</h1>
        <p className={styles.cardDesc}>Rating &amp; ulasan Anda untuk trip ini sudah kami terima.</p>
        {detail.score !== null && (
          <div className={styles.submittedSummary}>
            <RatingStarsDisplay value={detail.score} size={26} />
            {detail.answers.length > 0 && (
              <div className={styles.submittedAnswersList}>
                {detail.answers.map((a) => (
                  <div key={a.rating_question_id} className={styles.answerSummaryRow}>
                    <span className={styles.answerSummaryQuestion}>{a.question ?? "(Pertanyaan telah dihapus)"}</span>
                    <RatingStarsDisplay value={a.score} size={14} />
                  </div>
                ))}
              </div>
            )}
            {detail.review && <p className={styles.testimonialText}>&ldquo;{detail.review}&rdquo;</p>}
          </div>
        )}
      </article>
    );
  }

  return (
    <article className={styles.ratingCard}>
      <div className={styles.topIconHeader}>
        <div className={styles.iconBadgeWrapper}>
          <StarIcon size={32} strokeWidth={2.2} fill="currentColor" aria-hidden />
        </div>
      </div>

      <h1 className={styles.cardTitle}>
        Bagaimana <span className={styles.cardTitleHighlight}>Pengalaman Anda?</span>
      </h1>
      <p className={styles.cardDesc}>
        {tripLine
          ? `Ceritakan pengalaman Anda pada trip ${tripLine}.`
          : "Ceritakan pengalaman perjalanan Anda bersama kami."}
      </p>

      <form onSubmit={handleSubmit} className={styles.ratingForm} noValidate>
        <div className={styles.questionsList}>
          {detail.questions.map((q) => (
            <div key={q.id} className={styles.questionBlock}>
              <p className={styles.questionText}>{q.question}</p>
              <RatingStarsPicker
                value={scores[q.id] ?? 0}
                onChange={(v) => setScores((prev) => ({ ...prev, [q.id]: v }))}
                size={32}
                showLabel
              />
            </div>
          ))}
        </div>

        <div className={styles.inputGroup}>
          <label htmlFor="rating-review" className={styles.inputLabel}>
            Ulasan Tambahan (opsional)
          </label>
          <textarea
            id="rating-review"
            className={styles.textArea}
            placeholder="Bagikan pengalaman Anda selama trip..."
            rows={4}
            maxLength={2000}
            value={review}
            onChange={(e) => setReview(e.target.value)}
          />
        </div>

        {error && (
          <div className={styles.errorBanner} role="alert">
            <AlertCircle size={16} aria-hidden />
            <span>{error}</span>
          </div>
        )}

        <button type="submit" disabled={isSubmitting} className={styles.btnStart} id="rating-submit-btn">
          <Send size={18} aria-hidden />
          <span>{isSubmitting ? "Mengirim..." : "Kirim Rating"}</span>
        </button>
      </form>
    </article>
  );
}