"use client";
import { React, useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import Navbar from "../../../components/navbar";
import Loader from '../../../components/loader';

const ResultPage = () => {
  const session_id = useSearchParams().get('session_id');
  const [loading, setLoading] = useState(true);
  const [session, setSession] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCheckoutSession = async () => {
      if (!session_id) return;
      try {
        const res = await fetch(`/api/checkout_sessions?session_id=${session_id}`);
        const sessionData = await res.json();
        if (res.ok) {
          setSession(sessionData);
        } else {
          setError(sessionData.error);
        }
      } catch (err) {
        setError('An error occurred while retrieving the session.');
      } finally {
        setLoading(false);
      }
    };
    fetchCheckoutSession();
  }, [session_id]);

  if (loading) {
    return <Loader />;
  }

  if (error) {
    return (
      <div className="max-w-sm text-center mt-4">
        <h6 className="text-red-600">{error}</h6>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center pt-12 bg-gradient p-8">
      <Navbar />
      <h4 className="mt-8 text-4xl font-bold text-center text-black">
        {session.payment_status === 'paid' ? "Thank you for your purchase!" : "Payment failed :("}
      </h4>
      <div className="m-2 p-4 bg-white rounded-lg opacity-60">
        <a href="/dashboard" className="inline-block px-4 py-2 bg-gray-400 text-black rounded transition duration-300 hover:bg-gray-600 mr-4">Return Home</a>
        {session.payment_status === 'paid' ? (
          <>
            <h6 className="text-lg text-black my-2">Session ID: {session_id}</h6>
            <p className="text-base text-black text-center my-2">
              We have received your payment. You will receive an email with the order details shortly.
            </p>
            <div className="text-center">
              <h5 className="text-lg font-semibold text-black mt-4">Order Summary:</h5>
              <ul className="text-black">
                {session.line_items.map(item => (
                  <li key={item.id} className="my-1">
                    {item.quantity} x {item.description} - ${item.amount_total / 100}
                  </li>
                ))}
              </ul>
              <p className="text-lg font-semibold text-black mt-4">Total Amount: ${session.amount_total / 100}</p>
            </div>
            <p className="text-base text-black text-center my-2">Payment Method: {session.payment_method_types.join(', ')}</p>
          </>
        ) : (
          <>
            <p className="text-base text-black text-center my-2">
              Your payment was not successful. Please try again.
            </p>
            <div className="text-center">
              <p className="text-base text-black my-2">
                Possible reasons for the failure include:
              </p>
              <ul className="text-black list-disc list-inside">
                <li>Insufficient funds in your account.</li>
                <li>Incorrect payment details entered.</li>
                <li>Payment method not supported.</li>
                <li>Network issues during the transaction.</li>
              </ul>
            </div>
            <p className="text-base text-black text-center my-2">
              Please check your payment information and try again.
              <br />
              If the issue persists, consider using a different payment method.
            </p>
            <div className="text-center">
              <a href="/pricing" className="inline-block px-4 py-2 bg-yellow-600 text-white rounded transition duration-300 hover:bg-orange-500">Retry Payment</a>
            </div>
            <p className="text-base text-black text-center my-2">
              For further assistance, please contact our support team at <a href="mailto:support@estudiflash.com" className="text-blue-500">support@example.com</a>.
            </p>
          </>
        )}
      </div>
    </div>
  );
}

export default ResultPage;