const { useEffect, useMemo, useState } = React;

const API_BASE = (window.__APP_CONFIG__ && window.__APP_CONFIG__.apiBase) || '../api';

async function apiRequest(endpoint, options = {}) {
  const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData;
  const response = await fetch(`${API_BASE}/${endpoint}`, {
    credentials: 'include',
    headers: isFormData ? { ...(options.headers || {}) } : { 'Content-Type': 'application/json', ...(options.headers || {}) },
    ...options,
  });

  const payload = await response.json().catch(() => ({ message: 'Unexpected server response.' }));
  if (!response.ok) {
    const error = new Error(payload.message || 'Request failed.');
    error.payload = payload;
    throw error;
  }
  return payload;
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  return Uint8Array.from([...rawData].map((character) => character.charCodeAt(0)));
}

function initialPushState() {
  if (!('serviceWorker' in navigator) || !('PushManager' in window) || !('Notification' in window)) return 'unsupported';
  if (Notification.permission === 'denied') return 'denied';
  return 'default';
}

async function enableBrowserPush() {
  if (initialPushState() === 'unsupported') throw new Error('This browser does not support desktop notifications.');
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') throw new Error('Notification permission was not granted.');
  const keyResult = await apiRequest('push_public_key.php');
  const registration = await navigator.serviceWorker.ready;
  let subscription = await registration.pushManager.getSubscription();
  if (!subscription) {
    subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(keyResult.publicKey),
    });
  }
  await apiRequest('push_subscribe.php', {
    method: 'POST',
    body: JSON.stringify({
      subscription: subscription.toJSON(),
      content_encoding: subscription.options?.contentEncoding || 'aes128gcm',
    }),
  });
}

function Icon({ name, size = 20 }) {
  const paths = {
    arrow: <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
    check: <><path d="m5 12 4 4L19 6" /></>,
    chevron: <path d="m6 9 6 6 6-6" />,
    calendar: <><rect x="3" y="4" width="18" height="17" rx="3" /><path d="M16 2v4M8 2v4M3 10h18" /></>,
    handshake: <><path d="m4 12 3-3 4 3 3-3 6 4-3 4-4-2-3 2-6-5Z" /><path d="m7 9 2-4 4 2 3-2 3 4" /><path d="m8 16-2 2M12 16l-2 2M16 16l-2 2" /></>,
    chat: <><path d="M20 11.5a7.4 7.4 0 0 1-7.7 7.5 8.3 8.3 0 0 1-3.8-.9L4 20l1.4-3.2A7.2 7.2 0 0 1 4 12c0-4.1 3.6-7.5 8-7.5s8 3.1 8 7Z" /><path d="M8 12h.01M12 12h.01M16 12h.01" /></>,
    bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" /><path d="M10 21h4" /></>,
    clipboard: <><rect x="5" y="4" width="14" height="17" rx="2" /><path d="M9 4V3h6v1M8 9h8M8 13h6M8 17h4" /></>,
    heart: <path d="M20.8 8.8c0 5.1-8.8 10-8.8 10s-8.8-4.9-8.8-10A4.8 4.8 0 0 1 12 6.1a4.8 4.8 0 0 1 8.8 2.7Z" />,
    lock: <><rect x="4" y="10" width="16" height="11" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3" /></>,
    logout: <><path d="M10 17l5-5-5-5M15 12H3" /><path d="M13 4h6v16h-6" /></>,
    menu: <><path d="M4 6h16M4 12h16M4 18h16" /></>,
    phone: <path d="M6.6 3.7 9 3l2 4-1.9 1.9a14.5 14.5 0 0 0 5 5L16 12l4 2-.7 2.4a3 3 0 0 1-3.3 2.1C9.5 17.5 4.5 12.5 3.5 6a3 3 0 0 1 2.1-2.3Z" />,
    pin: <><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z" /><circle cx="12" cy="10" r="2.5" /></>,
    shield: <><path d="M12 3 20 6v5c0 5-3.2 8.5-8 10-4.8-1.5-8-5-8-10V6l8-3Z" /><path d="m8.5 12 2.2 2.2 4.8-5" /></>,
    user: <><circle cx="12" cy="8" r="3.5" /><path d="M5 21a7 7 0 0 1 14 0" /></>,
    users: <><circle cx="9" cy="8" r="3" /><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 5.5a3 3 0 0 1 0 5.9M17 14a5.5 5.5 0 0 1 4.5 6" /></>,
    sparkle: <><path d="m12 2 1.3 5.7L19 9l-5.7 1.3L12 16l-1.3-5.7L5 9l5.7-1.3L12 2ZM19 16l.6 2.4L22 19l-2.4.6L19 22l-.6-2.4L16 19l2.4-.6L19 16Z" /></>,
    play: <path d="m9 6 8 6-8 6V6Z" fill="currentColor" stroke="none" />,
  };
  return <svg className="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name] || paths.sparkle}</svg>;
}

function Brand({ light = false }) {
  return <div className={`brand ${light ? 'brand-light' : ''}`}><span className="brand-mark">R</span><span><b>Renovar</b></span></div>;
}

function PrimaryButton({ children, onClick, type = 'button', variant = 'primary', className = '', disabled = false }) {
  return <button type={type} onClick={onClick} disabled={disabled} className={`button button-${variant} ${className}`}>{children}</button>;
}

function LandingPage({ onLogin, onRegister }) {
  return <div className="site-shell">
    <header className="landing-header">
      <a className="brand-link" href="#top" aria-label="Renovar Wellness home"><Brand /></a>
      <nav className="landing-nav">
        <a href="#approach">Our approach</a>
        <a href="#services">Services</a>
        <a href="#support">Patient support</a>
      </nav>
      <div className="header-actions">
        <button className="text-button" onClick={onLogin}>Patient login</button>
        <PrimaryButton onClick={onRegister}>Get started <Icon name="arrow" size={16} /></PrimaryButton>
      </div>
      <div className="mobile-header-actions"><button className="icon-button" aria-label="Open menu"><Icon name="menu" /></button></div>
    </header>

    <main id="top">
      <section className="hero-section">
        <div className="hero-copy">
          <p className="eyebrow"><span className="eyebrow-dot" /> Evidence-led mental wellness</p>
          <h1>Relief that works when <em>medications don't.</em></h1>
          <p className="hero-text">TMS therapy targets depression at its source, giving you a fresh start with a care team that sees the whole you.</p>
          <div className="hero-actions">
            <PrimaryButton onClick={onRegister}>Start your journey <Icon name="arrow" size={17} /></PrimaryButton>
            <button className="play-link" onClick={() => document.getElementById('approach')?.scrollIntoView({ behavior: 'smooth' })}><span className="play-icon">›</span> Learn how it works</button>
          </div>
          <div className="hero-trust"><div className="avatar-stack"><span>JM</span><span>AS</span><span>TK</span></div><p><strong>Trusted by our patients</strong><br /><span>Real care. Real progress.</span></p></div>
        </div>
        <div className="hero-visual">
          <div className="visual-orbit orbit-one" /><div className="visual-orbit orbit-two" />
          <div className="hero-image-card"><img src="./assets/brain-before-after.png" alt="Illustration of brain wellness before and after treatment" /></div>
          <div className="hero-note note-top"><span className="note-icon"><Icon name="sparkle" size={17} /></span><div><strong>Care that meets you</strong><small>Wherever you are in your journey</small></div></div>
          <div className="hero-note note-bottom"><span className="note-check"><Icon name="check" size={16} /></span><div><strong>Personalized support</strong><small>Every step of the way</small></div></div>
        </div>
      </section>

      <section className="logo-strip"><span>Personalized care</span><span>Clinically guided</span><span>Patient first</span><span>Here when you need us</span></section>

      <section className="approach-section content-section" id="approach">
        <div className="section-heading"><p className="eyebrow">A better way forward</p><h2>Care designed around <em>your life.</em></h2><p>We believe mental healthcare should feel clear, supportive and personal. From your first question to your next breakthrough, our team stays by your side.</p></div>
        <div className="feature-grid">
          <FeatureCard icon="heart" number="01" title="Start where you are" text="Tell us what you are experiencing. We will help you understand your options without pressure." />
          <FeatureCard icon="shield" number="02" title="Feel supported" text="Your care plan is built around your goals, your comfort and the way you want to communicate." />
          <FeatureCard icon="users" number="03" title="Move forward together" text="Our care team keeps the next step simple, so progress feels possible one day at a time." />
        </div>
      </section>

      <section className="services-section content-section" id="services">
        <div className="section-heading split-heading"><div><p className="eyebrow">Explore care options</p><h2>Support for the whole <em>you.</em></h2></div><p>Every person responds differently. Our team will help you explore the service that best fits your needs.</p></div>
        <div className="service-list">
          <ServiceRow number="01" title="TMS Therapy" text="A non-invasive treatment option for depression and other mental health conditions." />
          <ServiceRow number="02" title="Spravato Treatment" text="Clinically guided care with a team that supports you before, during and after treatment." />
          <ServiceRow number="03" title="Ketamine Therapy" text="A personalized path forward for patients looking for additional options." />
        </div>
      </section>

      <section className="portal-cta content-section" id="support">
        <div><p className="eyebrow eyebrow-dark">Your care, in one place</p><h2>Stay connected to your care team.</h2><p>Register for your secure patient portal to share what you need, view your next steps and keep every conversation together.</p></div><PrimaryButton onClick={onRegister} variant="gold">Create patient account <Icon name="arrow" size={17} /></PrimaryButton>
      </section>
    </main>
    <footer className="site-footer"><Brand light /><p>Compassionate, evidence-led mental wellness care.</p><span>© {new Date().getFullYear()} Renovar Wellness</span></footer>
  </div>;
}

function FeatureCard({ icon, number, title, text }) {
  return <article className="feature-card"><div className="feature-top"><span className="feature-icon"><Icon name={icon} size={22} /></span><span>{number}</span></div><h3>{title}</h3><p>{text}</p><span className="feature-arrow"><Icon name="arrow" size={18} /></span></article>;
}

function ServiceRow({ number, title, text }) {
  return <article className="service-row"><span className="service-number">{number}</span><h3>{title}</h3><p>{text}</p><span className="service-arrow"><Icon name="arrow" size={19} /></span></article>;
}

function LandingPageV2({ onLogin, onRegister, onAdminLogin, onStaffLogin }) {
  return <div className="site-shell sample-site">
    <header className="landing-header sample-header">
      <a className="brand-link" href="#top" aria-label="Renovar Wellness home"><Brand light /></a>
      <nav className="landing-nav"><a href="#approach">Why TMS</a><a href="#services">Treatments</a><a href="#stories">Our provider</a></nav>
      <div className="header-actions"><button className="text-button" onClick={onLogin}>Patient login</button><button className="text-button admin-login-button" onClick={onAdminLogin}>Admin login</button><button className="text-button staff-login-button" onClick={onStaffLogin}>Staff login</button><PrimaryButton onClick={onRegister}>Get started <Icon name="arrow" size={16} /></PrimaryButton></div>
      <div className="mobile-header-actions"><button className="icon-button" aria-label="Open menu"><Icon name="menu" /></button></div>
    </header>
    <main id="top">
      <section className="sample-hero">
        <div className="sample-hero-copy"><p className="sample-kicker"><span /> A different approach to mental wellness</p><h1><span>Relief that works when</span><br /><em>medications don't.</em></h1><p className="sample-hero-text">TMS Therapy targets depression at its source, giving you a fresh start with personalized care and support that stays with you.</p><div className="sample-hero-actions"><PrimaryButton onClick={onRegister}>Register now if TMS is right for you <Icon name="arrow" size={17} /></PrimaryButton><button className="sample-video-link" onClick={() => document.getElementById('approach')?.scrollIntoView({ behavior: 'smooth' })}><span><Icon name="play" size={13} /></span> Learn about TMS</button></div><div className="sample-hero-foot"><span className="sample-stars">★★★★★</span><span>Trusted by patients who are ready to feel better</span></div></div>
      </section>
      <section className="sample-stats sample-section" id="approach"><div className="sample-section-intro"><p className="sample-kicker">TMS therapy, made clear</p><h2>More than treatment.<br /><em>A path forward.</em></h2><p>When medication has not been enough, TMS can offer a new option. Our team makes every part of the process feel simple, informed and personal.</p><button className="sample-text-link" onClick={onRegister}>Start your care journey <Icon name="arrow" size={16} /></button></div><div className="sample-stat-grid"><StatCard value="50%" label="of patients see meaningful improvement" /><StatCard value="60%" label="experience remission from symptoms" /><StatCard value="95%" label="of patients feel supported by our team" /></div></section>
      <section className="sample-treatment sample-section"><div className="sample-treatment-art"><div className="sample-treatment-frame"><img src="./assets/brain-before-after.png" alt="Brain scans illustrating treatment progress" /></div><span className="sample-treatment-caption"><Icon name="sparkle" size={16} /> Non-invasive. Personalized. Hopeful.</span></div><div className="sample-treatment-copy"><p className="sample-kicker">A treatment worth understanding</p><h2>What is <em>TMS?</em></h2><p>TMS is a non-invasive treatment that uses magnetic pulses to stimulate the areas of the brain involved in mood. There is no anesthesia, no downtime and no need to change who you are.</p><div className="sample-check-list"><div><span><Icon name="check" size={14} /></span><b>No surgery or medication changes</b></div><div><span><Icon name="check" size={14} /></span><b>Sessions designed around your schedule</b></div><div><span><Icon name="check" size={14} /></span><b>A calm team beside you at every visit</b></div></div><PrimaryButton onClick={onRegister}>Learn if you qualify <Icon name="arrow" size={16} /></PrimaryButton></div></section>
      <section className="sample-services sample-section" id="services"><div className="sample-section-heading"><div><p className="sample-kicker">Explore your options</p><h2>There is more than<br /><em>one way forward.</em></h2></div><p>Every person is different. We will help you understand the care option that makes sense for your goals.</p></div><div className="sample-service-grid"><TreatmentFeature icon="heart" title="TMS Therapy" text="A non-invasive option for depression and other mental health conditions." /><TreatmentFeature icon="sparkle" title="Spravato Treatment" text="Clinically guided support before, during and after your treatment." /><TreatmentFeature icon="users" title="Ketamine Therapy" text="A personalized path for patients who are looking for additional options." /></div></section>
      <section className="sample-insurance"><p>We accept most major insurance plans</p><InsuranceLogos /></section>
      <section className="sample-prepare sample-section"><div className="sample-prepare-heading"><h2>How to Prepare for TMS Therapy</h2></div><div className="sample-prepare-grid"><PrepareCard icon="calendar" title="Schedule" time="5 Minutes" text="Call the office, fill out a form, or book directly to request a consultation." /><PrepareCard icon="handshake" title="Meet" time="30 Minutes" text="We'll talk through your medical history and symptoms. You'll receive a personalized treatment plan, with insurance approval before starting." /><PrepareCard icon="pin" title="Map" time="45 Minutes" text="During your first session, we determine device position to ensure the most effective treatment for you. This process is known as mapping." /><PrepareCard icon="heart" title="Treat" time="20 Minutes" text="Relax during treatment. After each session, you'll be able to resume your daily routine immediately." /></div></section>
      <section className="sample-provider sample-section" id="stories"><div className="sample-provider-heading"><p className="sample-kicker">The people behind your care</p><h2>Meet Our Provider</h2><span /></div><div className="sample-provider-content"><div className="sample-provider-photo"><img src="./assets/care-team-portrait.webp" alt="Dr. Majid Malik, MD" /></div><div className="sample-provider-copy"><h3>Dr. Majid Malik, MD</h3><p>Dr. Majid Malik is a graduate of Texas Tech University and a lifelong member of the Michiana community - a place he proudly calls home. As the founder of Serenity Home Medical and Renovar Wellness, his work is driven by a deep commitment to caring for the people who live here.</p><p>After seeing firsthand how few advanced mental health treatment options were available locally, Dr. Malik made the decision to bring FDA-approved BrainsWay neuromodulation therapy to the community. This treatment is designed for individuals living with depression, anxiety, and OCD, especially those who have not found relief through medication alone.</p><p>Raising his family in Indiana, this mission is deeply personal. Dr. Malik's goal is to ensure that individuals and families in the community have access to compassionate, effective care - without having to leave home to find it.</p></div></div></section>
      <section className="portal-cta sample-portal-cta content-section" id="support"><div><p className="eyebrow eyebrow-dark">Your care, in one place</p><h2>Stay connected to your care team.</h2><p>Register for your secure patient portal to share what you need, view your next steps and keep every conversation together.</p></div><PrimaryButton onClick={onRegister} variant="gold">Create patient account <Icon name="arrow" size={17} /></PrimaryButton></section>
    </main>
    <footer className="site-footer"><Brand light /><p>Compassionate, evidence-led mental wellness care.</p><span>Copyright {new Date().getFullYear()} Renovar</span></footer>
  </div>;
}

function StatCard({ value, label }) {
  const target = parseInt(value, 10);
  const suffix = value.replace(/[0-9]/g, '');
  const [count, setCount] = useState(0);
  const ref = React.useRef(null);
  useEffect(() => {
    let frame;
    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      const startedAt = performance.now();
      const duration = 1400;
      const animate = (now) => {
        const progress = Math.min((now - startedAt) / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);
        setCount(Math.round(target * eased));
        if (progress < 1) frame = requestAnimationFrame(animate);
      };
      frame = requestAnimationFrame(animate);
      observer.disconnect();
    }, { threshold: 0.45 });
    if (ref.current) observer.observe(ref.current);
    return () => { observer.disconnect(); if (frame) cancelAnimationFrame(frame); };
  }, [target]);
  return <div ref={ref} className="sample-stat-card"><strong>{count}{suffix}</strong><span>{label}</span></div>;
}
function TreatmentFeature({ icon, title, text }) { return <article className="sample-treatment-feature"><span className="sample-feature-icon"><Icon name={icon} size={23} /></span><h3>{title}</h3><p>{text}</p><span className="sample-feature-arrow"><Icon name="arrow" size={17} /></span></article>; }
function InsuranceLogo({ src, alt }) { return <div className="sample-insurance-logo"><img src={`./assets/${src}`} alt={alt} /></div>; }
function InsuranceLogos() {
  const [visible, setVisible] = useState(false);
  const ref = React.useRef(null);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setVisible(true); observer.disconnect(); }
    }, { threshold: 0.35 });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
  const logos = [
    ['insurance-united.webp', 'United Healthcare'],
    ['insurance-bcbs.webp', 'Blue Cross Blue Shield'],
    ['insurance-aetna.webp', 'Aetna'],
    ['insurance-cigna.webp', 'Cigna'],
    ['insurance-medicare.webp', 'Medicare'],
  ];
  return <div ref={ref} className={`sample-insurance-logos ${visible ? 'is-visible' : ''}`}><div className="sample-insurance-track">{logos.map(([src, alt]) => <InsuranceLogo key={`first-${alt}`} src={src} alt={alt} />)}{logos.map(([src, alt]) => <InsuranceLogo key={`second-${alt}`} src={src} alt={alt} />)}</div></div>;
}
function PrepareCard({ icon, title, time, text }) { return <article className="sample-prepare-card"><span className="sample-prepare-icon"><Icon name={icon} size={25} /></span><h3>{title}</h3><strong>{time}</strong><p>{text}</p></article>; }

function AuthScreen({ initialMode = 'register', onSuccess, onHome }) {
  const [mode, setMode] = useState(initialMode);
  return <div className="auth-shell">
    <div className="auth-visual"><div className="auth-visual-inner"><Brand light /><p className="eyebrow eyebrow-dark">A fresh start begins here</p><h1>Your next chapter can feel <em>different.</em></h1><p>Connect with the Renovar Wellness team and take the first step towards care built around you.</p><div className="auth-quote"><span>“</span><p>Supportive, calm and genuinely focused on helping me move forward.</p><small>— A Renovar patient</small></div></div></div>
    <div className="auth-content"><button className="back-link" onClick={onHome}>← Back to website</button><div className="auth-card"><div className="auth-card-heading"><p className="eyebrow">Patient portal</p><h2>{mode === 'register' ? 'Create your account' : 'Welcome back'}</h2><p>{mode === 'register' ? 'Share a few details and our care team will be in touch.' : 'Log in to view your care journey and messages.'}</p></div>{mode === 'register' ? <RegistrationForm onSuccess={onSuccess} onLogin={() => setMode('login')} /> : <LoginForm onSuccess={onSuccess} onRegister={() => setMode('register')} />}</div></div>
  </div>;
}

const initialRegistration = { first_name: '', last_name: '', mobile_no: '', email: '', password: '', confirm_password: '', service_interested: '', preferred_contact_method: 'SMS', note: '' };

function RegistrationForm({ onSuccess, onLogin }) {
  const [form, setForm] = useState(initialRegistration);
  const [error, setError] = useState('');
  const [fieldErrors, setFieldErrors] = useState({});
  const [loading, setLoading] = useState(false);
  const update = (event) => setForm({ ...form, [event.target.name]: event.target.value });
  const submit = async (event) => {
    event.preventDefault(); setError(''); setFieldErrors({}); setLoading(true);
    try { const result = await apiRequest('register.php', { method: 'POST', body: JSON.stringify(form) }); onSuccess(result.patient); }
    catch (err) { setError(err.message); setFieldErrors(err.payload?.errors || {}); }
    finally { setLoading(false); }
  };
  return <form onSubmit={submit} className="portal-form" noValidate>
    <Alert message={error} />
    <div className="form-grid two-columns"><Field label="First name" name="first_name" value={form.first_name} onChange={update} placeholder="Your first name" error={fieldErrors.first_name} required /><Field label="Last name" name="last_name" value={form.last_name} onChange={update} placeholder="Your last name" error={fieldErrors.last_name} required /></div>
    <div className="form-grid two-columns"><Field label="Mobile number" name="mobile_no" type="tel" value={form.mobile_no} onChange={update} placeholder="(000) 000-0000" error={fieldErrors.mobile_no} required /><Field label="Email address" name="email" type="email" value={form.email} onChange={update} placeholder="you@example.com" error={fieldErrors.email} required /></div>
    <div className="form-grid two-columns"><Field label="Password" name="password" type="password" value={form.password} onChange={update} placeholder="At least 8 characters" error={fieldErrors.password} required /><Field label="Confirm password" name="confirm_password" type="password" value={form.confirm_password} onChange={update} placeholder="Re-enter password" error={fieldErrors.confirm_password} required /></div>
    <div className="form-grid two-columns"><SelectField label="Service interested in" name="service_interested" value={form.service_interested} onChange={update} error={fieldErrors.service_interested} required options={['TMS Therapy', 'Spravato Treatment', 'Ketamine Therapy', 'Psychiatry & Therapy', 'I am not sure yet']} /><SelectField label="Preferred contact method" name="preferred_contact_method" value={form.preferred_contact_method} onChange={update} error={fieldErrors.preferred_contact_method} options={['Phone', 'SMS', 'Email']} /></div>
    <label className="field-label">Message or note <span className="optional">Optional</span><textarea name="note" value={form.note} onChange={update} placeholder="Tell us anything you would like our care team to know..." rows="3" /></label>
    <label className="consent-row"><input type="checkbox" required /><span>I agree to be contacted by the Renovar Wellness care team about my request.</span></label>
    <PrimaryButton type="submit" disabled={loading} className="full-button">{loading ? 'Creating account...' : 'Create patient account'} <Icon name="arrow" size={17} /></PrimaryButton>
    <p className="form-switch">Already registered? <button type="button" onClick={onLogin}>Log in to your account</button></p>
  </form>;
}

function LoginForm({ onSuccess, onRegister, onForgot }) {
  const [form, setForm] = useState({ email: '', password: '' }); const [error, setError] = useState(''); const [loading, setLoading] = useState(false);
  const submit = async (event) => { event.preventDefault(); setError(''); setLoading(true); try { const result = await apiRequest('login.php', { method: 'POST', body: JSON.stringify(form) }); onSuccess(result.patient); } catch (err) { setError(err.message); } finally { setLoading(false); } };
  return <form onSubmit={submit} className="portal-form login-form"><Alert message={error} /><Field label="Email address" name="email" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@example.com" required /><Field label="Password" name="password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="Your password" required /><div className="login-help"><label className="remember-row"><input type="checkbox" /> Remember me</label><button type="button" className="link-button" onClick={onForgot}>Forgot password?</button></div><PrimaryButton type="submit" disabled={loading} className="full-button">{loading ? 'Logging in...' : 'Log in to patient portal'} <Icon name="arrow" size={17} /></PrimaryButton><p className="form-switch">Need an account? <button type="button" onClick={onRegister}>Create one here</button></p></form>;
}

function AdminLoginScreen({ onSuccess, onHome }) {
  return <div className="auth-shell admin-auth-shell">
    <div className="auth-visual"><div className="auth-visual-inner"><Brand light /><p className="eyebrow eyebrow-dark">Secure team access</p><h1>Welcome to the <em>admin portal.</em></h1><p>Sign in to manage patient care, conversations and clinic operations.</p></div></div>
    <div className="auth-content"><button className="back-link" onClick={onHome}>← Back to website</button><div className="auth-card"><div className="auth-card-heading"><p className="eyebrow">Admin portal</p><h2>Admin sign in</h2><p>Use your authorized admin credentials to continue.</p></div><AdminLoginForm onSuccess={onSuccess} /></div></div>
  </div>;
}

function AdminLoginForm({ onSuccess }) {
  const [form, setForm] = useState({ username: '', password: '' });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const submit = async (event) => {
    event.preventDefault(); setError(''); setLoading(true);
    try { const result = await apiRequest('admin_login.php', { method: 'POST', body: JSON.stringify(form) }); onSuccess(result.admin); }
    catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };
  return <form onSubmit={submit} className="portal-form login-form"><Alert message={error} /><Field label="Username" name="username" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} placeholder="Admin username" required /><Field label="Password" name="password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="Admin password" required /><PrimaryButton type="submit" disabled={loading} className="full-button">{loading ? 'Signing in...' : 'Sign in to admin portal'} <Icon name="arrow" size={17} /></PrimaryButton><p className="form-switch">Patient access? <button type="button" onClick={() => window.location.href = './'}>Return to patient portal</button></p></form>;
}

function StaffLoginScreen({ onSuccess, onHome }) {
  return <div className="auth-shell staff-auth-shell">
    <div className="auth-visual"><div className="auth-visual-inner"><Brand light /><p className="eyebrow eyebrow-dark">Care team access</p><h1>Make every patient interaction <em>count.</em></h1><p>Sign in to review patient conversations and stay connected with the people in your care.</p></div></div>
    <div className="auth-content"><button className="back-link" onClick={onHome}>← Back to website</button><div className="auth-card"><div className="auth-card-heading"><p className="eyebrow">Staff portal</p><h2>Staff sign in</h2><p>Use the username and password provided by your administrator.</p></div><StaffLoginForm onSuccess={onSuccess} /></div></div>
  </div>;
}

function StaffLoginForm({ onSuccess }) {
  const [form, setForm] = useState({ username: '', password: '' });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const submit = async (event) => {
    event.preventDefault(); setError(''); setLoading(true);
    try { const result = await apiRequest('staff_login.php', { method: 'POST', body: JSON.stringify(form) }); onSuccess(result.staff); }
    catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };
  return <form onSubmit={submit} className="portal-form login-form"><Alert message={error} /><Field label="Username" name="username" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} placeholder="Staff username" required /><Field label="Password" name="password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="Your password" required /><PrimaryButton type="submit" disabled={loading} className="full-button">{loading ? 'Signing in...' : 'Sign in to staff portal'} <Icon name="arrow" size={17} /></PrimaryButton><p className="form-switch">Patient access? <button type="button" onClick={() => window.location.href = './'}>Return to patient portal</button></p></form>;
}

function AuthScreenWithReset({ initialMode = 'register', resetToken = '', onSuccess, onHome }) {
  const [mode, setMode] = useState(initialMode);
  const [resetMessage, setResetMessage] = useState('');
  const title = mode === 'register' ? 'Create your account' : mode === 'forgot' ? 'Reset your password' : mode === 'reset' ? 'Create a new password' : 'Welcome back';
  const description = mode === 'register' ? 'Share a few details and our care team will be in touch.' : mode === 'forgot' ? 'Enter your registered email to receive a secure reset link.' : mode === 'reset' ? 'Choose a new password for your secure patient portal account.' : 'Log in to view your care journey and messages.';
  return <div className="auth-shell">
    <div className="auth-visual"><div className="auth-visual-inner"><Brand light /><p className="eyebrow eyebrow-dark">A fresh start begins here</p><h1>Your next chapter can feel <em>different.</em></h1><p>Connect with the Renovar Wellness team and take the first step towards care built around you.</p><div className="auth-quote"><span>“</span><p>Supportive, calm and genuinely focused on helping me move forward.</p><small>— A Renovar patient</small></div></div></div>
    <div className="auth-content"><button className="back-link" onClick={onHome}>← Back to website</button><div className="auth-card"><div className="auth-card-heading"><p className="eyebrow">Patient portal</p><h2>{title}</h2><p>{description}</p></div>{resetMessage && <div className="reset-success">{resetMessage}</div>}{mode === 'register' ? <RegistrationForm onSuccess={onSuccess} onLogin={() => setMode('login')} /> : mode === 'login' ? <LoginForm onSuccess={onSuccess} onRegister={() => setMode('register')} onForgot={() => { setResetMessage(''); setMode('forgot'); }} /> : mode === 'forgot' ? <ForgotPasswordForm onBack={() => setMode('login')} /> : <ResetPasswordForm token={resetToken} onLogin={() => { setResetMessage('Password reset successful. Please log in with your new password.'); setMode('login'); window.history.replaceState({}, document.title, window.location.pathname); }} />}</div></div>
  </div>;
}

function ForgotPasswordForm({ onBack }) {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const submit = async (event) => {
    event.preventDefault(); setError(''); setLoading(true);
    try { await apiRequest('forgot_password.php', { method: 'POST', body: JSON.stringify({ email }) }); setSent(true); }
    catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };
  if (sent) return <div className="reset-message"><span className="reset-message-icon"><Icon name="check" size={23} /></span><h3>Check your email</h3><p>If this email belongs to a patient account, a secure password reset link has been sent to it.</p><button type="button" className="link-button" onClick={onBack}>Return to login</button></div>;
  return <form onSubmit={submit} className="portal-form login-form"><Alert message={error} /><Field label="Registered email address" name="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required /><PrimaryButton type="submit" disabled={loading} className="full-button">{loading ? 'Sending reset link...' : 'Send reset link'} <Icon name="arrow" size={17} /></PrimaryButton><p className="form-switch">Remembered your password? <button type="button" onClick={onBack}>Return to login</button></p></form>;
}

function ResetPasswordForm({ token, onLogin }) {
  const [form, setForm] = useState({ password: '', confirm_password: '' });
  const [error, setError] = useState('');
  const [fieldErrors, setFieldErrors] = useState({});
  const [loading, setLoading] = useState(false);
  const submit = async (event) => {
    event.preventDefault(); setError(''); setFieldErrors({}); setLoading(true);
    try { await apiRequest('reset_password.php', { method: 'POST', body: JSON.stringify({ token, ...form }) }); onLogin(); }
    catch (err) { setError(err.message); setFieldErrors(err.payload?.errors || {}); }
    finally { setLoading(false); }
  };
  return <form onSubmit={submit} className="portal-form login-form"><Alert message={error} />{!token && <div className="alert">This reset link is missing. Please request a new one.</div>}<Field label="New password" name="password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="At least 8 characters" error={fieldErrors.password} required /><Field label="Confirm new password" name="confirm_password" type="password" value={form.confirm_password} onChange={(e) => setForm({ ...form, confirm_password: e.target.value })} placeholder="Re-enter your new password" error={fieldErrors.confirm_password} required /><PrimaryButton type="submit" disabled={loading || !token} className="full-button">{loading ? 'Saving password...' : 'Save new password'} <Icon name="arrow" size={17} /></PrimaryButton><p className="form-switch">Already have access? <button type="button" onClick={onLogin}>Return to login</button></p></form>;
}

function AdminDashboard({ admin, onLogout, onAdminUpdate }) {
  const [section, setSection] = useState('overview');
  const [mobileNav, setMobileNav] = useState(false);
  const [stats, setStats] = useState({ total_patients: 0, total_staff: 0, new_patients: 0, unread_notifications: 0 });
  const [recentPatients, setRecentPatients] = useState([]);
  const [staff, setStaff] = useState([]);
  const [loading, setLoading] = useState(true);
  const [notice, setNotice] = useState('');
  const [error, setError] = useState('');
  const [staffErrors, setStaffErrors] = useState({});
  const [staffForm, setStaffForm] = useState({ first_name: '', last_name: '', username: '', email: '', mobile_no: '', role: 'agent', password: '', confirm_password: '' });
  const [settings, setSettings] = useState({ first_name: admin.first_name || '', last_name: admin.last_name || '', mobile_no: admin.mobile_no || '', email: admin.email || '' });
  const [settingsSaving, setSettingsSaving] = useState(false);
  const [passwordForm, setPasswordForm] = useState({ current_password: '', new_password: '', confirm_password: '' });
  const [passwordSaving, setPasswordSaving] = useState(false);
  const [passwordError, setPasswordError] = useState('');
  const [passwordNotice, setPasswordNotice] = useState('');
  const [passwordFieldErrors, setPasswordFieldErrors] = useState({});

  const loadDashboard = async () => {
    setLoading(true);
    try {
      const [overview, staffResult] = await Promise.all([apiRequest('admin_overview.php'), apiRequest('admin_staff.php')]);
      setStats(overview.stats || {});
      setRecentPatients(overview.recent_patients || []);
      setStaff(staffResult.staff || []);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { loadDashboard(); }, []);

  const updateStaffForm = (event) => setStaffForm({ ...staffForm, [event.target.name]: event.target.value });
  const addStaff = async (event) => {
    event.preventDefault(); setError(''); setNotice(''); setStaffErrors({});
    try {
      const result = await apiRequest('admin_staff.php', { method: 'POST', body: JSON.stringify(staffForm) });
      setStaff(result.staff || []);
      setStats((current) => ({ ...current, total_staff: (result.staff || []).length }));
      setStaffForm({ first_name: '', last_name: '', username: '', email: '', mobile_no: '', role: 'agent', password: '', confirm_password: '' });
      setNotice(result.message);
    } catch (err) {
      setError(err.message); setStaffErrors(err.payload?.errors || {});
    }
  };

  const saveSettings = async (event) => {
    event.preventDefault(); setError(''); setNotice(''); setSettingsSaving(true);
    try {
      const result = await apiRequest('admin_settings.php', { method: 'POST', body: JSON.stringify(settings) });
      setSettings({ first_name: result.admin.first_name, last_name: result.admin.last_name, mobile_no: result.admin.mobile_no, email: result.admin.email });
      if (onAdminUpdate) onAdminUpdate(result.admin);
      setNotice(result.message);
    } catch (err) { setError(err.message); }
    finally { setSettingsSaving(false); }
  };

  const changePassword = async (event) => {
    event.preventDefault(); setPasswordError(''); setPasswordNotice(''); setPasswordFieldErrors({}); setPasswordSaving(true);
    try {
      const result = await apiRequest('change_password.php', { method: 'POST', body: JSON.stringify(passwordForm) });
      setPasswordForm({ current_password: '', new_password: '', confirm_password: '' }); setPasswordNotice(result.message);
    } catch (err) { setPasswordError(err.message); setPasswordFieldErrors(err.payload?.errors || {}); }
    finally { setPasswordSaving(false); }
  };

  const sectionTitle = section === 'staff' ? 'Staff management' : section === 'settings' ? 'Admin settings' : 'Dashboard overview';
  const initials = `${admin.first_name?.[0] || ''}${admin.last_name?.[0] || ''}`;
  const patientAvatar = (patient) => patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : '';

  return <div className="dashboard-shell admin-dashboard-shell">
    <aside className={`dashboard-sidebar ${mobileNav ? 'mobile-open' : ''}`}>
      <div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div>
      <p className="sidebar-label">Admin portal</p>
      <nav className="dashboard-nav">
        <button className={`nav-item ${section === 'overview' ? 'active' : ''}`} onClick={() => { setSection('overview'); setMobileNav(false); }}><span><Icon name="clipboard" size={19} /> Overview</span></button>
        <button className={`nav-item ${section === 'staff' ? 'active' : ''}`} onClick={() => { setSection('staff'); setMobileNav(false); }}><span><Icon name="users" size={19} /> Staff management</span></button>
        <button className={`nav-item ${section === 'settings' ? 'active' : ''}`} onClick={() => { setSection('settings'); setMobileNav(false); }}><span><Icon name="lock" size={19} /> Settings</span></button>
      </nav>
      <div className="sidebar-bottom"><div className="secure-badge"><Icon name="lock" size={16} /><span><strong>Admin access</strong><small>Private & secure</small></span></div><button className="logout-button" onClick={onLogout}><Icon name="logout" size={18} /> Sign out</button></div>
    </aside>
    <div className="dashboard-main">
      <header className="dashboard-header"><button className="mobile-menu-button" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div><p className="dashboard-kicker">Renovar administration</p><h1>{sectionTitle}</h1></div><div className="profile-chip"><span>{initials}</span><div><strong>{admin.first_name} {admin.last_name}</strong><small>Administrator</small></div></div></header>
      <main className="dashboard-content admin-dashboard-content">
        {notice && <div className="dashboard-notice admin-notice">{notice}</div>}
        {error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}
        {section === 'overview' && <>
          <div className="admin-stat-grid"><AdminStat label="Total patients" value={stats.total_patients} /><AdminStat label="New patients" value={stats.new_patients} /><AdminStat label="Active staff" value={stats.total_staff} /><AdminStat label="Unread notifications" value={stats.unread_notifications} /></div>
          <div className="admin-overview-grid"><section className="dashboard-card"><div className="card-heading"><div><p className="eyebrow">Patient activity</p><h3>Recent patients</h3></div><button className="admin-text-action" onClick={() => setSection('staff')}>Manage staff</button></div>{loading ? <div className="admin-empty">Loading dashboard...</div> : recentPatients.length === 0 ? <div className="admin-empty">No patient registrations yet.</div> : <div className="admin-patient-list">{recentPatients.map((patient) => { const image = patientAvatar(patient); const patientInitials = `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`; return <div className="admin-patient-row" key={patient.id}><span className="admin-avatar">{image ? <img src={image} alt="" /> : patientInitials}</span><div><strong>{patient.first_name} {patient.last_name}</strong><small>{patient.email}</small></div><span className="admin-patient-service">{patient.service_interested}</span><span className={`admin-status ${patient.status}`}>{patient.status}</span></div>; })}</div>}</section><section className="dashboard-card admin-quick-card"><p className="eyebrow">Administration</p><h3>Manage your team</h3><p>Add authorized staff members, assign their access role and give each person secure login credentials.</p><PrimaryButton onClick={() => setSection('staff')}>Add staff member <Icon name="arrow" size={16} /></PrimaryButton></section></div>
        </>}
        {section === 'staff' && <div className="admin-section-grid"><section className="dashboard-card"><div className="card-heading"><div><p className="eyebrow">Team access</p><h3>Add staff member</h3></div><span className="profile-save-state">Admin only</span></div><form className="portal-form admin-staff-form" onSubmit={addStaff}><div className="form-grid two-columns"><Field label="First name" name="first_name" value={staffForm.first_name} onChange={updateStaffForm} error={staffErrors.first_name} required /><Field label="Last name" name="last_name" value={staffForm.last_name} onChange={updateStaffForm} error={staffErrors.last_name} required /></div><div className="form-grid two-columns"><Field label="Username" name="username" value={staffForm.username} onChange={updateStaffForm} placeholder="e.g. jsmith" error={staffErrors.username} required /><SelectField label="Staff role" name="role" value={staffForm.role === 'admin' ? 'Admin' : 'Agent'} onChange={(event) => setStaffForm({ ...staffForm, role: event.target.value.toLowerCase() })} options={['Agent', 'Admin']} error={staffErrors.role} required /></div><div className="form-grid two-columns"><Field label="Email address" name="email" type="email" value={staffForm.email} onChange={updateStaffForm} error={staffErrors.email} required /><Field label="Mobile number" name="mobile_no" type="tel" value={staffForm.mobile_no} onChange={updateStaffForm} placeholder="Optional" /></div><div className="form-grid two-columns"><Field label="Password" name="password" type="password" value={staffForm.password} onChange={updateStaffForm} error={staffErrors.password} required /><Field label="Confirm password" name="confirm_password" type="password" value={staffForm.confirm_password} onChange={updateStaffForm} error={staffErrors.confirm_password} required /></div><PrimaryButton type="submit" className="full-button">Add staff member <Icon name="arrow" size={16} /></PrimaryButton></form></section><section className="dashboard-card"><div className="card-heading"><div><p className="eyebrow">Authorized users</p><h3>Staff accounts</h3></div><span className="conversation-count">{staff.length} accounts</span></div><div className="admin-staff-list">{staff.map((member) => { const image = member.profile_image_url ? `${API_BASE}/${member.profile_image_url}` : ''; const memberInitials = `${member.first_name?.[0] || ''}${member.last_name?.[0] || ''}`; return <div className="admin-staff-row" key={member.id}><span className="admin-avatar">{image ? <img src={image} alt="" /> : memberInitials}</span><div className="admin-staff-info"><strong>{member.first_name} {member.last_name}</strong><small>@{member.username} · {member.email}</small></div><span className={`admin-role-badge ${member.role}`}>{member.role}</span><span className={`admin-status ${member.status}`}>{member.status}</span></div>; })}</div></section></div>}
        {section === 'settings' && <div className="admin-settings-grid"><form className="dashboard-card portal-form" onSubmit={saveSettings}><div className="card-heading"><div><p className="eyebrow">Account details</p><h3>Admin profile</h3></div></div><div className="form-grid two-columns"><Field label="First name" name="first_name" value={settings.first_name} onChange={(event) => setSettings({ ...settings, first_name: event.target.value })} required /><Field label="Last name" name="last_name" value={settings.last_name} onChange={(event) => setSettings({ ...settings, last_name: event.target.value })} required /></div><div className="form-grid two-columns"><Field label="Email address" name="email" type="email" value={settings.email} onChange={(event) => setSettings({ ...settings, email: event.target.value })} required /><Field label="Mobile number" name="mobile_no" type="tel" value={settings.mobile_no} onChange={(event) => setSettings({ ...settings, mobile_no: event.target.value })} /></div><div className="readonly-profile-field"><small>Username</small><strong>@{admin.username}</strong></div><PrimaryButton type="submit" disabled={settingsSaving}>{settingsSaving ? 'Saving settings...' : 'Save admin profile'} <Icon name="check" size={16} /></PrimaryButton></form><form className="dashboard-card portal-form" onSubmit={changePassword}><div className="card-heading"><div><p className="eyebrow">Security</p><h3>Change password</h3></div></div>{passwordNotice && <div className="dashboard-notice password-notice">{passwordNotice}</div>}{passwordError && <Alert message={passwordError} />}<Field label="Current password" name="current_password" type="password" value={passwordForm.current_password} onChange={(event) => setPasswordForm({ ...passwordForm, current_password: event.target.value })} error={passwordFieldErrors.current_password} required /><Field label="New password" name="new_password" type="password" value={passwordForm.new_password} onChange={(event) => setPasswordForm({ ...passwordForm, new_password: event.target.value })} error={passwordFieldErrors.new_password} required /><Field label="Confirm new password" name="confirm_password" type="password" value={passwordForm.confirm_password} onChange={(event) => setPasswordForm({ ...passwordForm, confirm_password: event.target.value })} error={passwordFieldErrors.confirm_password} required /><PrimaryButton type="submit" disabled={passwordSaving}>{passwordSaving ? 'Changing password...' : 'Change password'} <Icon name="check" size={16} /></PrimaryButton></form></div>}
      </main>
    </div>
  </div>;
}

function AdminStat({ label, value }) { return <div className="admin-stat-card"><small>{label}</small><strong>{value ?? 0}</strong></div>; }

function AgentPatientProcessPage({ staff, onLogout, onOpenOverview, onOpenPatients, onOpenConversations }) {
  const [patients, setPatients] = useState([]);
  const [services, setServices] = useState([]);
  const [status, setStatus] = useState('all');
  const [service, setService] = useState('all');
  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');
  const [sort, setSort] = useState('recent');
  const [viewMode, setViewMode] = useState('board');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [notice, setNotice] = useState('');
  const [draggedPatient, setDraggedPatient] = useState(null);
  const [unreadConversations, setUnreadConversations] = useState(0);
  const [mobileNav, setMobileNav] = useState(false);
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  const columns = [['new', 'New Lead'], ['scheduled', 'Consult Set'], ['vob', 'VOB'], ['contacted', 'Contacted'], ['first_follow_up', 'First Follow Up'], ['second_follow_up', 'Second Follow Up'], ['active', 'Active'], ['no_response', 'No Response'], ['closed', 'Closed']];

  const loadPatients = async () => {
    setLoading(true); setError('');
    const params = new URLSearchParams({ list: 'all', status, service, sort, q: search, page: '1', per_page: '50' });
    try {
      const result = await apiRequest(`staff_patients.php?${params.toString()}`);
      setPatients(result.patients || []); setServices(result.services || []); setUnreadConversations(Number(result.unread_conversations || 0));
    } catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };
  useEffect(() => { loadPatients(); }, [status, service, sort, search]);
  const applySearch = (event) => { event.preventDefault(); setSearch(searchInput.trim()); };
  const updateStage = async (patientId, stage, nextFollowUpAt = '') => {
    setError(''); setNotice('');
    try {
      const result = await apiRequest('staff_update_stage.php', { method: 'POST', body: JSON.stringify({ patient_id: patientId, stage, next_follow_up_at: nextFollowUpAt }) });
      setNotice(result.message); await loadPatients();
    } catch (err) { setError(err.message); }
  };
  const handleDrop = async (stage) => { if (!draggedPatient || draggedPatient.status === stage) return; await updateStage(draggedPatient.id, stage, draggedPatient.next_follow_up_at || ''); setDraggedPatient(null); };
  const imageFor = (patient) => patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : '';
  const initialsFor = (patient) => `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`;
  const formatDateShort = (value) => value ? new Date(value.replace(' ', 'T')).toLocaleDateString([], { month: 'short', day: 'numeric' }) : '';
  const filteredColumns = columns.map(([value, label]) => [value, label, patients.filter((patient) => patient.status === value)]);

  return <div className="dashboard-shell rise-agent-shell">
    <aside className={`dashboard-sidebar rise-agent-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOpenOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item active"><span>▣ <b>Patient Process</b></span></button><button className="nav-item" onClick={onOpenPatients}><span>♙ <b>Patient List</b></span></button><button className="nav-item" onClick={onOpenConversations}><span>◌ <b>Conversations</b></span>{unreadConversations > 0 && <b>{unreadConversations}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOpenOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onOpenOverview}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><button className="mobile-menu-button rise-mobile-menu" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="rise-title-row"><div><h1>Patient Process</h1><button className="rise-smart-title">Tracker</button><button className="rise-process-tab">Forecast</button></div><div className="rise-title-actions"><button className="rise-action-button">⇩ Import</button><button className="rise-action-button">＋ Add opportunity</button><button className="rise-more-button">⋮</button></div></div><section className="rise-process-content">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}<div className="rise-process-toolbar"><select className="rise-pipeline-select" value="Patient Pipeline" onChange={() => {}}><option>Patient Pipeline</option></select><span className="rise-opportunity-count">{patients.length} opportunities</span><button className="rise-view-toggle" title="Board view">▦</button><button className={`rise-view-toggle ${viewMode === 'list' ? 'active' : ''}`} onClick={() => setViewMode(viewMode === 'board' ? 'list' : 'board')} title="Toggle list view">☷</button><button className={`rise-process-action ${filtersOpen ? 'active' : ''}`} onClick={() => setFiltersOpen((open) => !open)}>⚱ Advanced filters</button><select className="rise-process-sort" value={sort} onChange={(event) => setSort(event.target.value)}><option value="recent">↕ Sort</option><option value="name">Name</option><option value="activity">Activity</option></select><button className="rise-process-action" onClick={loadPatients}>↻ Refresh</button><form className="rise-process-search" onSubmit={applySearch}><span>⌕</span><input value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder="Search opportunities" /></form></div>{filtersOpen && <div className="rise-filter-panel rise-process-filters"><label>Stage<select value={status} onChange={(event) => setStatus(event.target.value)}><option value="all">All stages</option>{columns.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label><label>Service<select value={service} onChange={(event) => setService(event.target.value)}><option value="all">All services</option>{services.map((item) => <option key={item} value={item}>{item}</option>)}</select></label><button onClick={() => { setStatus('all'); setService('all'); setSearchInput(''); setSearch(''); }}>Clear filters</button></div>}{viewMode === 'list' ? <div className="rise-process-list"><table><thead><tr><th>Patient</th><th>Service</th><th>Stage</th><th>Phone</th><th>Last activity</th></tr></thead><tbody>{loading ? <tr><td colSpan="5">Loading opportunities...</td></tr> : patients.map((patient) => <tr key={patient.id}><td>{patient.first_name} {patient.last_name}</td><td>{patient.service_interested}</td><td><select value={patient.status} onChange={(event) => updateStage(patient.id, event.target.value)}>{columns.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></td><td>{patient.mobile_no}</td><td>{formatDateShort(patient.last_activity)}</td></tr>)}</tbody></table></div> : <div className="rise-process-board">{filteredColumns.map(([stage, label, stagePatients]) => <section className="rise-process-column" key={stage} onDragOver={(event) => event.preventDefault()} onDrop={() => handleDrop(stage)}><div className="rise-process-column-heading"><div><h2>{label}</h2><span>{stagePatients.length} opportunities</span></div><button>‹</button></div>{loading ? <div className="rise-process-empty">Loading...</div> : stagePatients.length === 0 ? <div className="rise-process-empty">No opportunities</div> : stagePatients.map((patient) => { const image = imageFor(patient); return <article className="rise-opportunity-card" key={patient.id} draggable onDragStart={() => setDraggedPatient(patient)}><button className="rise-opportunity-name" onClick={() => onOpenConversations()}>{patient.first_name} {patient.last_name} - {patient.service_interested}</button><div className="rise-opportunity-meta"><a href={`tel:${patient.mobile_no}`} title="Call patient">⌕</a><button onClick={() => onOpenConversations()} title="Open conversation">◌</button><span title="Conversation count">◇ {patient.conversation_count || 0}</span><button title="Schedule appointment">▣</button><span className="rise-opportunity-avatar">{image ? <img src={image} alt="" /> : initialsFor(patient)}</span></div></article>; })}</section>)}</div>}</section></main></div>
  </div>;
}

function AgentPatientPipelinePage({ staff, onLogout, onOpenOverview, onOpenConversations, onOpenProcess }) {
  const [smartList, setSmartList] = useState('all');
  const [mobileNav, setMobileNav] = useState(false);
  const [status, setStatus] = useState('all');
  const [service, setService] = useState('all');
  const [sort, setSort] = useState('recent');
  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [patients, setPatients] = useState([]);
  const [smartCounts, setSmartCounts] = useState({ all: 0 });
  const [unreadConversations, setUnreadConversations] = useState(0);
  const [services, setServices] = useState([]);
  const [stages, setStages] = useState(PIPELINE_STAGE_LABELS);
  const [pagination, setPagination] = useState({ page: 1, pages: 1, total: 0, per_page: 20 });
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [notice, setNotice] = useState('');
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  const stageOptions = Object.entries(stages).length ? Object.entries(stages) : Object.entries(PIPELINE_STAGE_LABELS);
  const smartLists = [['all', 'All'], ['new_lead', 'New Lead'], ['contacted', 'Contacted'], ['scheduled', 'Consult Set'], ['vob', 'VOB'], ['first_follow_up', 'First Follow Up'], ['second_follow_up', 'Second Follow Up'], ['active', 'Active'], ['no_response', 'No Response']];

  const loadPatients = async () => {
    setLoading(true); setError('');
    const params = new URLSearchParams({ list: smartList, status, service, sort, q: search, page: String(page), per_page: '20' });
    try {
      const result = await apiRequest(`staff_patients.php?${params.toString()}`);
      setPatients(result.patients || []); setSmartCounts(result.smart_counts || {}); setUnreadConversations(Number(result.unread_conversations || 0)); setServices(result.services || []); setStages(result.stages || PIPELINE_STAGE_LABELS); setPagination(result.pagination || {});
    } catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };

  useEffect(() => { loadPatients(); }, [smartList, status, service, sort, search, page]);
  const chooseList = (value) => { setSmartList(value); setStatus('all'); setPage(1); };
  const applySearch = (event) => { event.preventDefault(); setPage(1); setSearch(searchInput.trim()); };
  const updateStage = async (patient, nextStage, nextFollowUpAt = patient.next_follow_up_at || '') => {
    setError(''); setNotice('');
    try {
      const result = await apiRequest('staff_update_stage.php', { method: 'POST', body: JSON.stringify({ patient_id: patient.id, stage: nextStage, next_follow_up_at: nextFollowUpAt }) });
      setNotice(result.message); await loadPatients();
    } catch (err) { setError(err.message); }
  };
  const formatListDate = (value) => value ? new Date(value.replace(' ', 'T')).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
  const formatFollowUp = (value) => value ? value.replace(' ', 'T').slice(0, 16) : '';
  const initialsFor = (patient) => `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`;
  const imageFor = (patient) => patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : '';

  return <div className="dashboard-shell rise-agent-shell">
    <aside className={`dashboard-sidebar rise-agent-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOpenOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item active"><span>▣ <b>Patient Process</b></span></button><button className="nav-item active"><span>♙ <b>Patient List</b></span></button><button className="nav-item" onClick={onOpenConversations}><span>◌ <b>Conversations</b></span>{unreadConversations > 0 && <b>{unreadConversations}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOpenOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onOpenOverview}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><button className="mobile-menu-button rise-mobile-menu" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="rise-title-row"><div><h1>Patient List</h1><button className="rise-smart-title">Pipeline</button></div><div className="rise-title-actions"><button className="rise-action-button">⇩ Import</button><button className="rise-action-button">＋ Add Contact</button><button className="rise-more-button">⋮</button></div></div><section className="rise-list-panel">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}<div className="rise-contact-heading"><h2>Contacts <span>{pagination.total} Contacts</span></h2></div><div className="rise-smart-tabs">{smartLists.map(([value, label]) => <button className={smartList === value ? 'active' : ''} onClick={() => chooseList(value)} key={value}>☷ {label}<small>{smartCounts[value] ?? 0}</small></button>)}</div><div className="rise-list-controls"><div className="rise-control-group"><button className={`rise-control-button ${filtersOpen ? 'active' : ''}`} onClick={() => setFiltersOpen((open) => !open)}>⚱ Filters</button><select className="rise-control-select" value={sort} onChange={(event) => { setSort(event.target.value); setPage(1); }}><option value="recent">↕ Sort: Recent</option><option value="name">↕ Sort: Name</option><option value="activity">↕ Sort: Activity</option></select><button className="rise-control-button" onClick={loadPatients}>↻ Refresh</button></div><form className="rise-search-box" onSubmit={applySearch}><span>⌕</span><input value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder="Search Contacts" /><button type="submit">Search</button></form><button className="rise-manage-fields">⚙ Manage fields</button></div>{filtersOpen && <div className="rise-filter-panel"><label>Stage<select value={status} onChange={(event) => { setStatus(event.target.value); setSmartList('all'); setPage(1); }}><option value="all">All stages</option>{stageOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label><label>Service<select value={service} onChange={(event) => { setService(event.target.value); setPage(1); }}><option value="all">All services</option>{services.map((item) => <option key={item} value={item}>{item}</option>)}</select></label><button onClick={() => { setStatus('all'); setService('all'); setSmartList('all'); setSearchInput(''); setSearch(''); setPage(1); }}>Clear filters</button></div>}<div className="rise-table-wrap"><table className="rise-patient-table rise-pipeline-table"><thead><tr><th><input type="checkbox" aria-label="Select all patients" /></th><th>Contact name ↕</th><th>Phone ↕</th><th>Email ↕</th><th>Service ↕</th><th>Pipeline stage</th><th>Next follow-up</th><th>Last activity ↕</th></tr></thead><tbody>{loading ? <tr><td colSpan="8" className="rise-table-message">Loading patients...</td></tr> : patients.length === 0 ? <tr><td colSpan="8" className="rise-table-message">No patients match these filters.</td></tr> : patients.map((patient) => { const image = imageFor(patient); const followUp = formatFollowUp(patient.next_follow_up_at); return <tr key={patient.id}><td><input type="checkbox" aria-label={`Select ${patient.first_name} ${patient.last_name}`} /></td><td><div className="rise-contact-cell"><span className="rise-patient-avatar">{image ? <img src={image} alt="" /> : initialsFor(patient)}</span><strong>{patient.first_name} {patient.last_name}</strong></div></td><td><span className="rise-phone-cell">⌕ {patient.mobile_no}</span></td><td className="rise-email-cell">✉ {patient.email}</td><td>{patient.service_interested}</td><td><div className="rise-stage-cell"><select className={`rise-stage-select stage-${patient.status}`} value={patient.status || 'new'} onChange={(event) => updateStage(patient, event.target.value)} aria-label={`Stage for ${patient.first_name} ${patient.last_name}`}>{stageOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select><small>{patient.stage_changed_at ? `Changed ${formatListDate(patient.stage_changed_at)}` : ''}</small></div></td><td><input className="rise-followup-input" type="datetime-local" value={followUp} onChange={(event) => updateStage(patient, patient.status || 'new', event.target.value)} aria-label={`Next follow-up for ${patient.first_name} ${patient.last_name}`} /></td><td>{patient.last_activity ? `◌ ${formatListDate(patient.last_activity)}` : '—'}</td></tr>; })}</tbody></table></div><div className="rise-pagination"><span>Page {pagination.page || 1} of {pagination.pages || 1}</span><label>20⌄</label><button disabled={(pagination.page || 1) <= 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>Prev</button><button className="active">{pagination.page || 1}</button><button disabled={(pagination.page || 1) >= (pagination.pages || 1)} onClick={() => setPage((current) => current + 1)}>Next</button></div></section></main></div>
  </div>;
}

function AgentPatientListPage({ staff, onLogout, onOpenOverview, onOpenConversations }) {
  const [smartList, setSmartList] = useState('all');
  const [mobileNav, setMobileNav] = useState(false);
  const [status, setStatus] = useState('all');
  const [service, setService] = useState('all');
  const [sort, setSort] = useState('recent');
  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [patients, setPatients] = useState([]);
  const [smartCounts, setSmartCounts] = useState({ all: 0, new_lead: 0, contacted: 0, first_follow_up: 0, second_follow_up: 0 });
  const [unreadConversations, setUnreadConversations] = useState(0);
  const [services, setServices] = useState([]);
  const [pagination, setPagination] = useState({ page: 1, pages: 1, total: 0, per_page: 20 });
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  const smartLists = [['all', 'All'], ['new_lead', 'New Lead'], ['contacted', 'Contacted'], ['first_follow_up', 'First Follow Up'], ['second_follow_up', 'Second Follow Up']];

  const loadPatients = async () => {
    setLoading(true); setError('');
    const params = new URLSearchParams({ list: smartList, status, service, sort, q: search, page: String(page), per_page: '20' });
    try {
      const result = await apiRequest(`staff_patients.php?${params.toString()}`);
      setPatients(result.patients || []); setSmartCounts(result.smart_counts || {}); setUnreadConversations(Number(result.unread_conversations || 0)); setServices(result.services || []); setPagination(result.pagination || {});
    } catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };

  useEffect(() => { loadPatients(); }, [smartList, status, service, sort, search, page]);
  const chooseList = (value) => { setSmartList(value); setStatus('all'); setPage(1); };
  const applySearch = (event) => { event.preventDefault(); setPage(1); setSearch(searchInput.trim()); };
  const initialsFor = (patient) => `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`;
  const imageFor = (patient) => patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : '';
  const listDate = (value) => value ? new Date(value.replace(' ', 'T')).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }) : '—';

  return <div className="dashboard-shell rise-agent-shell">
    <aside className={`dashboard-sidebar rise-agent-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOpenOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item" onClick={onOpenOverview}><span>▣ <b>Patient Process</b></span></button><button className="nav-item active"><span>♙ <b>Patient List</b></span></button><button className="nav-item" onClick={onOpenConversations}><span>◌ <b>Conversations</b></span>{unreadConversations > 0 && <b>{unreadConversations}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOpenOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item"><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><button className="mobile-menu-button rise-mobile-menu" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="rise-title-row"><div><h1>Patient List</h1><button className="rise-smart-title">Smart Lists</button></div><div className="rise-title-actions"><button className="rise-action-button">⇩ Import</button><button className="rise-action-button">＋ Add Contact</button><button className="rise-more-button">⋮</button></div></div><section className="rise-list-panel"><div className="rise-contact-heading"><h2>Contacts <span>{pagination.total} Contacts</span></h2></div><div className="rise-smart-tabs">{smartLists.map(([value, label]) => <button className={smartList === value ? 'active' : ''} onClick={() => chooseList(value)} key={value}>☷ {label}<small>{smartCounts[value] ?? 0}</small></button>)}<button className="rise-more-list">10 More⌄</button><button className="rise-add-list">＋ Add smart list</button></div><div className="rise-list-controls"><div className="rise-control-group"><button className={`rise-control-button ${filtersOpen ? 'active' : ''}`} onClick={() => setFiltersOpen((open) => !open)}>⚱ Filters</button><select className="rise-control-select" value={sort} onChange={(event) => { setSort(event.target.value); setPage(1); }}><option value="recent">↕ Sort: Recent</option><option value="name">↕ Sort: Name</option><option value="activity">↕ Sort: Activity</option></select><button className="rise-control-button" onClick={loadPatients}>↻ Refresh</button></div><form className="rise-search-box" onSubmit={applySearch}><span>⌕</span><input value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder="Search Contacts" /><button type="submit">Search</button></form><button className="rise-manage-fields">⚙ Manage fields</button></div>{filtersOpen && <div className="rise-filter-panel"><label>Status<select value={status} onChange={(event) => { setStatus(event.target.value); setSmartList('all'); setPage(1); }}><option value="all">All statuses</option><option value="new">New</option><option value="contacted">Contacted</option><option value="scheduled">Scheduled</option><option value="active">Active</option><option value="closed">Closed</option></select></label><label>Service<select value={service} onChange={(event) => { setService(event.target.value); setPage(1); }}><option value="all">All services</option>{services.map((item) => <option key={item} value={item}>{item}</option>)}</select></label><button onClick={() => { setStatus('all'); setService('all'); setSmartList('all'); setSearchInput(''); setSearch(''); setPage(1); }}>Clear filters</button></div>}<div className="rise-table-wrap"><table className="rise-patient-table"><thead><tr><th><input type="checkbox" aria-label="Select all patients" /></th><th>Contact name ↕</th><th>Phone ↕</th><th>Email ↕</th><th>Service ↕</th><th>Created ↕</th><th>Last activity ↕</th><th>Tags</th></tr></thead><tbody>{loading ? <tr><td colSpan="8" className="rise-table-message">Loading patients...</td></tr> : error ? <tr><td colSpan="8" className="rise-table-message error">{error}</td></tr> : patients.length === 0 ? <tr><td colSpan="8" className="rise-table-message">No patients match these filters.</td></tr> : patients.map((patient) => { const image = imageFor(patient); return <tr key={patient.id}><td><input type="checkbox" aria-label={`Select ${patient.first_name} ${patient.last_name}`} /></td><td><div className="rise-contact-cell"><span className="rise-patient-avatar">{image ? <img src={image} alt="" /> : initialsFor(patient)}</span><strong>{patient.first_name} {patient.last_name}</strong></div></td><td><span className="rise-phone-cell">⌕ {patient.mobile_no}</span></td><td className="rise-email-cell">✉ {patient.email}</td><td>{patient.service_interested}</td><td>{listDate(patient.created_at)}</td><td>{patient.last_activity ? `◌ ${listDate(patient.last_activity)}` : '—'}</td><td><span className="rise-tag">{patient.status}</span>{Number(patient.conversation_count) > 0 && <span className="rise-tag-count">+{patient.conversation_count}</span>}</td></tr>; })}</tbody></table></div><div className="rise-pagination"><span>Page {pagination.page || 1} of {pagination.pages || 1}</span><label>20⌄</label><button disabled={(pagination.page || 1) <= 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>Prev</button><button className="active">{pagination.page || 1}</button><button disabled={(pagination.page || 1) >= (pagination.pages || 1)} onClick={() => setPage((current) => current + 1)}>Next</button></div></section></main></div>
  </div>;
}

function LegacyAgentConversationsPage({ staff, onLogout, onOverview, onPatientList, stats, threadGroups, selectedThread, selectedPatientId, onSelectPatient, message, setMessage, sendReply, notice, error, sending }) {
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  return <div className="dashboard-shell rise-agent-shell">
    <aside className="dashboard-sidebar rise-agent-sidebar"><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={onOverview}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item" onClick={onOverview}><span>▣ <b>Patient Process</b></span></button><button className="nav-item" onClick={onPatientList}><span>♙ <b>Patient List</b></span></button><button className="nav-item active"><span>◌ <b>Conversations</b></span>{stats.open_conversations > 0 && <b>{stats.open_conversations}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onOverview}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="rise-title-row"><div><h1>Conversations</h1><button className="rise-smart-title">Team inbox</button></div></div><div className="staff-inbox-card dashboard-card"><div className="card-heading"><div><p className="eyebrow">Patient communication</p><h3>Patient conversations</h3></div><span className="conversation-count">{threadGroups.length} patients</span></div>{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}<div className="staff-inbox"><div className="staff-thread-list">{threadGroups.length === 0 ? <div className="admin-empty">No conversations yet.</div> : threadGroups.map((thread) => { const image = thread.imageUrl ? `${API_BASE}/${thread.imageUrl}` : ''; const lastMessage = thread.messages[thread.messages.length - 1]; const threadInitials = `${thread.firstName?.[0] || ''}${thread.lastName?.[0] || ''}`; return <button className={`staff-thread-item ${selectedPatientId === thread.patientId ? 'active' : ''}`} key={thread.patientId} onClick={() => onSelectPatient(thread.patientId)}><span className="admin-avatar">{image ? <img src={image} alt="" /> : threadInitials}</span><span><strong>{thread.firstName} {thread.lastName}</strong><small>{lastMessage.message}</small></span><time>{formatDate(lastMessage.created_at)}</time></button>; })}</div><div className="staff-thread-view">{selectedThread ? <><div className="staff-thread-heading"><span className="admin-avatar">{selectedThread.imageUrl ? <img src={`${API_BASE}/${selectedThread.imageUrl}`} alt="" /> : `${selectedThread.firstName?.[0] || ''}${selectedThread.lastName?.[0] || ''}`}</span><div><strong>{selectedThread.firstName} {selectedThread.lastName}</strong><small>{selectedThread.email}</small></div></div><div className="staff-message-list">{selectedThread.messages.map((item) => <div className={`staff-message ${item.sender_type === 'agent' || item.sender_type === 'admin' ? 'from-staff' : ''}`} key={item.id}><div className="message-meta"><strong>{item.sender_name}</strong><span>{formatDate(item.created_at)}</span></div><p>{item.message}</p></div>)}</div><form className="staff-message-composer" onSubmit={sendReply}><textarea value={message} onChange={(event) => setMessage(event.target.value)} placeholder="Write a reply to the patient..." rows="2" /><PrimaryButton type="submit" disabled={sending || !message.trim()}>{sending ? 'Sending...' : 'Send reply'} <Icon name="arrow" size={16} /></PrimaryButton></form></> : <div className="admin-empty">Select a patient conversation.</div>}</div></div></div></main></div>
  </div>;
}

function LegacyAgentConversationsPageWithDnd({ staff, onLogout, onOverview, onPatientList, stats, threadGroups, selectedThread, selectedPatientId, onSelectPatient, message, setMessage, sendReply, notice, error, sending }) {
  const [inboxTab, setInboxTab] = useState('recent');
  const [search, setSearch] = useState('');
  const [starredPatients, setStarredPatients] = useState([]);
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  const unreadThreads = threadGroups.filter((thread) => thread.messages.some((item) => item.sender_type === 'patient' && !Number(item.is_read)));
  const filteredThreads = threadGroups.filter((thread) => {
    const matchesTab = inboxTab === 'all' || inboxTab === 'recent' || (inboxTab === 'unread' && unreadThreads.some((item) => item.patientId === thread.patientId)) || (inboxTab === 'starred' && starredPatients.includes(thread.patientId));
    const haystack = `${thread.firstName} ${thread.lastName} ${thread.email} ${thread.messages[thread.messages.length - 1]?.message || ''}`.toLowerCase();
    return matchesTab && haystack.includes(search.toLowerCase());
  });
  const activeThread = filteredThreads.find((thread) => thread.patientId === selectedPatientId) || filteredThreads[0] || null;
  const activeImage = activeThread?.imageUrl ? `${API_BASE}/${activeThread.imageUrl}` : '';
  const activeInitials = activeThread ? `${activeThread.firstName?.[0] || ''}${activeThread.lastName?.[0] || ''}` : '';
  const activeUnread = activeThread ? activeThread.messages.filter((item) => item.sender_type === 'patient' && !Number(item.is_read)).length : 0;
  const toggleStar = (event, patientId) => { event.stopPropagation(); setStarredPatients((current) => current.includes(patientId) ? current.filter((id) => id !== patientId) : [...current, patientId]); };

  useEffect(() => {
    if (activeThread && activeThread.patientId !== selectedPatientId) onSelectPatient(activeThread.patientId);
  }, [activeThread?.patientId, selectedPatientId]);

  const tabs = [['unread', 'Unread', unreadThreads.length], ['all', 'All', threadGroups.length], ['recent', 'Recent', threadGroups.length], ['starred', 'Starred', starredPatients.length]];
  return <div className="dashboard-shell rise-agent-shell">
    <aside className="dashboard-sidebar rise-agent-sidebar"><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={onOverview}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item" onClick={onOverview}><span>▣ <b>Patient Process</b></span></button><button className="nav-item" onClick={onPatientList}><span>♙ <b>Patient List</b></span></button><button className="nav-item active"><span>◌ <b>Conversations</b></span>{unreadThreads.length > 0 && <b>{unreadThreads.length}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onOverview}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="staff-conversation-page-heading"><div className="staff-conversation-title"><h1>Conversations</h1><button className="staff-conversation-tab active">Conversations</button><button className="staff-conversation-tab">Templates</button><button className="staff-conversation-tab">Analytics</button><button className="staff-conversation-tab">Settings</button><button className="staff-conversation-tab">Trigger Links⌄</button></div><span className="staff-automation-badge">⚙ Automation On</span></div><div className="staff-conversation-notice">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}</div><section className="staff-crm-workspace"><div className="staff-inbox-toolbar"><div><h2>Team inbox</h2><p>{threadGroups.length} patient conversations</p></div><div className="staff-inbox-tools"><button title="Filter">☷</button><button title="Sort">↕</button></div></div><div className="staff-inbox-tabs">{tabs.map(([value, label, count]) => <button key={value} className={inboxTab === value ? 'active' : ''} onClick={() => setInboxTab(value)}><span>{label}</span><b>{count}</b></button>)}</div><div className="staff-inbox-actions"><label><input type="checkbox" /> Select all</label><form onSubmit={(event) => event.preventDefault()}><span>⌕</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search patients" /></form></div><div className="staff-crm-body"><section className="staff-thread-list crm-thread-list">{filteredThreads.length === 0 ? <div className="admin-empty">No patients in this view.</div> : filteredThreads.map((thread) => { const image = thread.imageUrl ? `${API_BASE}/${thread.imageUrl}` : ''; const lastMessage = thread.messages[thread.messages.length - 1]; const threadInitials = `${thread.firstName?.[0] || ''}${thread.lastName?.[0] || ''}`; const unread = thread.messages.filter((item) => item.sender_type === 'patient' && !Number(item.is_read)).length; return <button className={`staff-thread-item crm-thread-item ${activeThread?.patientId === thread.patientId ? 'active' : ''}`} key={thread.patientId} onClick={() => onSelectPatient(thread.patientId)}><input type="checkbox" onClick={(event) => event.stopPropagation()} aria-label={`Select ${thread.firstName} ${thread.lastName}`} /><span className="admin-avatar">{image ? <img src={image} alt="" /> : threadInitials}</span><span className="crm-thread-copy"><strong>{thread.firstName} {thread.lastName}</strong><small>{lastMessage?.message || 'No message'}</small><em>{lastMessage ? formatDate(lastMessage.created_at) : ''}</em></span>{unread > 0 && <b className="crm-unread-count">{unread}</b>}<span className={`crm-star ${starredPatients.includes(thread.patientId) ? 'active' : ''}`} onClick={(event) => toggleStar(event, thread.patientId)}>☆</span></button>; })}</section><section className="staff-thread-view crm-conversation-view">{activeThread ? <><div className="crm-conversation-heading"><div className="crm-person-heading"><span className="admin-avatar">{activeImage ? <img src={activeImage} alt="" /> : activeInitials}</span><div><strong>{activeThread.firstName} {activeThread.lastName}</strong><small>{activeThread.email}</small></div></div><div className="crm-conversation-actions"><button title="Conversation">◌</button><button title="Call">⌕</button><button title="Archive">▱</button><button title="Star" onClick={(event) => toggleStar(event, activeThread.patientId)}>{starredPatients.includes(activeThread.patientId) ? '★' : '☆'}</button><button title="Close">✉</button></div></div><div className="staff-message-list crm-message-list">{activeThread.messages.map((item) => <div className={`staff-message crm-message ${item.sender_type === 'agent' || item.sender_type === 'admin' ? 'from-staff' : ''}`} key={item.id}><div className="message-meta"><strong>{item.sender_name}</strong><span>{formatDate(item.created_at)}</span></div><p>{item.message}</p></div>)}</div><form className="staff-message-composer crm-composer" onSubmit={sendReply}><button type="button" className="crm-compose-icon">☻⌄</button><textarea value={message} onChange={(event) => setMessage(event.target.value)} placeholder="Type a message" rows="2" /><PrimaryButton type="submit" disabled={sending || !message.trim()}>{sending ? 'Sending...' : 'Send'} <Icon name="arrow" size={16} /></PrimaryButton></form></> : <div className="admin-empty">Select a patient conversation.</div>}</section><aside className="staff-contact-panel">{activeThread ? <><div className="staff-contact-heading"><strong>Contact Details</strong><button>×</button></div><div className="staff-contact-profile"><span className="admin-avatar">{activeImage ? <img src={activeImage} alt="" /> : activeInitials}</span><div><h3>{activeThread.firstName} {activeThread.lastName}</h3><small>{activeThread.email}</small></div></div><div className="staff-contact-fields"><div><span>Owner</span><strong>{staff.first_name} {staff.last_name}</strong></div><div><span>Followers</span><button>＋</button></div></div><div className="staff-contact-tags"><strong>Tags ({activeThread.messages.length})</strong><button>＋</button><div><span>patient</span><span>{activeThread.messages[activeThread.messages.length - 1]?.channel || 'portal'}</span><span>needs status</span></div></div><div className="staff-contact-tabs"><button className="active">All fields</button><button>DND</button><button>Actions</button></div><div className="staff-dnd-panel"><strong>DND</strong><label><input type="checkbox" /> DND All Channels</label><hr /><label><input type="checkbox" /> Email</label><label><input type="checkbox" /> Text Messages</label><label><input type="checkbox" /> Calls & voicemail</label></div></> : <div className="admin-empty">Select a patient to view details.</div>}</aside></div></section></main></div>
  </div>;
}

function useProcessNavOverride(onProcess) {
  useEffect(() => {
    if (!onProcess) return undefined;
    const button = Array.from(document.querySelectorAll('.rise-agent-nav .nav-item')).find((item) => item.textContent.includes('Patient Process'));
    if (!button) return undefined;
    const handleProcessClick = (event) => {
      event.preventDefault();
      event.stopPropagation();
      onProcess();
    };
    button.addEventListener('click', handleProcessClick);
    return () => button.removeEventListener('click', handleProcessClick);
  }, [onProcess]);
  return null;
}

function AgentConversationsPage({ staff, onLogout, onOverview, onProcess, onPatientList, stats, threadGroups, selectedPatientId, onSelectPatient, message, setMessage, sendReply, notice, error, sending }) {
  const [inboxTab, setInboxTab] = useState('recent');
  const [search, setSearch] = useState('');
  const [starredPatients, setStarredPatients] = useState([]);
  const [mobileNav, setMobileNav] = useState(false);
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  useProcessNavOverride(onProcess);
  const unreadThreads = threadGroups.filter((thread) => thread.messages.some((item) => item.sender_type === 'patient' && !Number(item.is_read)));
  const filteredThreads = threadGroups.filter((thread) => {
    const matchesTab = inboxTab === 'all' || inboxTab === 'recent' || (inboxTab === 'unread' && unreadThreads.some((item) => item.patientId === thread.patientId)) || (inboxTab === 'starred' && starredPatients.includes(thread.patientId));
    const haystack = `${thread.firstName} ${thread.lastName} ${thread.email} ${thread.messages[thread.messages.length - 1]?.message || ''}`.toLowerCase();
    return matchesTab && haystack.includes(search.toLowerCase());
  });
  const activeThread = filteredThreads.find((thread) => thread.patientId === selectedPatientId) || filteredThreads[0] || null;
  const activeImage = activeThread?.imageUrl ? `${API_BASE}/${activeThread.imageUrl}` : '';
  const activeInitials = activeThread ? `${activeThread.firstName?.[0] || ''}${activeThread.lastName?.[0] || ''}` : '';
  const toggleStar = (event, patientId) => { event.stopPropagation(); setStarredPatients((current) => current.includes(patientId) ? current.filter((id) => id !== patientId) : [...current, patientId]); };
  const displayDate = (value) => { if (!value) return 'Not provided'; const date = new Date(`${value}T00:00:00`); return Number.isNaN(date.getTime()) ? 'Not provided' : date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }); };
  const displayValue = (value) => value || 'Not provided';

  useEffect(() => {
    if (activeThread && activeThread.patientId !== selectedPatientId) onSelectPatient(activeThread.patientId);
  }, [activeThread?.patientId, selectedPatientId]);

  const tabs = [['unread', 'Unread', unreadThreads.length], ['all', 'All', threadGroups.length], ['recent', 'Recent', threadGroups.length], ['starred', 'Starred', starredPatients.length]];
  const contactDetails = activeThread ? [
    ['Phone', activeThread.mobileNo],
    ['Email', activeThread.email],
    ['Date of birth', displayDate(activeThread.dateOfBirth)],
    ['Gender', activeThread.gender],
    ['City', activeThread.city],
    ['State', activeThread.state],
    ['ZIP code', activeThread.zipCode],
    ['Country', activeThread.country],
    ['Address', [activeThread.addressLine1, activeThread.addressLine2].filter(Boolean).join(', ')],
    ['Preferred contact', activeThread.preferredContact],
    ['Interested in', activeThread.serviceInterested],
    ['Status', activeThread.status],
    ['Emergency contact', [activeThread.emergencyName, activeThread.emergencyPhone, activeThread.emergencyRelationship].filter(Boolean).join(' · ')],
    ['Patient note', activeThread.note],
  ] : [];
  return <div className="dashboard-shell rise-agent-shell">
    <aside className={`dashboard-sidebar rise-agent-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item" onClick={onOverview}><span>▣ <b>Patient Process</b></span></button><button className="nav-item" onClick={onPatientList}><span>♙ <b>Patient List</b></span></button><button className="nav-item active"><span>◌ <b>Conversations</b></span>{unreadThreads.length > 0 && <b>{unreadThreads.length}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onOverview}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><button className="mobile-menu-button rise-mobile-menu" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="staff-conversation-page-heading"><div className="staff-conversation-title"><h1>Conversations</h1><button className="staff-conversation-tab active">Conversations</button><button className="staff-conversation-tab">Templates</button><button className="staff-conversation-tab">Analytics</button><button className="staff-conversation-tab">Settings</button><button className="staff-conversation-tab">Trigger Links⌄</button></div><span className="staff-automation-badge">⚙ Automation On</span></div><div className="staff-conversation-notice">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}</div><section className="staff-crm-workspace"><div className="staff-inbox-toolbar"><div><h2>Team inbox</h2><p>{threadGroups.length} patient conversations</p></div><div className="staff-inbox-tools"><button title="Filter">☷</button><button title="Sort">↕</button></div></div><div className="staff-inbox-tabs">{tabs.map(([value, label, count]) => <button key={value} className={inboxTab === value ? 'active' : ''} onClick={() => setInboxTab(value)}><span>{label}</span><b>{count}</b></button>)}</div><div className="staff-inbox-actions"><label><input type="checkbox" /> Select all</label><form onSubmit={(event) => event.preventDefault()}><span>⌕</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search patients" /></form></div><div className="staff-crm-body"><section className="staff-thread-list crm-thread-list">{filteredThreads.length === 0 ? <div className="admin-empty">No patients in this view.</div> : filteredThreads.map((thread) => { const image = thread.imageUrl ? `${API_BASE}/${thread.imageUrl}` : ''; const lastMessage = thread.messages[thread.messages.length - 1]; const threadInitials = `${thread.firstName?.[0] || ''}${thread.lastName?.[0] || ''}`; const unread = thread.messages.filter((item) => item.sender_type === 'patient' && !Number(item.is_read)).length; return <button className={`staff-thread-item crm-thread-item ${activeThread?.patientId === thread.patientId ? 'active' : ''}`} key={thread.patientId} onClick={() => onSelectPatient(thread.patientId)}><input type="checkbox" onClick={(event) => event.stopPropagation()} aria-label={`Select ${thread.firstName} ${thread.lastName}`} /><span className="admin-avatar">{image ? <img src={image} alt="" /> : threadInitials}</span><span className="crm-thread-copy"><strong>{thread.firstName} {thread.lastName}</strong><small>{lastMessage?.message || 'No message'}</small><em>{lastMessage ? formatDate(lastMessage.created_at) : ''}</em></span><span className={`crm-read-status ${unread > 0 ? 'unread' : 'read'}`}>{unread > 0 ? `Unread ${unread}` : 'Read'}</span><span className={`crm-star ${starredPatients.includes(thread.patientId) ? 'active' : ''}`} onClick={(event) => toggleStar(event, thread.patientId)}>☆</span></button>; })}</section><section className="staff-thread-view crm-conversation-view">{activeThread ? <><div className="crm-conversation-heading"><div className="crm-person-heading"><span className="admin-avatar">{activeImage ? <img src={activeImage} alt="" /> : activeInitials}</span><div><strong>{activeThread.firstName} {activeThread.lastName}</strong><small>{activeThread.email}</small></div></div><div className="crm-conversation-actions"><button title="Conversation">◌</button><button title="Call">⌕</button><button title="Archive">▱</button><button title="Star" onClick={(event) => toggleStar(event, activeThread.patientId)}>{starredPatients.includes(activeThread.patientId) ? '★' : '☆'}</button><button title="Close">✉</button></div></div><div className="staff-message-list crm-message-list">{activeThread.messages.map((item) => <div className={`staff-message crm-message ${item.sender_type === 'agent' || item.sender_type === 'admin' ? 'from-staff' : ''}`} key={item.id}><div className="message-meta"><strong>{item.sender_name}</strong><span>{formatDate(item.created_at)}</span></div><p>{item.message}</p></div>)}</div><form className="staff-message-composer crm-composer" onSubmit={sendReply}><button type="button" className="crm-compose-icon">☻⌄</button><textarea value={message} onChange={(event) => setMessage(event.target.value)} placeholder="Type a message" rows="2" /><PrimaryButton type="submit" disabled={sending || !message.trim()}>{sending ? 'Sending...' : 'Send'} <Icon name="arrow" size={16} /></PrimaryButton></form></> : <div className="admin-empty">Select a patient conversation.</div>}</section><aside className="staff-contact-panel">{activeThread ? <><div className="staff-contact-heading"><strong>Patient Details</strong><button onClick={onPatientList}>×</button></div><div className="staff-contact-profile"><span className="admin-avatar">{activeImage ? <img src={activeImage} alt="" /> : activeInitials}</span><div><h3>{activeThread.firstName} {activeThread.lastName}</h3><small>{activeThread.email}</small></div></div><div className="staff-contact-details">{contactDetails.map(([label, value]) => <div className="staff-contact-detail" key={label}><span>{label}</span><strong className={!value ? 'empty' : ''}>{displayValue(value)}</strong></div>)}</div></> : <div className="admin-empty">Select a patient to view details.</div>}</aside></div></section></main></div>
  </div>;
}

function AgentPatientPipelinePageV2({ staff, onLogout, onOpenOverview, onOpenProcess, onOpenConversations, onOpenPatientConversation }) {
  const [smartList, setSmartList] = useState('all');
  const [status, setStatus] = useState('all');
  const [service, setService] = useState('all');
  const [sort, setSort] = useState('recent');
  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [mobileNav, setMobileNav] = useState(false);
  const [patients, setPatients] = useState([]);
  const [smartCounts, setSmartCounts] = useState({});
  const [services, setServices] = useState([]);
  const [stages, setStages] = useState(PIPELINE_STAGE_LABELS);
  const [unreadConversations, setUnreadConversations] = useState(0);
  const [pagination, setPagination] = useState({ page: 1, pages: 1, total: 0 });
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [notice, setNotice] = useState('');
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  const stageOptions = Object.entries(stages).length ? Object.entries(stages) : Object.entries(PIPELINE_STAGE_LABELS);
  const smartLists = [['all', 'All'], ['new_lead', 'New Lead'], ['scheduled', 'Consult Set'], ['vob', 'VOB'], ['contacted', 'Contacted'], ['first_follow_up', 'First Follow Up'], ['second_follow_up', 'Second Follow Up'], ['active', 'Active'], ['no_response', 'No Response']];
  const loadPatients = async () => { setLoading(true); setError(''); const params = new URLSearchParams({ list: smartList, status, service, sort, q: search, page: String(page), per_page: '20' }); try { const result = await apiRequest(`staff_patients.php?${params.toString()}`); setPatients(result.patients || []); setSmartCounts(result.smart_counts || {}); setServices(result.services || []); setStages(result.stages || PIPELINE_STAGE_LABELS); setUnreadConversations(Number(result.unread_conversations || 0)); setPagination(result.pagination || {}); } catch (err) { setError(err.message); } finally { setLoading(false); } };
  useEffect(() => { loadPatients(); }, [smartList, status, service, sort, search, page]);
  const chooseList = (value) => { setSmartList(value); setStatus('all'); setPage(1); };
  const applySearch = (event) => { event.preventDefault(); setPage(1); setSearch(searchInput.trim()); };
  const updateStage = async (patient, stage, nextFollowUpAt = patient.next_follow_up_at || '') => { setError(''); setNotice(''); try { const result = await apiRequest('staff_update_stage.php', { method: 'POST', body: JSON.stringify({ patient_id: patient.id, stage, next_follow_up_at: nextFollowUpAt }) }); setNotice(result.message); await loadPatients(); } catch (err) { setError(err.message); } };
  const imageFor = (patient) => patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : '';
  const initialsFor = (patient) => `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`;
  const dateValue = (value) => value ? value.replace(' ', 'T').slice(0, 16) : '';
  const dateLabel = (value) => value ? new Date(value.replace(' ', 'T')).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
  return <div className="dashboard-shell rise-agent-shell">
    <aside className={`dashboard-sidebar rise-agent-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item" onClick={onOpenOverview}><span>⌂ <b>Home</b></span></button><button className="nav-item" onClick={onOpenProcess}><span>▣ <b>Patient Process</b></span></button><button className="nav-item active"><span>♙ <b>Patient List</b></span></button><button className="nav-item" onClick={onOpenConversations}><span>◌ <b>Conversations</b></span>{unreadConversations > 0 && <b>{unreadConversations}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={onOpenOverview}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onOpenOverview}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><button className="mobile-menu-button rise-mobile-menu" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="rise-title-row"><div><h1>Patient List</h1><button className="rise-smart-title">Pipeline</button></div><div className="rise-title-actions"><button className="rise-action-button">⇩ Import</button><button className="rise-action-button">＋ Add Contact</button><button className="rise-more-button">⋮</button></div></div><section className="rise-list-panel">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}<div className="rise-contact-heading"><h2>Contacts <span>{pagination.total || 0} Contacts</span></h2></div><div className="rise-smart-tabs">{smartLists.map(([value, label]) => <button className={smartList === value ? 'active' : ''} onClick={() => chooseList(value)} key={value}>☷ {label}<small>{smartCounts[value] ?? 0}</small></button>)}</div><div className="rise-list-controls"><div className="rise-control-group"><button className={`rise-control-button ${filtersOpen ? 'active' : ''}`} onClick={() => setFiltersOpen((open) => !open)}>⚱ Filters</button><select className="rise-control-select" value={sort} onChange={(event) => { setSort(event.target.value); setPage(1); }}><option value="recent">↕ Sort: Recent</option><option value="name">↕ Sort: Name</option><option value="activity">↕ Sort: Activity</option></select><button className="rise-control-button" onClick={loadPatients}>↻ Refresh</button></div><form className="rise-search-box" onSubmit={applySearch}><span>⌕</span><input value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder="Search Contacts" /><button type="submit">Search</button></form><button className="rise-manage-fields">⚙ Manage fields</button></div>{filtersOpen && <div className="rise-filter-panel"><label>Stage<select value={status} onChange={(event) => { setStatus(event.target.value); setSmartList('all'); setPage(1); }}><option value="all">All stages</option>{stageOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label><label>Service<select value={service} onChange={(event) => { setService(event.target.value); setPage(1); }}><option value="all">All services</option>{services.map((item) => <option key={item} value={item}>{item}</option>)}</select></label><button onClick={() => { setStatus('all'); setService('all'); setSmartList('all'); setSearchInput(''); setSearch(''); setPage(1); }}>Clear filters</button></div>}<div className="rise-table-wrap"><table className="rise-patient-table rise-pipeline-table"><thead><tr><th><input type="checkbox" aria-label="Select all patients" /></th><th>Contact name ↕</th><th>Phone ↕</th><th>Email ↕</th><th>Service ↕</th><th>Pipeline stage</th><th>Next follow-up</th><th>Last activity ↕</th></tr></thead><tbody>{loading ? <tr><td colSpan="8" className="rise-table-message">Loading patients...</td></tr> : patients.length === 0 ? <tr><td colSpan="8" className="rise-table-message">No patients match these filters.</td></tr> : patients.map((patient) => { const image = imageFor(patient); return <tr key={patient.id}><td><input type="checkbox" aria-label={`Select ${patient.first_name} ${patient.last_name}`} /></td><td><div className="rise-contact-cell"><button type="button" className="rise-contact-link" onClick={() => onOpenPatientConversation(patient.id)}><span className="rise-patient-avatar">{image ? <img src={image} alt="" /> : initialsFor(patient)}</span><strong>{patient.first_name} {patient.last_name}</strong></button></div></td><td><span className="rise-phone-cell">⌕ {patient.mobile_no}</span></td><td className="rise-email-cell">✉ {patient.email}</td><td>{patient.service_interested}</td><td><div className="rise-stage-cell"><select className={`rise-stage-select stage-${patient.status}`} value={patient.status || 'new'} onChange={(event) => updateStage(patient, event.target.value)} aria-label={`Stage for ${patient.first_name} ${patient.last_name}`}>{stageOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select><small>{patient.stage_changed_at ? `Changed ${dateLabel(patient.stage_changed_at)}` : ''}</small></div></td><td><input className="rise-followup-input" type="datetime-local" value={dateValue(patient.next_follow_up_at)} onChange={(event) => updateStage(patient, patient.status || 'new', event.target.value)} aria-label={`Next follow-up for ${patient.first_name} ${patient.last_name}`} /></td><td>{patient.last_activity ? `◌ ${dateLabel(patient.last_activity)}` : '—'}</td></tr>; })}</tbody></table></div><div className="rise-pagination"><span>Page {pagination.page || 1} of {pagination.pages || 1}</span><label>20⌄</label><button disabled={(pagination.page || 1) <= 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>Prev</button><button className="active">{pagination.page || 1}</button><button disabled={(pagination.page || 1) >= (pagination.pages || 1)} onClick={() => setPage((current) => current + 1)}>Next</button></div></section></main></div>
  </div>;
}

function AgentOverviewPage({ staff, onLogout, onProcess, onPatientList, onConversations, stats, recentPatients, loading, notice, error }) {
  const [mobileNav, setMobileNav] = useState(false);
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  useProcessNavOverride(onProcess);
  return <div className="dashboard-shell rise-agent-shell">
    <aside className={`dashboard-sidebar rise-agent-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><button className="rise-search-link">⌕ <span>Search</span><small>Ctrl K</small></button><nav className="dashboard-nav rise-agent-nav"><button className="nav-item active" onClick={() => setMobileNav(false)}><span>⌂ <b>Home</b></span></button><button className="nav-item" onClick={onPatientList}><span>▣ <b>Patient Process</b></span></button><button className="nav-item" onClick={onPatientList}><span>♙ <b>Patient List</b></span></button><button className="nav-item" onClick={onConversations}><span>◌ <b>Conversations</b></span>{stats.open_conversations > 0 && <b>{stats.open_conversations}</b>}</button><button className="nav-item"><span>□ <b>Appointments</b></span></button><div className="rise-nav-divider" /><button className="nav-item" onClick={() => setMobileNav(false)}><span>◉ <b>Dashboard</b></span></button><button className="nav-item" onClick={onPatientList}><span>⌁ <b>Reporting</b></span></button></nav><div className="sidebar-bottom"><button className="nav-item rise-settings-link" onClick={onLogout}><span>☷ <b>Sign out</b></span></button></div></aside>
    <div className="dashboard-main rise-agent-main"><header className="rise-topbar"><button className="mobile-menu-button rise-mobile-menu" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div /><div className="rise-topbar-actions"><button className="rise-slack-button">✣ Slack</button><span className="rise-topbar-icon">⌕</span><span className="rise-topbar-icon">✦</span><span className="rise-topbar-icon">♟</span><span className="rise-topbar-avatar">{initials}</span></div></header><main className="rise-agent-content"><div className="rise-title-row"><div><h1>Dashboard</h1><button className="rise-smart-title">Overview</button></div><div className="rise-title-actions"><button className="rise-action-button" onClick={onPatientList}>Patient List</button><button className="rise-action-button" onClick={onConversations}>Conversations</button></div></div><section className="rise-list-panel">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}<div className="admin-stat-grid"><AdminStat label="Total patients" value={stats.total_patients} /><AdminStat label="New patients" value={stats.new_patients} /><AdminStat label="Open conversations" value={stats.open_conversations} /><AdminStat label="Unread notifications" value={stats.unread_notifications} /></div><div className="admin-overview-grid"><section className="dashboard-card"><div className="card-heading"><div><p className="eyebrow">Patient activity</p><h3>Recent patients</h3></div><button className="admin-text-action" onClick={onPatientList}>View all patients</button></div>{loading ? <div className="admin-empty">Loading patients...</div> : recentPatients.length === 0 ? <div className="admin-empty">No patient registrations yet.</div> : <div className="admin-patient-list">{recentPatients.map((patient) => { const image = patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : ''; const patientInitials = `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`; return <button className="admin-patient-row admin-patient-button" key={patient.id} onClick={onConversations}><span className="admin-avatar">{image ? <img src={image} alt="" /> : patientInitials}</span><span><strong>{patient.first_name} {patient.last_name}</strong><small>{patient.email}</small></span><span className="admin-patient-service">{patient.service_interested}</span><span className={`admin-status ${patient.status}`}>{patient.status}</span></button>; })}</div>}</section><section className="dashboard-card admin-quick-card"><p className="eyebrow">Care team workspace</p><h3>Stay close to every patient</h3><p>Review your patient list, follow up on new leads and respond to conversations from one workspace.</p><PrimaryButton onClick={onConversations}>Open conversations <Icon name="arrow" size={16} /></PrimaryButton></section></div></section></main></div>
  </div>;
}

function StaffDashboard({ staff, onLogout }) {
  const [section, setSection] = useState('patients');
  const [mobileNav, setMobileNav] = useState(false);
  const [stats, setStats] = useState({ total_patients: 0, new_patients: 0, open_conversations: 0, unread_notifications: 0 });
  const [recentPatients, setRecentPatients] = useState([]);
  const [conversations, setConversations] = useState([]);
  const [selectedPatientId, setSelectedPatientId] = useState(null);
  const [message, setMessage] = useState('');
  const [notice, setNotice] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);
  const [sending, setSending] = useState(false);

  const loadData = async () => {
    try {
      const [overview, conversationResult] = await Promise.all([apiRequest('staff_overview.php'), apiRequest('staff_conversations.php')]);
      setStats(overview.stats || {});
      setRecentPatients(overview.recent_patients || []);
      setConversations(conversationResult.conversations || []);
      const notificationResult = await apiRequest('notifications.php');
      setStats((current) => ({ ...current, unread_notifications: Number(notificationResult.unread_count || 0) }));
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
    const timer = window.setInterval(loadData, 15000);
    return () => window.clearInterval(timer);
  }, []);

  const threadGroups = useMemo(() => {
    const grouped = {};
    conversations.forEach((item) => {
      if (!grouped[item.patient_id]) grouped[item.patient_id] = { patientId: item.patient_id, firstName: item.patient_first_name, lastName: item.patient_last_name, mobileNo: item.patient_mobile_no, email: item.patient_email, serviceInterested: item.patient_service_interested, preferredContact: item.patient_preferred_contact_method, note: item.patient_note, status: item.patient_status, imageUrl: item.patient_profile_image_url, dateOfBirth: item.patient_date_of_birth, gender: item.patient_gender, addressLine1: item.patient_address_line1, addressLine2: item.patient_address_line2, city: item.patient_city, state: item.patient_state, zipCode: item.patient_zip_code, country: item.patient_country, emergencyName: item.patient_emergency_contact_name, emergencyPhone: item.patient_emergency_contact_phone, emergencyRelationship: item.patient_emergency_contact_relationship, messages: [] };
      grouped[item.patient_id].messages.push(item);
    });
    return Object.values(grouped).sort((a, b) => new Date(b.messages[b.messages.length - 1].created_at) - new Date(a.messages[a.messages.length - 1].created_at));
  }, [conversations]);

  useEffect(() => {
    if (!selectedPatientId && threadGroups[0]) setSelectedPatientId(threadGroups[0].patientId);
    if (selectedPatientId && !threadGroups.some((thread) => thread.patientId === selectedPatientId)) setSelectedPatientId(threadGroups[0]?.patientId || null);
  }, [threadGroups, selectedPatientId]);

  const selectedThread = threadGroups.find((thread) => thread.patientId === selectedPatientId) || null;
  const markThreadRead = async (patientId) => {
    const hasUnread = conversations.some((item) => Number(item.patient_id) === Number(patientId) && item.sender_type === 'patient' && !Number(item.is_read));
    if (!hasUnread) return;
    setConversations((current) => current.map((item) => Number(item.patient_id) === Number(patientId) && item.sender_type === 'patient' ? { ...item, is_read: 1 } : item));
    setStats((current) => ({ ...current, open_conversations: Math.max(0, Number(current.open_conversations || 0) - 1) }));
    await apiRequest('staff_mark_read.php', { method: 'POST', body: JSON.stringify({ patient_id: patientId }) }).catch(() => {});
  };
  useEffect(() => {
    if (selectedPatientId) markThreadRead(selectedPatientId);
  }, [selectedPatientId]);
  const sendReply = async (event) => {
    event.preventDefault();
    if (!selectedThread || !message.trim()) return;
    setSending(true); setError(''); setNotice('');
    try {
      const result = await apiRequest('admin_message.php', { method: 'POST', body: JSON.stringify({ patient_id: selectedThread.patientId, message }) });
      setMessage(''); setNotice(result.message); await loadData();
    } catch (err) { setError(err.message); }
    finally { setSending(false); }
  };

  const markAllNotifications = async () => {
    await apiRequest('notifications.php', { method: 'POST', body: JSON.stringify({ all: true }) }).catch(() => {});
    setStats((current) => ({ ...current, unread_notifications: 0 }));
  };
  const initials = `${staff.first_name?.[0] || ''}${staff.last_name?.[0] || ''}`;
  const sectionTitle = section === 'conversations' ? 'Patient conversations' : 'Staff dashboard';

  if (section === 'patients') return <AgentPatientPipelinePageV2 staff={staff} onLogout={onLogout} onOpenOverview={() => setSection('overview')} onOpenProcess={() => setSection('process')} onOpenConversations={() => setSection('conversations')} onOpenPatientConversation={(patientId) => { setSelectedPatientId(patientId); setSection('conversations'); }} />;
  if (section === 'process') return <AgentPatientProcessPage staff={staff} onLogout={onLogout} onOpenOverview={() => setSection('overview')} onOpenPatients={() => setSection('patients')} onOpenConversations={() => setSection('conversations')} />;
  if (section === 'conversations') return <AgentConversationsPage staff={staff} onLogout={onLogout} onOverview={() => setSection('overview')} onProcess={() => setSection('process')} onPatientList={() => setSection('patients')} stats={stats} threadGroups={threadGroups} selectedThread={selectedThread} selectedPatientId={selectedPatientId} onSelectPatient={setSelectedPatientId} message={message} setMessage={setMessage} sendReply={sendReply} notice={notice} error={error} sending={sending} />;
  if (section === 'overview') return <AgentOverviewPage staff={staff} onLogout={onLogout} onProcess={() => setSection('process')} onPatientList={() => setSection('patients')} onConversations={() => setSection('conversations')} stats={stats} recentPatients={recentPatients} loading={loading} notice={notice} error={error} />;

  return <div className="dashboard-shell staff-dashboard-shell">
    <aside className={`dashboard-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><p className="sidebar-label">Staff portal</p><nav className="dashboard-nav"><button className={`nav-item ${section === 'overview' ? 'active' : ''}`} onClick={() => { setSection('overview'); setMobileNav(false); }}><span><Icon name="clipboard" size={19} /> Overview</span></button><button className={`nav-item ${section === 'conversations' ? 'active' : ''}`} onClick={() => { setSection('conversations'); setMobileNav(false); }}><span><Icon name="chat" size={19} /> Conversations</span>{stats.open_conversations > 0 && <b>{stats.open_conversations}</b>}</button></nav><div className="sidebar-bottom"><div className="secure-badge"><Icon name="lock" size={16} /><span><strong>Staff access</strong><small>Private & secure</small></span></div><button className="logout-button" onClick={onLogout}><Icon name="logout" size={18} /> Sign out</button></div></aside>
    <div className="dashboard-main"><header className="dashboard-header"><button className="mobile-menu-button" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div><p className="dashboard-kicker">Renovar care team</p><h1>{sectionTitle}</h1></div><div className="staff-header-actions"><button className="staff-notification-button" onClick={markAllNotifications} title="Mark notifications as read"><Icon name="bell" size={18} />{stats.unread_notifications > 0 && <b>{stats.unread_notifications}</b>}</button><div className="profile-chip"><span>{initials}</span><div><strong>{staff.first_name} {staff.last_name}</strong><small>Agent</small></div></div></div></header><main className="dashboard-content staff-dashboard-content">{notice && <div className="dashboard-notice admin-notice">{notice}</div>}{error && <div className="alert admin-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}{section === 'overview' && <><div className="admin-stat-grid"><AdminStat label="Total patients" value={stats.total_patients} /><AdminStat label="New patients" value={stats.new_patients} /><AdminStat label="Open conversations" value={stats.open_conversations} /><AdminStat label="Unread notifications" value={stats.unread_notifications} /></div><div className="admin-overview-grid"><section className="dashboard-card"><div className="card-heading"><div><p className="eyebrow">Patient activity</p><h3>Recent patients</h3></div><button className="admin-text-action" onClick={() => setSection('conversations')}>Open conversations</button></div>{loading ? <div className="admin-empty">Loading patients...</div> : recentPatients.length === 0 ? <div className="admin-empty">No patient registrations yet.</div> : <div className="admin-patient-list">{recentPatients.map((patient) => { const image = patient.profile_image_url ? `${API_BASE}/${patient.profile_image_url}` : ''; const patientInitials = `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`; return <button className="admin-patient-row admin-patient-button" key={patient.id} onClick={() => { setSelectedPatientId(patient.id); setSection('conversations'); }}><span className="admin-avatar">{image ? <img src={image} alt="" /> : patientInitials}</span><span><strong>{patient.first_name} {patient.last_name}</strong><small>{patient.email}</small></span><span className="admin-patient-service">{patient.service_interested}</span><span className={`admin-status ${patient.status}`}>{patient.status}</span></button>; })}</div>}</section><section className="dashboard-card admin-quick-card"><p className="eyebrow">Care team inbox</p><h3>Stay close to every patient</h3><p>Review portal conversations and send a secure reply directly to the patient.</p><PrimaryButton onClick={() => setSection('conversations')}>View conversations <Icon name="arrow" size={16} /></PrimaryButton></section></div></>}{section === 'conversations' && <section className="dashboard-card staff-inbox-card"><div className="card-heading"><div><p className="eyebrow">Team inbox</p><h3>Patient conversations</h3></div><span className="conversation-count">{threadGroups.length} patients</span></div><div className="staff-inbox"><div className="staff-thread-list">{threadGroups.length === 0 ? <div className="admin-empty">No conversations yet.</div> : threadGroups.map((thread) => { const image = thread.imageUrl ? `${API_BASE}/${thread.imageUrl}` : ''; const lastMessage = thread.messages[thread.messages.length - 1]; const threadInitials = `${thread.firstName?.[0] || ''}${thread.lastName?.[0] || ''}`; return <button className={`staff-thread-item ${selectedPatientId === thread.patientId ? 'active' : ''}`} key={thread.patientId} onClick={() => setSelectedPatientId(thread.patientId)}><span className="admin-avatar">{image ? <img src={image} alt="" /> : threadInitials}</span><span><strong>{thread.firstName} {thread.lastName}</strong><small>{lastMessage.message}</small></span><time>{formatDate(lastMessage.created_at)}</time></button>; })}</div><div className="staff-thread-view">{selectedThread ? <><div className="staff-thread-heading"><span className="admin-avatar">{selectedThread.imageUrl ? <img src={`${API_BASE}/${selectedThread.imageUrl}`} alt="" /> : `${selectedThread.firstName?.[0] || ''}${selectedThread.lastName?.[0] || ''}`}</span><div><strong>{selectedThread.firstName} {selectedThread.lastName}</strong><small>{selectedThread.email}</small></div></div><div className="staff-message-list">{selectedThread.messages.map((item) => <div className={`staff-message ${item.sender_type === 'agent' || item.sender_type === 'admin' ? 'from-staff' : ''}`} key={item.id}><div className="message-meta"><strong>{item.sender_name}</strong><span>{formatDate(item.created_at)}</span></div><p>{item.message}</p></div>)}</div><form className="staff-message-composer" onSubmit={sendReply}><textarea value={message} onChange={(event) => setMessage(event.target.value)} placeholder="Write a reply to the patient..." rows="2" /><PrimaryButton type="submit" disabled={sending || !message.trim()}>{sending ? 'Sending...' : 'Send reply'} <Icon name="arrow" size={16} /></PrimaryButton></form></> : <div className="admin-empty">Select a patient conversation.</div>}</div></div></section>}</main></div>
  </div>;
}

function Field({ label, name, type = 'text', value, onChange, placeholder, error, required = false }) {
  return <label className={`field-label ${error ? 'has-error' : ''}`}>{label}{required && <span className="required">*</span>}<input name={name} type={type} value={value} onChange={onChange} placeholder={placeholder} required={required} />{error && <small className="field-error">{error}</small>}</label>;
}

function SelectField({ label, name, value, onChange, error, options, required = false }) {
  return <label className={`field-label select-label ${error ? 'has-error' : ''}`}>{label}{required && <span className="required">*</span>}<select name={name} value={value} onChange={onChange} required={required}><option value="">Select an option</option>{options.map((option) => <option value={option} key={option}>{option}</option>)}</select>{error && <small className="field-error">{error}</small>}</label>;
}

function Alert({ message }) { return message ? <div className="alert"><Icon name="shield" size={17} /><span>{message}</span></div> : null; }

const emptyProfile = { date_of_birth: '', gender: '', address_line1: '', address_line2: '', city: '', state: '', zip_code: '', country: 'United States', emergency_contact_name: '', emergency_contact_phone: '', emergency_contact_relationship: '', profile_image: '', profile_image_url: '' };

function PatientProfilePage({ patient, onImageChange }) {
  const [profile, setProfile] = useState(emptyProfile);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [notice, setNotice] = useState('');
  const [error, setError] = useState('');
  const [passwordForm, setPasswordForm] = useState({ current_password: '', new_password: '', confirm_password: '' });
  const [passwordSaving, setPasswordSaving] = useState(false);
  const [passwordNotice, setPasswordNotice] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [passwordFieldErrors, setPasswordFieldErrors] = useState({});

  useEffect(() => {
    apiRequest('profile.php').then((result) => {
      setProfile({ ...emptyProfile, ...(result.profile || {}) });
    }).catch((err) => setError(err.message)).finally(() => setLoading(false));
  }, []);

  const update = (event) => setProfile({ ...profile, [event.target.name]: event.target.value });
  const saveProfile = async (event) => {
    event.preventDefault(); setError(''); setNotice(''); setSaving(true);
    try {
      const result = await apiRequest('profile.php', { method: 'POST', body: JSON.stringify(profile) });
      setProfile({ ...emptyProfile, ...(result.profile || {}) });
      setNotice(result.message);
    } catch (err) {
      setError(err.message);
    } finally {
      setSaving(false);
    }
  };

  const uploadPhoto = async (event) => {
    const file = event.target.files?.[0];
    event.target.value = '';
    if (!file) return;
    if (file.size > 5 * 1024 * 1024) { setError('Profile picture must be 5 MB or smaller.'); return; }
    setError(''); setNotice(''); setUploading(true);
    const formData = new FormData();
    formData.append('profile_image', file);
    try {
      const result = await apiRequest('profile_image.php', { method: 'POST', body: formData });
      setProfile((current) => ({ ...current, profile_image: result.profile_image, profile_image_url: result.profile_image_url }));
      if (onImageChange) onImageChange(result.profile_image_url || '');
      setNotice(result.message);
    } catch (err) {
      setError(err.message);
    } finally {
      setUploading(false);
    }
  };

  const changePassword = async (event) => {
    event.preventDefault(); setPasswordError(''); setPasswordNotice(''); setPasswordFieldErrors({}); setPasswordSaving(true);
    try {
      const result = await apiRequest('change_password.php', { method: 'POST', body: JSON.stringify(passwordForm) });
      setPasswordForm({ current_password: '', new_password: '', confirm_password: '' });
      setPasswordNotice(result.message);
    } catch (err) {
      setPasswordError(err.message);
      setPasswordFieldErrors(err.payload?.errors || {});
    } finally {
      setPasswordSaving(false);
    }
  };

  const imageSource = profile.profile_image_url ? `${API_BASE}/${profile.profile_image_url}` : '';
  const initials = `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`;
  if (loading) return <section className="patient-profile-page"><div className="profile-loading">Loading your profile...</div></section>;

  return <section className="patient-profile-page">
    <div className="profile-page-heading"><div><p className="eyebrow">Your information</p><h2>My profile</h2><p>Keep your contact and care information up to date so our team can support you properly.</p></div><span className="profile-private"><Icon name="lock" size={16} /> Private & secure</span></div>
    {notice && <div className="dashboard-notice profile-notice">{notice}</div>}
    {error && <div className="alert profile-alert"><Icon name="shield" size={17} /><span>{error}</span></div>}
    <div className="profile-layout">
      <div className="dashboard-card profile-photo-card"><div className="profile-avatar">{imageSource ? <img src={imageSource} alt="Your profile" /> : <span>{initials}</span>}</div><h3>{patient.first_name} {patient.last_name}</h3><p>Patient account</p><label className="profile-upload-button">{uploading ? 'Uploading...' : 'Upload picture'}<input type="file" accept="image/jpeg,image/png,image/webp" onChange={uploadPhoto} disabled={uploading} /></label><small>JPG, PNG or WEBP up to 5 MB</small></div>
      <form className="dashboard-card profile-form-card" onSubmit={saveProfile}><div className="profile-form-heading"><div><p className="eyebrow">Personal details</p><h3>Tell us a little more</h3></div><span className="profile-save-state">{saving ? 'Saving...' : 'Optional details'}</span></div><div className="form-grid two-columns"><Field label="Date of birth" name="date_of_birth" type="date" value={profile.date_of_birth || ''} onChange={update} /><SelectField label="Gender" name="gender" value={profile.gender || ''} onChange={update} options={['Female', 'Male', 'Non-binary', 'Prefer not to say']} /></div><div className="form-grid two-columns"><Field label="Address" name="address_line1" value={profile.address_line1 || ''} onChange={update} placeholder="Street address" /><Field label="Apartment / unit" name="address_line2" value={profile.address_line2 || ''} onChange={update} placeholder="Optional" /></div><div className="form-grid three-columns"><Field label="City" name="city" value={profile.city || ''} onChange={update} placeholder="City" /><Field label="State" name="state" value={profile.state || ''} onChange={update} placeholder="State" /><Field label="ZIP code" name="zip_code" value={profile.zip_code || ''} onChange={update} placeholder="ZIP" /></div><div className="form-grid two-columns"><Field label="Country" name="country" value={profile.country || ''} onChange={update} placeholder="Country" /><div className="readonly-profile-field"><small>Registered email</small><strong>{patient.email}</strong></div></div><div className="profile-divider"><p className="eyebrow">Emergency contact</p><span>Optional, but helpful in case our team needs to reach someone for you.</span></div><div className="form-grid three-columns"><Field label="Full name" name="emergency_contact_name" value={profile.emergency_contact_name || ''} onChange={update} placeholder="Contact name" /><Field label="Phone" name="emergency_contact_phone" type="tel" value={profile.emergency_contact_phone || ''} onChange={update} placeholder="Phone number" /><Field label="Relationship" name="emergency_contact_relationship" value={profile.emergency_contact_relationship || ''} onChange={update} placeholder="e.g. spouse" /></div><PrimaryButton type="submit" disabled={saving} className="profile-save-button">{saving ? 'Saving changes...' : 'Save profile'} <Icon name="check" size={16} /></PrimaryButton></form>
    </div>
    <form className="dashboard-card password-card" onSubmit={changePassword}><div className="profile-form-heading"><div><p className="eyebrow">Account security</p><h3>Change password</h3></div><span className="profile-save-state"><Icon name="lock" size={13} /> Secure</span></div>{passwordNotice && <div className="dashboard-notice password-notice">{passwordNotice}</div>}{passwordError && <div className="alert profile-alert"><Icon name="shield" size={17} /><span>{passwordError}</span></div>}<div className="form-grid three-columns"><Field label="Current password" name="current_password" type="password" value={passwordForm.current_password} onChange={(e) => setPasswordForm({ ...passwordForm, current_password: e.target.value })} error={passwordFieldErrors.current_password} required /><Field label="New password" name="new_password" type="password" value={passwordForm.new_password} onChange={(e) => setPasswordForm({ ...passwordForm, new_password: e.target.value })} placeholder="At least 8 characters" error={passwordFieldErrors.new_password} required /><Field label="Confirm new password" name="confirm_password" type="password" value={passwordForm.confirm_password} onChange={(e) => setPasswordForm({ ...passwordForm, confirm_password: e.target.value })} error={passwordFieldErrors.confirm_password} required /></div><PrimaryButton type="submit" disabled={passwordSaving} className="profile-save-button">{passwordSaving ? 'Changing password...' : 'Change password'} <Icon name="check" size={16} /></PrimaryButton></form>
  </section>;
}

function PatientDashboard({ patient, onLogout }) {
  const [conversations, setConversations] = useState([]); const [message, setMessage] = useState(''); const [notice, setNotice] = useState(''); const [loading, setLoading] = useState(true); const [sending, setSending] = useState(false);
  const [mobileNav, setMobileNav] = useState(false);
  const loadConversations = async () => { try { const result = await apiRequest('conversations.php'); setConversations(result.conversations || []); } catch { setNotice('Conversation history is temporarily unavailable.'); } finally { setLoading(false); } };
  useEffect(() => { loadConversations(); }, []);
  const sendMessage = async (event) => { event.preventDefault(); if (!message.trim()) return; setSending(true); setNotice(''); try { await apiRequest('conversations.php', { method: 'POST', body: JSON.stringify({ message }) }); setMessage(''); setNotice('Your message has been added to the conversation.'); await loadConversations(); } catch (err) { setNotice(err.message); } finally { setSending(false); } };
  const statusLabel = patient.status === 'new' ? 'Registration received' : patient.status;
  return <div className="dashboard-shell">
    <aside className={`dashboard-sidebar ${mobileNav ? 'mobile-open' : ''}`}><div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div><p className="sidebar-label">Patient portal</p><nav className="dashboard-nav"><button className="nav-item active"><span><Icon name="clipboard" size={19} /> Overview</span></button><button className="nav-item"><span><Icon name="chat" size={19} /> Conversations</span>{conversations.length > 0 && <b>{conversations.length}</b>}</button><button className="nav-item"><span><Icon name="calendar" size={19} /> Appointments</span><small>Coming soon</small></button><button className="nav-item"><span><Icon name="user" size={19} /> My profile</span></button></nav><div className="sidebar-bottom"><div className="secure-badge"><Icon name="lock" size={16} /><span><strong>Private & secure</strong><small>Your information is protected</small></span></div><button className="logout-button" onClick={onLogout}><Icon name="logout" size={18} /> Sign out</button></div></aside>
    <div className="dashboard-main"><header className="dashboard-header"><button className="mobile-menu-button" onClick={() => setMobileNav(true)}><Icon name="menu" /></button><div><p className="dashboard-kicker">Tuesday, September 30, 2026</p><h1>Good morning, {patient.first_name}.</h1></div><div className="profile-chip"><span>{patient.first_name[0]}{patient.last_name[0]}</span><div><strong>{patient.first_name} {patient.last_name}</strong><small>Patient</small></div><Icon name="chevron" size={16} /></div></header><main className="dashboard-content"><div className="welcome-banner"><div><p className="eyebrow eyebrow-dark">Welcome to your care space</p><h2>You have taken an important first step.</h2><p>Your care team has received your registration. We will review your information and contact you using your preferred method.</p></div><div className="welcome-symbol"><Icon name="heart" size={34} /></div></div><div className="dashboard-grid"><section className="dashboard-card journey-card"><div className="card-heading"><div><p className="eyebrow">Your care journey</p><h3>Next steps, made simple</h3></div><span className="status-pill"><span /> {statusLabel}</span></div><div className="journey-line"><JourneyStep done title="Registration received" text="Your details are with our team" /><JourneyStep title="Care team review" text="We will review your request" /><JourneyStep title="Your first conversation" text="Connect with a care coordinator" /><JourneyStep title="Personalized care plan" text="Decide what is right for you" /></div></section><section className="dashboard-card profile-card"><div className="card-heading"><div><p className="eyebrow">Your request</p><h3>Care preferences</h3></div><span className="round-icon"><Icon name="user" size={19} /></span></div><div className="profile-details"><Detail label="Interested in" value={patient.service_interested} /><Detail label="Preferred contact" value={patient.preferred_contact_method} /><Detail label="Email" value={patient.email} /></div><div className="profile-note"><Icon name="phone" size={17} /><span>We will reach you through your selected contact method.</span></div></section></div><section className="dashboard-card conversations-card"><div className="card-heading"><div><p className="eyebrow">Stay connected</p><h3>Your conversations</h3></div><span className="conversation-count">{conversations.length} {conversations.length === 1 ? 'message' : 'messages'}</span></div>{notice && <div className="dashboard-notice">{notice}</div>}<div className="conversation-body">{loading ? <div className="empty-conversation">Loading your messages...</div> : conversations.length === 0 ? <div className="empty-conversation"><span className="empty-icon"><Icon name="chat" size={24} /></span><h4>Your care team is here for you.</h4><p>Send a message below if you have a question or would like to share more about your journey.</p></div> : <div className="message-list">{conversations.map((item) => <div className={`message-bubble ${item.sender_type === 'patient' ? 'from-patient' : ''}`} key={item.id}><div className="message-meta"><strong>{item.sender_name}</strong><span>{formatDate(item.created_at)}</span></div><p>{item.message}</p></div>)}</div>}</div><form className="message-composer" onSubmit={sendMessage}><textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Write a message to your care team..." rows="2" /><PrimaryButton type="submit" disabled={sending || !message.trim()}>{sending ? 'Sending...' : 'Send message'} <Icon name="arrow" size={16} /></PrimaryButton></form></section></main></div></div>;
}

function PatientDashboardWithNotifications({ patient, onLogout }) {
  const [conversations, setConversations] = useState([]);
  const [message, setMessage] = useState('');
  const [notice, setNotice] = useState('');
  const [loading, setLoading] = useState(true);
  const [sending, setSending] = useState(false);
  const [mobileNav, setMobileNav] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const [unreadConversationCount, setUnreadConversationCount] = useState(0);
  const [notificationOpen, setNotificationOpen] = useState(false);
  const [pushState, setPushState] = useState(initialPushState);
  const [pushBusy, setPushBusy] = useState(false);
  const [section, setSection] = useState('overview');
  const [profileImageUrl, setProfileImageUrl] = useState(patient.profile_image_url || '');

  const loadConversations = async () => {
    try {
      const result = await apiRequest('conversations.php');
      const nextConversations = result.conversations || [];
      setConversations(nextConversations);
      setUnreadConversationCount(Number(result.unread_count ?? nextConversations.filter((item) => item.sender_type !== 'patient' && !Number(item.is_read)).length));
    } catch {
      setNotice('Conversation history is temporarily unavailable.');
    } finally {
      setLoading(false);
    }
  };

  const loadNotifications = async () => {
    try {
      const result = await apiRequest('notifications.php');
      setNotifications(result.notifications || []);
      setUnreadCount(Number(result.unread_count || 0));
    } catch {
      // Keep the dashboard usable if notifications are temporarily unavailable.
    }
  };

  useEffect(() => {
    loadConversations();
    loadNotifications();
    const timer = window.setInterval(() => {
      loadConversations();
      loadNotifications();
    }, 15000);
    return () => window.clearInterval(timer);
  }, []);

  useEffect(() => {
    if (!('serviceWorker' in navigator)) return undefined;
    navigator.serviceWorker.ready.then(async (registration) => {
      const subscription = await registration.pushManager.getSubscription();
      if (subscription) setPushState('granted');
    }).catch(() => {});
    return undefined;
  }, []);

  useEffect(() => {
    apiRequest('profile.php')
      .then((result) => setProfileImageUrl(result.profile?.profile_image_url || ''))
      .catch(() => {});
  }, [section]);

  const sendMessage = async (event) => {
    event.preventDefault();
    if (!message.trim()) return;
    setSending(true);
    setNotice('');
    try {
      await apiRequest('conversations.php', { method: 'POST', body: JSON.stringify({ message }) });
      setMessage('');
      setNotice('Your message has been added to the conversation.');
      await loadConversations();
    } catch (err) {
      setNotice(err.message);
    } finally {
      setSending(false);
    }
  };

  const handleEnablePush = async () => {
    setPushBusy(true);
    setNotice('');
    try {
      await enableBrowserPush();
      setPushState('granted');
      setNotice('Browser notifications are now enabled on this device.');
    } catch (err) {
      setPushState(typeof Notification !== 'undefined' && Notification.permission === 'denied' ? 'denied' : pushState);
      setNotice(err.message);
    } finally {
      setPushBusy(false);
    }
  };

  const markNotification = async (item) => {
    if (!Number(item.is_read)) {
      await apiRequest('notifications.php', { method: 'POST', body: JSON.stringify({ id: item.id }) }).catch(() => {});
      setNotifications((items) => items.map((entry) => entry.id === item.id ? { ...entry, is_read: 1 } : entry));
      setUnreadCount((count) => Math.max(0, count - 1));
      if (item.conversation_id) {
        setConversations((items) => items.map((entry) => entry.id === item.conversation_id ? { ...entry, is_read: 1 } : entry));
        setUnreadConversationCount((count) => Math.max(0, count - 1));
      }
    }
    if (item.link && item.link !== './') window.location.href = item.link;
  };

  const markAllNotifications = async () => {
    await apiRequest('notifications.php', { method: 'POST', body: JSON.stringify({ all: true }) }).catch(() => {});
    setNotifications((items) => items.map((item) => ({ ...item, is_read: 1 })));
    setConversations((items) => items.map((item) => item.sender_type !== 'patient' ? { ...item, is_read: 1 } : item));
    setUnreadCount(0);
    setUnreadConversationCount(0);
  };

  const statusLabel = patient.status === 'new' ? 'Registration received' : patient.status;
  const showPushButton = pushState === 'default' || pushState === 'denied';
  const profileImageSource = profileImageUrl ? `${API_BASE}/${profileImageUrl}` : '';
  const patientInitials = `${patient.first_name?.[0] || ''}${patient.last_name?.[0] || ''}`;

  return <div className="dashboard-shell">
    <aside className={`dashboard-sidebar ${mobileNav ? 'mobile-open' : ''}`}>
      <div className="sidebar-top"><Brand light /><button className="sidebar-close" onClick={() => setMobileNav(false)}>×</button></div>
      <p className="sidebar-label">Patient portal</p>
      <nav className="dashboard-nav">
        <button className={`nav-item ${section === 'overview' ? 'active' : ''}`} onClick={() => { setSection('overview'); setMobileNav(false); }}><span><Icon name="clipboard" size={19} /> Overview</span></button>
        <button className="nav-item"><span><Icon name="chat" size={19} /> Conversations</span>{unreadConversationCount > 0 && <b>{unreadConversationCount}</b>}</button>
        <button className="nav-item"><span><Icon name="calendar" size={19} /> Appointments</span><small>Coming soon</small></button>
        <button className={`nav-item ${section === 'profile' ? 'active' : ''}`} onClick={() => { setSection('profile'); setMobileNav(false); }}><span><Icon name="user" size={19} /> My profile</span></button>
      </nav>
      <div className="sidebar-bottom"><div className="secure-badge"><Icon name="lock" size={16} /><span><strong>Private & secure</strong><small>Your information is protected</small></span></div><button className="logout-button" onClick={onLogout}><Icon name="logout" size={18} /> Sign out</button></div>
    </aside>
    <div className="dashboard-main">
      <header className="dashboard-header">
        <button className="mobile-menu-button" onClick={() => setMobileNav(true)}><Icon name="menu" /></button>
        <div><p className="dashboard-kicker">Tuesday, September 30, 2026</p><h1>Good morning, {patient.first_name}.</h1></div>
        <div className="dashboard-header-actions">
          <button className="notification-button" onClick={() => setNotificationOpen((open) => !open)} aria-label="Open notifications"><Icon name="bell" size={20} />{unreadCount > 0 && <b className="notification-count">{unreadCount > 9 ? '9+' : unreadCount}</b>}</button>
          {showPushButton && <button className="enable-push-button" onClick={handleEnablePush} disabled={pushBusy}>{pushBusy ? 'Enabling...' : 'Enable notifications'}</button>}
          <div className="profile-chip"><span className={profileImageSource ? 'profile-chip-image' : ''}>{profileImageSource ? <img src={profileImageSource} alt={`${patient.first_name} ${patient.last_name}`} /> : patientInitials}</span><div><strong>{patient.first_name} {patient.last_name}</strong><small>Patient</small></div><Icon name="chevron" size={16} /></div>
          {notificationOpen && <div className="notification-menu"><div className="notification-menu-header"><strong>Notifications</strong>{unreadCount > 0 && <button onClick={markAllNotifications}>Mark all read</button>}</div>{notifications.length === 0 ? <p className="notification-empty">No notifications yet.</p> : notifications.slice(0, 8).map((item) => <button key={item.id} className={`notification-item ${Number(item.is_read) ? '' : 'unread'}`} onClick={() => markNotification(item)}><strong>{item.title}</strong><span>{item.body}</span><small>{formatDate(item.created_at)}</small></button>)}</div>}
        </div>
      </header>
      <main className={`dashboard-content ${section === 'profile' ? 'profile-view' : ''}`}>
        {section === 'profile' && <PatientProfilePage patient={patient} onImageChange={setProfileImageUrl} />}
        {pushState === 'denied' && <div className="push-banner"><Icon name="bell" size={19} /><span>Notifications are blocked in this browser. Allow them in your browser settings to receive new message alerts.</span></div>}
        <div className="welcome-banner"><div><p className="eyebrow eyebrow-dark">Welcome to your care space</p><h2>You have taken an important first step.</h2><p>Your care team has received your registration. We will review your information and contact you using your preferred method.</p></div><div className="welcome-symbol"><Icon name="heart" size={34} /></div></div>
        <div className="dashboard-grid">
          <section className="dashboard-card journey-card"><div className="card-heading"><div><p className="eyebrow">Your care journey</p><h3>Next steps, made simple</h3></div><span className="status-pill"><span /> {statusLabel}</span></div><div className="journey-line"><JourneyStep done title="Registration received" text="Your details are with our team" /><JourneyStep title="Care team review" text="We will review your request" /><JourneyStep title="Your first conversation" text="Connect with a care coordinator" /><JourneyStep title="Personalized care plan" text="Decide what is right for you" /></div></section>
          <section className="dashboard-card profile-card"><div className="card-heading"><div><p className="eyebrow">Your request</p><h3>Care preferences</h3></div><span className="round-icon"><Icon name="user" size={19} /></span></div><div className="profile-details"><Detail label="Interested in" value={patient.service_interested} /><Detail label="Preferred contact" value={patient.preferred_contact_method} /><Detail label="Email" value={patient.email} /></div><div className="profile-note"><Icon name="phone" size={17} /><span>We will reach you through your selected contact method.</span></div></section>
        </div>
        <section className="dashboard-card conversations-card"><div className="card-heading"><div><p className="eyebrow">Stay connected</p><h3>Your conversations</h3></div><span className="conversation-count">{unreadConversationCount} unread {unreadConversationCount === 1 ? 'message' : 'messages'}</span></div>{notice && <div className="dashboard-notice">{notice}</div>}<div className="conversation-body">{loading ? <div className="empty-conversation">Loading your messages...</div> : conversations.length === 0 ? <div className="empty-conversation"><span className="empty-icon"><Icon name="chat" size={24} /></span><h4>Your care team is here for you.</h4><p>Send a message below if you have a question or would like to share more about your journey.</p></div> : <div className="message-list">{conversations.map((item) => { const unreadMessage = item.sender_type !== 'patient' && !Number(item.is_read); return <div className={`message-bubble ${item.sender_type === 'patient' ? 'from-patient' : ''} ${unreadMessage ? 'unread-message' : ''}`} key={item.id}>{item.sender_type === 'patient' && <span className="message-avatar">{profileImageSource ? <img src={profileImageSource} alt="" /> : patientInitials}</span>}<div className="message-meta"><strong>{item.sender_name}</strong>{unreadMessage && <em className="message-unread-label">Unread</em>}<span>{formatDate(item.created_at)}</span></div><p>{item.message}</p></div>; })}</div>}</div><form className="message-composer" onSubmit={sendMessage}><textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Write a message to your care team..." rows="2" /><PrimaryButton type="submit" disabled={sending || !message.trim()}>{sending ? 'Sending...' : 'Send message'} <Icon name="arrow" size={16} /></PrimaryButton></form></section>
      </main>
    </div>
  </div>;
}

function JourneyStep({ done, title, text }) { return <div className={`journey-step ${done ? 'done' : ''}`}><span className="journey-dot">{done && <Icon name="check" size={13} />}</span><div><strong>{title}</strong><small>{text}</small></div></div>; }
function Detail({ label, value }) { return <div><small>{label}</small><strong>{value}</strong></div>; }
function formatDate(date) { return new Date(date.replace(' ', 'T')).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); }
const PIPELINE_STAGE_LABELS = { new: 'New Lead', contacted: 'Contacted', scheduled: 'Consult Set', vob: 'VOB', first_follow_up: 'First Follow Up', second_follow_up: 'Second Follow Up', active: 'Active', no_response: 'No Response', closed: 'Closed' };
function pipelineStageLabel(stage) { return PIPELINE_STAGE_LABELS[stage] || stage || 'Not set'; }

function App() {
  const query = new URLSearchParams(window.location.search);
  const resetTokenFromUrl = query.get('reset') || '';
  const adminRequested = query.get('admin') === '1';
  const staffRequested = query.get('staff') === '1';
  const [view, setView] = useState(resetTokenFromUrl ? 'auth' : adminRequested ? 'admin-login' : staffRequested ? 'staff-login' : 'home'); const [authMode, setAuthMode] = useState(resetTokenFromUrl ? 'reset' : 'register'); const [resetToken, setResetToken] = useState(resetTokenFromUrl); const [patient, setPatient] = useState(null); const [checkingSession, setCheckingSession] = useState(true);
  useEffect(() => { if ('serviceWorker' in navigator) navigator.serviceWorker.register('./sw.js').catch(() => {}); }, []);
  useEffect(() => { apiRequest('me.php').then((result) => { if (resetTokenFromUrl) return; if (result.patient.role === 'admin') { setPatient(result.patient); setView('admin-placeholder'); } else if (result.patient.role === 'agent') { setPatient(result.patient); setView('staff-dashboard'); } else if (!adminRequested && !staffRequested) { setPatient(result.patient); setView('dashboard'); } }).catch(() => {}).finally(() => setCheckingSession(false)); }, []);
  const openAuth = (mode) => { setResetToken(''); setAuthMode(mode); setView('auth'); window.scrollTo(0, 0); };
  const openAdminLogin = () => { setPatient(null); setView('admin-login'); window.history.replaceState({}, document.title, `${window.location.pathname}?admin=1`); window.scrollTo(0, 0); };
  const openStaffLogin = () => { setPatient(null); setView('staff-login'); window.history.replaceState({}, document.title, `${window.location.pathname}?staff=1`); window.scrollTo(0, 0); };
  const logout = async () => { try { await apiRequest('logout.php', { method: 'POST' }); } finally { setPatient(null); setView('home'); window.history.replaceState({}, document.title, window.location.pathname); } };
  const leaveAdminLogin = () => { setView('home'); window.history.replaceState({}, document.title, window.location.pathname); };
  const leaveStaffLogin = () => { setView('home'); window.history.replaceState({}, document.title, window.location.pathname); };
  if (checkingSession) return <div className="loading-screen"><div className="loading-mark">R</div><span>Loading your care space...</span></div>;
  if (view === 'admin-login') return <AdminLoginScreen onSuccess={(account) => { setPatient(account); setView('admin-placeholder'); }} onHome={leaveAdminLogin} />;
  if (view === 'admin-placeholder' && patient) return <AdminDashboard admin={patient} onLogout={logout} onAdminUpdate={setPatient} />;
  if (view === 'staff-login') return <StaffLoginScreen onSuccess={(account) => { setPatient(account); setView('staff-dashboard'); }} onHome={leaveStaffLogin} />;
  if (view === 'staff-dashboard' && patient) return <StaffDashboard staff={patient} onLogout={logout} />;
  if (view === 'dashboard' && patient) return <PatientDashboardWithNotifications patient={patient} onLogout={logout} />;
  if (view === 'auth') return <AuthScreenWithReset initialMode={authMode} resetToken={resetToken} onSuccess={(account) => { setPatient(account); setView('dashboard'); }} onHome={() => setView('home')} />;
  return <LandingPageV2 onLogin={() => openAuth('login')} onRegister={() => openAuth('register')} onAdminLogin={openAdminLogin} onStaffLogin={openStaffLogin} />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);