// src/components/PreparingLanding.js
import React, { useState, useCallback, useEffect, useContext } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Button } from './ui/button.js';
import LoanRepaymentDrawer from './LoanRepaymentDrawer.js';
import { ProfileCtx } from '../App.js';

function PreparingLanding() {
  const navigate = useNavigate();
  const location = useLocation();
  const { user } = useContext(ProfileCtx);

  /* ─── Drawer visibility ─────────────────────────────── */
  const [showLoan, setShowLoan] = useState(false);

  /* ─── Stub-school state lives here; Drawer mutates it ─ */
  const [schools, setSchools] = useState([]); // [] → quick-fill form
  const [cipCodes] = useState([]);            // you may hold these at page level
  const [userZip] = useState('');
  const [loanResults, setLoanResults] = useState([]);

  /* Esc -to-close convenience */
  const escHandler = useCallback((e) => {
    if (e.key === 'Escape') setShowLoan(false);
  }, []);
  useEffect(() => {
    if (showLoan) window.addEventListener('keydown', escHandler);
    return () => window.removeEventListener('keydown', escHandler);
  }, [showLoan, escHandler]);

    /* ─── Auto-open drawer when routed from nav ───────── */
  useEffect(() => {
    // support either query ?loan=1 or navigation state { openLoan: true }
    try {
      const qs = new URLSearchParams(location.search);
      const viaQuery = qs.get('loan') === '1';
      const viaState = location.state && location.state.openLoan === true;
      if ((viaQuery || viaState) && !showLoan) {
        setShowLoan(true);
      }
    } catch {}
  }, [location.search, location.state, showLoan]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-aptiva-gray to-white p-6">
      <div className="w-full max-w-3xl bg-white shadow-xl rounded-xl p-8 md:p-10 space-y-8">
        {/* ───────────────── TITLE / INTRO ───────────────── */}
        <div className="text-center">
          <h1 className="text-3xl md:text-4xl font-bold text-aptiva mb-2">
            Preparing for Your (Next) Career
          </h1>
          <p className="text-gray-600 max-w-2xl mx-auto text-sm md:text-base leading-relaxed">
            Build the right skills and plan your education so you can confidently
            enter—or transition into—your new career.
          </p>
        </div>

        {/* ──────────────── 1) PATH CHOICE ──────────────── */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold">Which Path Fits You?</h2>
          <p className="text-gray-700">
            We can help you identify whether a <strong>skills-based program</strong> (certifications, bootcamps) or a{' '}
            <strong>formal education route</strong> (two- or four-year college) is the best fit. Whichever path you choose,
            AptivaAI will help you map next steps—from applying to graduating.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Education path card */}
            <div className="flex flex-col border rounded-lg p-5 hover:shadow-md transition-colors">
              <h3 className="text-lg font-semibold mb-2">Plan My Education Path</h3>
              <p className="text-sm text-gray-600 mb-4 flex-1">
                Compare degrees, certificates, and training paths for your target role.
              </p>
              <Button
                className="w-full mt-auto bg-aptiva hover:bg-aptiva-dark text-white"
                onClick={() => navigate('/educational-programs')}
              >
                Plan Education
              </Button>
            </div>

            {/* Loan/Cost card */}
            <div className="flex flex-col border rounded-lg p-5 hover:shadow-md transition-colors">
              <h3 className="text-lg font-semibold mb-2">Cost of Education &amp; Loan Repayment</h3>
              <p className="text-sm text-gray-600 mb-4 flex-1">
                Estimate total costs and monthly payments with realistic assumptions.
              </p>
              <Button
                className="w-full mt-auto bg-aptiva hover:bg-aptiva-dark text-white"
                onClick={() => setShowLoan(true)}
              >
                Open Loan Tool
              </Button>
            </div>
          </div>
        </section>

        {/* ──────────────── 2) STILL EXPLORING ──────────────── */}
        <section className="space-y-3">
          <h2 className="text-xl font-semibold">Still Exploring?</h2>
          <p className="text-gray-700">
            Want to revisit career possibilities? Retake our Interest Inventory to see other matching paths.
          </p>
          <Button
            className="bg-aptiva hover:bg-aptiva-dark text-white"
            onClick={() => navigate('/interest-inventory')}
          >
            Retake Interest Inventory
          </Button>
        </section>
      </div>

      {/* ─────────────── DRAWER MOUNT ─────────────── */}
      {showLoan && (
        <LoanRepaymentDrawer
          open={showLoan}
          onClose={() => {
            setShowLoan(false);
            // clear nav flag so it doesn’t auto-reopen
            navigate({ pathname: location.pathname }, { replace: true, state: {} });
          }}
          schools={schools}
          setSchools={setSchools}
          results={loanResults}
          setResults={setLoanResults}
          isPremium={user?.is_premium || user?.is_pro_premium}
          cipCodes={cipCodes}
          userZip={userZip}
          user={user}
        />
      )}
    </div>
  );
}

export default PreparingLanding;