import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/shared/common/ui/button";
import { Card, CardHeader, CardContent } from "@/shared/common/ui/card";
import { useAuthUser } from "@/shared/hooks/useAuthUser";

import VerifyOtp from "./verifyOTP";
import { Clock } from "lucide-react";
import { useUser } from "@/shared/context/UserContext";

export const LandingPageLayout = () => {
  const userDetails = useUser();
  const doesUserHaveSetPassword = userDetails?.hasFinishedRegistration;
  const shouldBlock = doesUserHaveSetPassword === false;

  const shellClasses =
    "min-h-screen flex flex-col w-full " +
    (shouldBlock ? "blur-sm pointer-events-none select-none" : "");

  return (
    <>
      {/* Main Shell (blurred & non-interactive when blocked) */}
      <div className={shellClasses} aria-hidden={shouldBlock}>
        {/* Header Section */}
        <header className="text-center py-10 border-b border-gray-200 bg-primary-500 ">
          <div className="container">
            <h1 className="text-4xl font-bold text-primary-foreground mb-4">
              Welcome to SmartOffice
            </h1>
            <p className="text-xl text-primary-foreground/90 max-w-2xl mx-auto mb-8">
              Submit, track, and manage letters to organizations seamlessly. Our
              system ensures transparency and traceability at every step.
            </p>
            {!userDetails && (
              <div className="flex justify-center gap-4">
                <Button asChild variant="secondary">
                  <Link to="/external-portal/signin">Sign In</Link>
                </Button>
                <Button asChild>
                  <Link to="/external-portal/signup">Sign Up</Link>
                </Button>
              </div>
            )}
          </div>
        </header>

        {/* Main Content */}
        <main className="flex-grow py-12 px-4">
          <section className="container max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-center text-foreground mb-4">
              How It Works
            </h2>
            <p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto mb-12">
              From registration to letter submission and tracking, we've made
              the process simple.
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <Card className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <h3 className="text-xl font-semibold text-primary">
                    1. Sign Up
                  </h3>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">
                    Register your organization or as an individual. Get a
                    confirmation via text message.
                  </p>
                </CardContent>
              </Card>

              <Card className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <h3 className="text-xl font-semibold text-primary">
                    2. Log In
                  </h3>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">
                    Access your dashboard and start interacting with the system
                    securely.
                  </p>
                </CardContent>
              </Card>

              <Card className="hover:shadow-md transition-shadow hover:cursor-pointer">
                <Link to="/external-portal/portal-outgoing/submit-letter">
                  <CardHeader>
                    <h3 className="text-xl font-semibold text-primary">
                      3. Submit Letters
                    </h3>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">
                      Select your target organization and submit your letter
                      directly through the portal.
                    </p>
                  </CardContent>
                </Link>
              </Card>

              <Card className="hover:shadow-md transition-shadow hover:cursor-pointer">
                <Link to="/external-portal/portal-outgoing">
                  <CardHeader>
                    <h3 className="text-xl font-semibold text-primary">
                      4. Track Activities
                    </h3>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">
                      See your submitted letters and view the activity logs
                      associated with each.
                    </p>
                  </CardContent>
                </Link>
              </Card>
            </div>
          </section>
        </main>

        {/* Footer */}
        <footer className="py-6 border-t border-gray-200 text-center text-muted-foreground">
          <div className="container">
            <p>© 2025 SmartOffice. All rights reserved.</p>
          </div>
        </footer>
      </div>

      {shouldBlock && (
        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center text-center p-6 pointer-events-auto">
          <div className="bg-white bg-opacity-90 backdrop-blur-md rounded-xl shadow-xl p-8 max-w-md w-full border border-gray-200">
            <Clock className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
            <h2 className="text-2xl font-bold text-red-600 mb-4">
              Access Restricted
            </h2>
            <p className="text-gray-800 text-lg">
              Your registration is pending. Please wait for approval from the
              SmartOffice administrator.
            </p>
          </div>
        </div>
      )}
    </>
  );
};

export default LandingPageLayout;
