import React, { useState } from 'react';
import { GraduationCap, Laptop, ArrowRight } from 'lucide-react';
import './SearchPathGate.css';

export const SEARCH_PATH_OPTIONS = [
  {
    value: 'High school / traditional',
    title: 'High school / traditional',
    description: 'I am (or am supporting) a high school student choosing a first college — campus-focused, Common App style timelines.',
    icon: GraduationCap,
  },
  {
    value: 'Returning adult / online',
    title: 'Returning adult / online',
    description: 'I am going back to school as an adult — online, hybrid, or flexible campus options with work and life constraints.',
    icon: Laptop,
  },
];

/**
 * First-run gate: traditional HS path vs returning adult / online steers advisors.
 */
const SearchPathGate = ({ authToken, onComplete }) => {
  const [selected, setSelected] = useState(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  const handleContinue = async () => {
    if (!selected) {
      setError('Pick a path to continue.');
      return;
    }
    setSaving(true);
    setError('');
    try {
      const resp = await fetch(`${process.env.REACT_APP_API_URL}/api/users/me/profile`, {
        method: 'PUT',
        headers: {
          Authorization: `Bearer ${authToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ cyber_role: selected }),
      });
      if (!resp.ok) {
        const data = await resp.json().catch(() => ({}));
        throw new Error(data.detail || 'Could not save your choice');
      }
      const profile = await resp.json();
      localStorage.setItem('universityFinderSearchPath', selected);
      onComplete?.(profile, selected);
    } catch (e) {
      setError(e.message || 'Could not save your choice');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="search-path-backdrop" role="dialog" aria-modal="true" aria-labelledby="search-path-title">
      <div className="search-path-card">
        <h2 id="search-path-title">Where are you in your college journey?</h2>
        <p className="search-path-sub">
          This steers every advisor — fit matching, aid strategy, accommodations, and application timelines.
        </p>
        <div className="search-path-options">
          {SEARCH_PATH_OPTIONS.map((opt) => {
            const Icon = opt.icon;
            const active = selected === opt.value;
            return (
              <button
                key={opt.value}
                type="button"
                className={`search-path-option ${active ? 'active' : ''}`}
                onClick={() => { setSelected(opt.value); setError(''); }}
                disabled={saving}
              >
                <Icon className="search-path-option-icon" size={22} />
                <span className="search-path-option-title">{opt.title}</span>
                <span className="search-path-option-desc">{opt.description}</span>
              </button>
            );
          })}
        </div>
        {error && <div className="search-path-error">{error}</div>}
        <button
          type="button"
          className="search-path-continue"
          onClick={handleContinue}
          disabled={saving || !selected}
        >
          {saving ? 'Saving…' : 'Continue to advisors'}
          {!saving && <ArrowRight size={16} />}
        </button>
      </div>
    </div>
  );
};

export function needsSearchPath(profile) {
  const role = profile?.cyber_role;
  if (!role) return true;
  const normalized = String(role).toLowerCase();
  return !(
    normalized.includes('high school')
    || normalized.includes('traditional')
    || normalized.includes('returning')
    || normalized.includes('adult')
    || normalized.includes('online')
    || normalized.includes('both')
  );
}

export default SearchPathGate;