import React, { useState } from 'react';
import {
  GraduationCap,
  ArrowRight,
  ShieldAlert,
  MessageSquare,
  Mail,
  HelpCircle,
  ExternalLink,
  Laptop,
  CheckCircle2,
  Lock,
} from 'lucide-react';
import { Breadcrumbs } from '../components/Breadcrumbs';

interface LearnerAccessPageProps {
  onNavigate: (path: string) => void;
  onOpenEnquiry: (mode?: 'learner' | 'guidance' | 'corporate' | 'partnership' | 'advisory') => void;
}

export function LearnerAccessPage({ onNavigate, onOpenEnquiry }: LearnerAccessPageProps) {
  const [showPortalModal, setShowPortalModal] = useState(false);
  const breadcrumbs = [{ label: 'Learner Access' }];

  return (
    <div className="bg-[#F6F7F2] min-h-screen">
      <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />

      {/* Header */}
      <section className="bg-white border-b border-[#E5E7DC] py-14 sm:py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="max-w-3xl space-y-4">
            <div className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#0B4035] bg-[#F3F8D3] px-3 py-1 rounded-full">
              <span>Enrolled Student Portal</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold text-[#0B4035] tracking-tight leading-tight">
              Learner access and portal.
            </h1>

            <p className="text-base sm:text-lg text-stone-700 leading-relaxed">
              Welcome back to your PANIA learning dashboard. Access active course schedules, live Zoom/Meet links, lab environments, and submit milestone assignments for mentor evaluation.
            </p>
          </div>
        </div>
      </section>

      {/* Main Access Cards */}
      <section className="py-14 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          {/* Left: LMS Gateway */}
          <div className="lg:col-span-7 bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs space-y-6">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-xl bg-[#0B4035] text-[#D5E64D] flex items-center justify-center">
                <GraduationCap className="w-7 h-7" />
              </div>
              <div>
                <h2 className="font-serif font-bold text-2xl text-[#0B4035]">
                  PANIA Learning Management System (LMS)
                </h2>
                <span className="text-xs text-stone-500">Official Cohort Portal</span>
              </div>
            </div>

            <p className="text-sm text-stone-700 leading-relaxed">
              PANIA students receive individualized cohort credentials upon enrolment. For security and privacy, passwords and student grade records are managed strictly within the protected learning environment, never on the public marketing website.
            </p>

            {/* Security Guarantee Box (Pack 4 IN01) */}
            <div className="p-4 rounded-xl bg-[#F6F7F2] border border-[#E5E7DC] text-xs text-stone-600 space-y-2">
              <div className="flex items-center gap-2 text-[#0B4035] font-bold">
                <Lock className="w-4 h-4 text-[#0B4035]" />
                <span>Protected Access Boundary</span>
              </div>
              <p>
                In accordance with PANIA security policy, meeting room passwords and private class links are distributed directly to confirmed cohort members via their registered contact channels.
              </p>
            </div>

            {/* Portal Launch Action */}
            <div className="pt-2">
              <button
                onClick={() => setShowPortalModal(true)}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-[#0B4035] text-[#D5E64D] hover:bg-[#072C24] font-bold text-sm transition-colors shadow-xs cursor-pointer"
              >
                <span>Launch Learner Portal</span>
                <ExternalLink className="w-4 h-4" />
              </button>
            </div>
          </div>

          {/* Right: Joining Help & Support Guide */}
          <div className="lg:col-span-5 bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs space-y-5">
            <h3 className="font-serif font-bold text-xl text-[#0B4035]">
              Need help accessing your session?
            </h3>

            <p className="text-xs sm:text-sm text-stone-600 leading-relaxed">
              If you have registered for an upcoming intake or are experiencing issues with your joining link:
            </p>

            <div className="space-y-3 text-xs">
              <div className="p-3 bg-[#F6F7F2] rounded-xl flex items-start gap-2.5">
                <CheckCircle2 className="w-4 h-4 text-[#207A78] shrink-0 mt-0.5" />
                <div>
                  <strong className="text-stone-800 block">Check your email & WhatsApp:</strong>
                  <span className="text-stone-600">
                    Cohort joining instructions are sent 24 hours prior to your first live class.
                  </span>
                </div>
              </div>

              <div className="p-3 bg-[#F6F7F2] rounded-xl flex items-start gap-2.5">
                <CheckCircle2 className="w-4 h-4 text-[#207A78] shrink-0 mt-0.5" />
                <div>
                  <strong className="text-stone-800 block">WhatsApp Support Desk:</strong>
                  <span className="text-stone-600">
                    Reach our cohort coordinator directly on +254 101 936 893 for immediate room links.
                  </span>
                </div>
              </div>

              <div className="p-3 bg-[#F6F7F2] rounded-xl flex items-start gap-2.5">
                <CheckCircle2 className="w-4 h-4 text-[#207A78] shrink-0 mt-0.5" />
                <div>
                  <strong className="text-stone-800 block">Device & Software Setup:</strong>
                  <span className="text-stone-600">
                    Ensure Zoom and Google Chrome are updated to the latest version before session launch.
                  </span>
                </div>
              </div>
            </div>

            <div className="pt-2 border-t border-stone-100 flex flex-col gap-2">
              <a
                href="https://wa.me/254101936893?text=Hello%20PANIA%2C%20I%20am%20an%20enrolled%20student%20needing%20assistance%20with%20my%20joining%20details."
                target="_blank"
                rel="noopener noreferrer"
                className="w-full py-2.5 px-4 rounded-xl bg-[#25D366] text-white hover:bg-[#1EBE5D] font-medium text-xs text-center flex items-center justify-center gap-2 transition-colors"
              >
                <MessageSquare className="w-3.5 h-3.5" />
                <span>Message Student Support on WhatsApp</span>
              </a>

              <a
                href="mailto:contact@pania.com?subject=Learner%20Access%20Assistance"
                className="w-full py-2 px-4 rounded-xl border border-stone-300 text-stone-700 hover:bg-stone-50 font-medium text-xs text-center flex items-center justify-center gap-2 transition-colors"
              >
                <Mail className="w-3.5 h-3.5" />
                <span>Email Admissions: contact@pania.com</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Helpful Portal Explanation Modal (Avoiding dead links - Pack 4 requirement) */}
      {showPortalModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs">
          <div className="bg-white rounded-2xl max-w-md w-full p-6 border border-stone-200 shadow-2xl space-y-4">
            <div className="w-12 h-12 rounded-full bg-[#F3F8D3] text-[#0B4035] flex items-center justify-center mx-auto">
              <Laptop className="w-6 h-6" />
            </div>

            <div className="text-center">
              <h3 className="font-serif font-bold text-xl text-[#0B4035]">
                Learner Portal Connection
              </h3>
              <p className="text-xs text-stone-600 mt-2 leading-relaxed">
                Active learners access their dedicated cohort LMS instance via personalized invitation credentials sent to their confirmed email and WhatsApp number.
              </p>
            </div>

            <div className="p-3 bg-[#F6F7F2] rounded-xl text-xs text-stone-600 space-y-1">
              <p>
                <strong>Current Cohort Status:</strong> If you are already enrolled in an ongoing intake, please check your WhatsApp group or email inbox for your direct single-sign-on link.
              </p>
            </div>

            <div className="flex items-center justify-end gap-2 pt-2 border-t border-stone-100">
              <button
                onClick={() => setShowPortalModal(false)}
                className="px-4 py-2 text-xs font-semibold text-stone-600 hover:text-stone-900"
              >
                Close
              </button>
              <a
                href="https://wa.me/254101936893?text=Hello%20PANIA%2C%20please%20resend%20my%20cohort%20portal%20access%20link."
                target="_blank"
                rel="noopener noreferrer"
                className="px-4 py-2 text-xs font-bold rounded-lg bg-[#0B4035] text-[#D5E64D] hover:bg-[#072C24]"
              >
                Request My Link
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}