"use client";

import { useState, useEffect, useCallback } from "react";
import { CheckCircle, Loader2 } from "lucide-react";

const t = {
  en: {
    loading: "Loading...",
    defaultThankYou: "Thank you for your feedback!",
    defaultSubtitle: "Your review helps us improve our service.",
    poweredBy: "Powered by Mawidi",
    error: "Unable to load page.",
  },
  ar: {
    loading: "جاري التحميل...",
    defaultThankYou: "شكراً لملاحظاتك!",
    defaultSubtitle: "تقييمك يساعدنا على تحسين خدماتنا.",
    poweredBy: "مدعوم من Mawidi",
    error: "تعذر تحميل الصفحة.",
  },
};

interface ThankYouData {
  businessName: string;
  logoUrl: string | null;
  primaryColor: string;
  bgColor: string;
  thankYouMessage: string | null;
  showPoweredBy: boolean;
}

interface PageProps {
  params: { lang: string; token: string };
}

export default function ThankYouPage({ params }: PageProps) {
  const { lang, token } = params;
  const isAr = lang === "ar";
  const labels = t[isAr ? "ar" : "en"];

  const [data, setData] = useState<ThankYouData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const fetchData = useCallback(async () => {
    try {
      const res = await fetch(`/api/public/review/${token}/thank-you`);
      if (res.ok) {
        const json = await res.json();
        setData(json);
      } else {
        setError(true);
      }
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [token]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  if (loading) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-10 h-10 text-emerald-500 animate-spin mx-auto mb-3" />
          <p className="text-slate-500">{labels.loading}</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center px-4">
        <p className="text-slate-500">{labels.error}</p>
      </div>
    );
  }

  const primaryColor = data?.primaryColor || "#10b981";
  const bgColor = data?.bgColor || "#ffffff";

  return (
    <div
      className="min-h-screen flex items-center justify-center px-4"
      dir={isAr ? "rtl" : "ltr"}
      style={{ backgroundColor: bgColor }}
    >
      <div className="max-w-md w-full text-center">
        {data?.logoUrl && (
          <img
            src={data.logoUrl}
            alt={data.businessName}
            className="h-12 mx-auto mb-6 object-contain"
          />
        )}

        <div
          className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"
          style={{ backgroundColor: `${primaryColor}15` }}
        >
          <CheckCircle className="w-8 h-8" style={{ color: primaryColor }} />
        </div>

        <h1 className="text-2xl font-bold text-slate-900 mb-3">
          {data?.thankYouMessage || labels.defaultThankYou}
        </h1>

        {!data?.thankYouMessage && (
          <p className="text-slate-500 mb-6">{labels.defaultSubtitle}</p>
        )}

        {data?.businessName && (
          <p className="text-sm text-slate-400 mt-8">{data.businessName}</p>
        )}

        {data?.showPoweredBy && (
          <p className="text-xs text-slate-400 mt-4">{labels.poweredBy}</p>
        )}
      </div>
    </div>
  );
}