'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useGlobalContext } from '@/context/Provider';
import { Search, Bell, User, Clock } from 'lucide-react';

const UnderReviewIllustration = () => (
  <svg
    viewBox="0 0 500 380"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-full max-w-[320px] sm:max-w-[380px] h-auto drop-shadow-sm select-none mx-auto"
  >
    <ellipse cx="250" cy="210" rx="190" ry="135" fill="var(--primary-brand)" fillOpacity="0.08" />
    <path
      d="M120 170C120 155 132 143 147 143C152 143 157 145 161 148C167 136 179 128 193 128C212 128 227 142 229 160C234 158 239 157 245 157C262 157 275 170 275 187H120V170Z"
      fill="white"
      fillOpacity="0.75"
    />
    <path
      d="M310 140C310 128 319 118 331 118C335 118 339 119 342 122C347 112 357 105 368 105C383 105 395 116 397 131C401 129 405 128 410 128C423 128 434 138 434 152H310V140Z"
      fill="white"
      fillOpacity="0.85"
    />

    <rect x="170" y="315" width="240" height="6" rx="3" fill="#E2E8F0" />

    <path d="M195 230Q175 200 160 185Q175 210 195 235" stroke="#10B981" strokeWidth="4" strokeLinecap="round" />
    <path d="M195 230C165 210 150 170 155 160C170 165 185 195 195 225" fill="#34D399" />
    <path d="M200 235C190 205 195 165 205 155C215 170 210 205 200 240" fill="#10B981" />
    <path d="M205 240C225 220 235 190 230 180C215 185 205 215 205 240" fill="#059669" />
    <path d="M180 245L185 290C185 293 188 295 191 295H214C217 295 220 293 220 290L225 245H180Z" fill="var(--orange-200)" />
    <rect x="177" y="240" width="51" height="8" rx="4" fill="var(--primary-brand)" />

    <path
      d="M375 130C370 120 355 120 350 130C342 125 330 135 335 145C328 155 338 168 348 168H387C397 168 407 155 400 145C405 135 393 125 385 130C382 125 378 125 375 130Z"
      fill="var(--orange-50)"
      stroke="var(--orange-100)"
      strokeWidth="2"
    />
    <rect x="345" y="168" width="45" height="12" rx="2" fill="#FFFFFF" stroke="var(--orange-100)" strokeWidth="1.5" />

    <rect x="330" y="200" width="105" height="115" rx="6" fill="#F8FAFC" stroke="var(--orange-200)" strokeWidth="2" />
    <path d="M325 200H440L432 220H333L325 200Z" fill="var(--primary-brand)" />
    <path d="M344 200L350 220H362L358 200H344Z" fill="white" fillOpacity="0.9" />
    <path d="M376 200L374 220H386L390 200H376Z" fill="white" fillOpacity="0.9" />
    <path d="M408 200L398 220H410L422 200H408Z" fill="white" fillOpacity="0.9" />
    <rect x="345" y="235" width="40" height="40" rx="4" fill="var(--orange-50)" stroke="var(--orange-200)" strokeWidth="2" />
    <line x1="365" y1="235" x2="365" y2="275" stroke="var(--orange-200)" strokeWidth="2" />
    <rect x="395" y="245" width="28" height="70" rx="3" fill="var(--primary-brand)" fillOpacity="0.2" stroke="var(--primary-brand)" strokeWidth="2" />

    <rect
      x="210"
      y="100"
      width="145"
      height="195"
      rx="14"
      fill="white"
      stroke="var(--primary-brand)"
      strokeWidth="5"
      className="drop-shadow-md"
    />
    <path d="M255 95H310V108C310 112.418 306.418 116 302 116H263C258.582 116 255 112.418 255 108V95Z" fill="var(--primary-brand)" />
    <rect x="268" y="88" width="29" height="12" rx="4" fill="var(--primary-brand)" />
    <circle cx="282.5" cy="94" r="3" fill="white" />

    <circle cx="236" cy="138" r="8" fill="#DCFCE7" />
    <path d="M232 138L235 141L240 135" stroke="#16A34A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    <rect x="252" y="135" width="75" height="6" rx="3" fill="#E2E8F0" />

    <circle cx="236" cy="168" r="8" fill="#DCFCE7" />
    <path d="M232 168L235 171L240 165" stroke="#16A34A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    <rect x="252" y="165" width="65" height="6" rx="3" fill="#E2E8F0" />

    <circle cx="236" cy="198" r="8" fill="#DCFCE7" />
    <path d="M232 198L235 201L240 195" stroke="#16A34A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    <rect x="252" y="195" width="70" height="6" rx="3" fill="#E2E8F0" />

    <circle cx="236" cy="228" r="8" fill="#DCFCE7" />
    <path d="M232 228L235 231L240 225" stroke="#16A34A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    <rect x="252" y="225" width="55" height="6" rx="3" fill="#E2E8F0" />

    <path d="M305 230L350 290" stroke="var(--primary-brand)" strokeWidth="14" strokeLinecap="round" />
    <path d="M305 230L350 290" stroke="var(--orange-400)" strokeWidth="10" strokeLinecap="round" />
    <circle cx="275" cy="195" r="42" fill="var(--primary-brand)" fillOpacity="0.12" stroke="var(--primary-brand)" strokeWidth="6" />
    <circle cx="275" cy="195" r="37" stroke="var(--primary-brand)" strokeWidth="4" />
    <path d="M252 175C262 165 278 163 290 168" stroke="white" strokeWidth="4" strokeLinecap="round" fill="none" />
  </svg>
);

const UnderReviewPage = () => {
  const { notificationData } = useGlobalContext();
  const router = useRouter();

  useEffect(() => {
    if (notificationData?.notification?.body === 'Your vendor/store has been approved.') {
      router.push('/');
    }
  }, [notificationData, router]);

  const handleBackToLogin = () => {
    router.push('/');
  };

  return (
    <div className="h-screen w-full flex flex-col items-center bg-slate-50/50 px-4 py-8 sm:py-12 overflow-y-auto custom-scrollbar">
      <div className="my-auto w-full max-w-xl flex flex-col items-center text-center">
        <UnderReviewIllustration />

        <h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-6 tracking-tight">
          Your application is under review
        </h1>

        <p className="text-slate-500 text-sm sm:text-base mt-2.5 max-w-md leading-relaxed">
          We&apos;re currently checking your Vendor/Store details and documents. You&apos;ll receive an update once the review is complete.
        </p>

        <div className="w-full mt-8 bg-[var(--primary-brand)]/[0.04] border border-[var(--primary-brand)]/15 rounded-2xl p-5 sm:p-6 text-left shadow-sm backdrop-blur-sm">
          <h2 className="text-slate-900 font-bold text-base sm:text-lg mb-4">
            What happens next?
          </h2>

          <div className="space-y-4">
            <div className="flex items-center gap-3.5">
              <div className="w-9 h-9 rounded-full bg-[var(--primary-brand)]/10 text-[var(--primary-brand)] flex items-center justify-center shrink-0">
                <Search className="w-4 h-4 stroke-[2.5]" />
              </div>
              <p className="text-slate-700 text-sm sm:text-base font-medium">
                Our team will verify your application details.
              </p>
            </div>

            <div className="flex items-center gap-3.5">
              <div className="w-9 h-9 rounded-full bg-[var(--primary-brand)]/10 text-[var(--primary-brand)] flex items-center justify-center shrink-0">
                <Bell className="w-4 h-4 stroke-[2.5]" />
              </div>
              <p className="text-slate-700 text-sm sm:text-base font-medium">
                You&apos;ll be notified once the review is completed.
              </p>
            </div>

            <div className="flex items-center gap-3.5">
              <div className="w-9 h-9 rounded-full bg-[var(--primary-brand)]/10 text-[var(--primary-brand)] flex items-center justify-center shrink-0">
                <User className="w-4 h-4 stroke-[2.5]" />
              </div>
              <p className="text-slate-700 text-sm sm:text-base font-medium">
                Please ensure your contact details are up to date.
              </p>
            </div>
          </div>
        </div>

        <div className="flex items-center justify-center gap-2 mt-6 text-slate-500 text-xs sm:text-sm font-medium">
          <Clock className="w-4 h-4 text-slate-400" />
          <span>Expected review time: <strong className="font-semibold text-slate-700">24-48 hours</strong></span>
        </div>

        <button
          onClick={handleBackToLogin}
          className="mt-7 px-8 py-3.5 bg-[var(--primary-brand)] hover:opacity-95 text-white font-semibold text-sm sm:text-base rounded-xl transition-all duration-200 active:scale-[0.98] shadow-md shadow-[var(--primary-brand)]/25 hover:shadow-lg hover:shadow-[var(--primary-brand)]/35 cursor-pointer"
        >
          Back to Login
        </button>
      </div>
    </div>
  );
};

export default UnderReviewPage;

