// screen-resources.jsx — Resource Vault: IU support services surfaced in-mission

const { useState: useStRv, useMemo: useMmRv } = React;

const RV_CATEGORIES = [
  { id: 'all',    label: 'ALL', glyph: '◇' },
  { id: 'mh',     label: 'MENTAL HEALTH', glyph: '◐' },
  { id: 'access', label: 'ACCESS / DISABILITY', glyph: '◈' },
  { id: 'food',   label: 'FOOD / FUNDS', glyph: '◆' },
  { id: 'safety', label: 'SAFETY / LEGAL', glyph: '⌬' },
  { id: 'comm',   label: 'COMMUNITY', glyph: '◉' },
  { id: 'health', label: 'HEALTH / FAMILY', glyph: '✚' },
  { id: 'tech',   label: 'TECH / STUDY', glyph: '⌘' },
];

const RV_NODES = [
  // Mental health
  { id: 'caps', cat: 'mh', name: 'Counseling and Psychological Services (CAPS)',
    blurb: 'Remote one-on-one counseling. Free, virtual mindfulness workshops.',
    tag: 'CAPS', priority: 1, url: 'https://healthcenter.indiana.edu/counseling/index.html' },
  { id: 'timely', cat: 'mh', name: 'TimelyCare',
    blurb: 'Free 24/7 virtual mental health support to all IU students.',
    tag: '24/7', priority: 1, url: 'https://timelycare.com/iu' },
  { id: 'welltrack', cat: 'mh', name: 'WellTrack App',
    blurb: 'Tools to identify and address stress, resilience, anxiety, depression.',
    tag: 'APP', url: 'https://healthcenter.indiana.edu/counseling/online-resources/welltrack.html' },
  { id: 'humangrowth', cat: 'mh', name: 'Center for Human Growth Counseling Clinic',
    blurb: 'Mild-to-moderate mental health support from supervised student counselors.',
    tag: 'CLINIC', url: 'https://education.indiana.edu/about/centers/human-growth/index.html' },
  { id: '988', cat: 'mh', name: 'Suicide & Crisis Hotline (988)',
    blurb: '24/7, free and confidential support for people in distress.',
    tag: 'CRISIS', priority: 2, url: 'https://988lifeline.org/' },

  // Accessibility
  { id: 'aes', cat: 'access', name: 'Accessible Educational Services (AES)',
    blurb: 'Assistance with classroom and exam accommodations.',
    tag: 'AES', url: 'https://studentaffairs.indiana.edu/accessible-educational/' },
  { id: 'atac', cat: 'access', name: 'Assistive Technology & Accessibility Centers (ATAC)',
    blurb: 'Loaner assistive tech for reading, writing, studying. Referral via AES.',
    tag: 'ATAC', url: 'https://atac.iu.edu/' },

  // Food / funds
  { id: 'crimsoncup', cat: 'food', name: 'Crimson Cupboard Food Pantry',
    blurb: 'Free food for IUB students who cannot otherwise afford it.',
    tag: 'PANTRY', url: 'https://studentaffairs.indiana.edu/student-advocates/crimson-cupboard/index.html' },
  { id: 'foodres', cat: 'food', name: 'Food Insecurity Resources',
    blurb: 'Top-utilized food pantries and resources across Monroe County.',
    tag: 'GUIDE', url: 'https://studentaffairs.indiana.edu/student-advocates/food-insecurity.html' },
  { id: 'emergency', cat: 'food', name: 'IU Emergency Funds',
    blurb: 'Application-based emergency funding, capped at $500 per student.',
    tag: '$500', url: 'https://studentaffairs.indiana.edu/student-advocates/emergency-funds.html' },
  { id: 'intl', cat: 'food', name: 'International Students Hardship Assistance',
    blurb: 'Help meeting basic needs during unexpected financial difficulty.',
    tag: 'INTL', url: 'https://ois.iu.edu/' },
  { id: 'money', cat: 'food', name: 'MoneySmarts',
    blurb: 'Free financial guidance and one-on-one consultations.',
    tag: 'FINANCE', url: 'https://moneysmarts.iu.edu/' },

  // Safety / legal
  { id: 'bias', cat: 'safety', name: 'Bias Incident Reporting',
    blurb: 'Report situations where campus has not been welcoming, inclusive, or safe.',
    tag: 'REPORT', url: 'https://studentaffairs.indiana.edu/dean-students/bias-response/index.html' },
  { id: 'care', cat: 'safety', name: 'Care Referrals',
    blurb: 'Confidential referrals for anyone concerned about an IU student\'s wellbeing.',
    tag: 'CARE', url: 'https://studentaffairs.indiana.edu/dean-students/care-referral/index.html' },
  { id: 'advocate', cat: 'safety', name: 'Student Advocates Office',
    blurb: 'Retired IU faculty/staff helping students with academic & personal challenges.',
    tag: 'ADVOC', url: 'https://studentaffairs.indiana.edu/student-advocates/' },
  { id: 'legal', cat: 'safety', name: 'Student Legal Services',
    blurb: 'Free legal support for enrolled IU students.',
    tag: 'LEGAL', url: 'https://studentaffairs.indiana.edu/student-legal-services/' },

  // Community
  { id: 'culture', cat: 'comm', name: 'Cultural Centers & Institutes',
    blurb: 'Neal Marshall, La Casa, First Nations, Asian, Hillel, AAAI, LGBTQ+ centers.',
    tag: '7 CTRS', url: 'https://studentaffairs.indiana.edu/dean-students/cultural-engagement.html' },
  { id: 'vets', cat: 'comm', name: 'Center for Veteran & Military Students',
    blurb: 'Transition support and resources for military-connected students.',
    tag: 'VETS', url: 'https://studentaffairs.indiana.edu/veterans/' },

  // Health / family
  { id: 'health', cat: 'health', name: 'Student Health Center',
    blurb: 'In-person and virtual medical services for enrolled students.',
    tag: 'CLINIC', url: 'https://healthcenter.indiana.edu/' },
  { id: 'pregnancy', cat: 'health', name: 'Pregnancy Support at IU',
    blurb: 'Accommodations and resources during pregnancy and related conditions.',
    tag: 'SUPPORT', url: 'https://studentaffairs.indiana.edu/dean-students/pregnancy-support.html' },
  { id: 'childcare', cat: 'health', name: 'Child & Adult Care',
    blurb: 'Care.com resources for graduate appointees and postdoctoral fellows.',
    tag: 'GRAD', url: 'https://hr.iu.edu/benefits/care.html' },

  // Tech / study
  { id: 'uits', cat: 'tech', name: 'UITS Support Center',
    blurb: 'Tech support for accounts, software, networking, and classroom tools.',
    tag: 'TECH', url: 'https://uits.iu.edu/support' },
  { id: 'laptop', cat: 'tech', name: 'Loaner Laptop',
    blurb: 'Up to 2-week laptop loan via UITS 3D Lab; emergency loaner via SCRC.',
    tag: 'TECH', url: 'https://uits.iu.edu/loaner-laptops' },
];

function ResourcesScreen({ onBack }) {
  const [filter, setFilter] = useStRv('all');
  const [query, setQuery] = useStRv('');

  const visible = useMmRv(() => {
    const q = query.trim().toLowerCase();
    return RV_NODES.filter((n) => {
      if (filter !== 'all' && n.cat !== filter) return false;
      if (!q) return true;
      return n.name.toLowerCase().includes(q) || n.blurb.toLowerCase().includes(q);
    });
  }, [filter, query]);

  return (
    <div style={{ width: '100%', height: '100%', padding: '24px 32px',
      display: 'flex', flexDirection: 'column', gap: 18, overflow: 'hidden' }}>

      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        borderBottom: '1px solid rgba(0,234,255,.18)', paddingBottom: 14 }}>
        <div>
          <div className="t-mono" style={{ fontSize: 11, color: 'var(--neon-cyan)',
            letterSpacing: '0.18em', marginBottom: 6 }}>
            ◢ NODE/IU // SUPPORT_NET
          </div>
          <div style={{ fontFamily: 'Orbitron', fontWeight: 800, fontSize: 32,
            letterSpacing: '0.04em', color: 'var(--ink-100)' }}>
            RESOURCE VAULT
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 6, maxWidth: 720, lineHeight: 1.5 }}>
            Off-the-record uplinks. Use them. The mainframe doesn't care if you ask for help —
            but your op succeeds faster when you do.
          </div>
        </div>
        <button className="btn btn-ghost" onClick={onBack} style={{ minWidth: 140 }}>◂ EXIT VAULT</button>
      </div>

      {/* Filter bar */}
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {RV_CATEGORIES.map((c) => (
            <button key={c.id} onClick={() => setFilter(c.id)}
              className="t-mono"
              style={{
                padding: '6px 12px', fontSize: 10, letterSpacing: '0.14em',
                background: filter === c.id ? 'rgba(0,234,255,.15)' : 'rgba(0,234,255,.04)',
                color: filter === c.id ? 'var(--neon-cyan)' : 'var(--ink-60)',
                border: `1px solid ${filter === c.id ? 'var(--neon-cyan)' : 'rgba(0,234,255,.2)'}`,
                cursor: 'pointer', textTransform: 'uppercase',
              }}>
              {c.glyph} {c.label}
            </button>
          ))}
        </div>
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="// query the vault..."
          className="t-mono"
          style={{
            flex: 1, minWidth: 200, padding: '8px 12px', fontSize: 12,
            background: 'rgba(0,234,255,.04)', color: 'var(--ink-100)',
            border: '1px solid rgba(0,234,255,.2)', outline: 'none',
            letterSpacing: '0.06em',
          }}
        />
      </div>

      {/* Grid of resource cards */}
      <div style={{ flex: 1, overflowY: 'auto', paddingRight: 8 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
          gap: 12 }}>
          {visible.map((n) => {
            const cat = RV_CATEGORIES.find((c) => c.id === n.cat);
            const accent = n.priority === 2 ? 'var(--neon-magenta)'
              : n.priority === 1 ? 'var(--neon-yellow)'
              : 'var(--neon-cyan)';
            return (
              <a key={n.id} href={n.url} target="_blank" rel="noopener noreferrer"
                className="panel rv-card"
                aria-label={`Open ${n.name} in a new tab`}
                style={{
                  padding: 16, display: 'flex', flexDirection: 'column', gap: 10,
                  borderColor: n.priority ? `${accent}55` : 'rgba(0,234,255,.18)',
                  position: 'relative', textDecoration: 'none', color: 'inherit',
                  cursor: 'pointer', transition: 'all .15s',
                }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                  <div className="chip" style={{
                    color: accent, borderColor: `${accent}55`, background: `${accent}10`,
                  }}>
                    {cat.glyph} {cat.label}
                  </div>
                  <div className="t-mono" style={{ fontSize: 9, color: 'var(--ink-40)',
                    letterSpacing: '0.16em' }}>
                    {n.tag}
                  </div>
                </div>
                <div style={{ fontFamily: 'Orbitron', fontWeight: 700, fontSize: 14,
                  letterSpacing: '0.02em', lineHeight: 1.3, color: 'var(--ink-100)' }}>
                  {n.name}
                </div>
                <div style={{ fontSize: 11, color: 'var(--ink-60)', lineHeight: 1.5 }}>
                  {n.blurb}
                </div>
                {n.priority === 2 && (
                  <div className="t-mono" style={{ fontSize: 9, color: 'var(--neon-magenta)',
                    letterSpacing: '0.18em', marginTop: 2 }}>
                    ◢ PRIORITY UPLINK · 24/7
                  </div>
                )}
                <div className="t-mono" style={{ fontSize: 9, color: accent,
                  letterSpacing: '0.18em', marginTop: 'auto', paddingTop: 6,
                  display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span aria-hidden="true">▶</span> OPEN UPLINK
                  <span aria-hidden="true" style={{ marginLeft: 'auto', opacity: .7 }}>↗</span>
                </div>
              </a>
            );
          })}
        </div>

        {visible.length === 0 && (
          <div className="t-mono" style={{ textAlign: 'center', color: 'var(--ink-40)',
            padding: 60, fontSize: 12, letterSpacing: '0.12em' }}>
            // NO MATCHING NODES IN VAULT
          </div>
        )}
      </div>

      {/* Footer */}
      <div className="t-mono" style={{ fontSize: 10, color: 'var(--ink-40)',
        letterSpacing: '0.14em', borderTop: '1px solid rgba(0,234,255,.1)',
        paddingTop: 12, display: 'flex', justifyContent: 'space-between' }}>
        <span>// {visible.length} of {RV_NODES.length} nodes online</span>
        <span>// support.iu.edu — endpoints reachable via standard browser uplink</span>
      </div>
    </div>
  );
}

window.ResourcesScreen = ResourcesScreen;