// Neal Communities — app routing + tweaks

const NEAL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e3701b",
  "density": "comfortable"
}/*EDITMODE-END*/;

const NEAL_ACCENTS = ['#e3701b', '#15406c', '#2f9e6f', '#c0392b', '#7a5cc4'];

function NealApp() {
  const [t, setTweak] = window.useTweaks(NEAL_TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('dashboard');
  const [lead, setLead] = React.useState(null);
  const [person, setPerson] = React.useState(null);
  const [journeyId, setJourneyId] = React.useState(null);
  const [home, setHome] = React.useState(null);
  const [community, setCommunity] = React.useState(null);
  const [copilotOpen, setCopilotOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--orange', t.accent);
    document.documentElement.style.setProperty('--orange-hi', shadeN(t.accent, 0.15));
    document.documentElement.style.setProperty('--orange-soft', rgbaN(t.accent, 0.12));
    document.documentElement.style.setProperty('--orange-line', rgbaN(t.accent, 0.40));
    document.body.dataset.density = t.density;
  }, [t.accent, t.density]);

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') { e.preventDefault(); setCopilotOpen(o => !o); }
      else if (e.key === 'Escape' && copilotOpen) setCopilotOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [copilotOpen]);

  const openLead = (l) => { setLead(l); setRoute('lead-detail'); };
  const openPerson = (p) => { setPerson(p); setRoute('person'); };
  const openJourney = (id) => { setJourneyId(id); setRoute('journey'); };
  const openHome = (h) => { setHome(h); setRoute('home-detail'); };
  const openCommunity = (c) => { setCommunity(c); setRoute('community-detail'); };

  const crumbs = {
    dashboard: ['Overview', 'Dashboard'],
    pipeline: ['Overview', 'Sales Pipeline'],
    leads: ['People', 'Buyer Leads'],
    'lead-detail': ['People', 'Buyer Leads', lead?.name || ''],
    tours: ['People', 'Tours & Appts'],
    homes: ['Inventory', 'Homes'],
    'home-detail': ['Inventory', 'Homes', home?.name || ''],
    communities: ['Inventory', 'Communities'],
    'community-detail': ['Inventory', 'Communities', community?.name || ''],
    people: ['People', 'Contacts'],
    person: ['People', 'Contacts', person?.name || ''],
    journeys: ['Marketing', 'Journeys'],
    journey: ['Marketing', 'Journeys', (window.NealData.journeys.find(j => j.id === journeyId) || {}).name || ''],
    forms: ['Marketing', 'Lead Forms'],
    website: ['Marketing', 'Website'],
    integrations: ['Marketing', 'Integrations'],
  }[route] || ['Overview'];

  const ctx = {
    dashboard: 'Workspace overview', pipeline: 'Pipeline · 47 deals', leads: 'All buyers',
    'lead-detail': lead ? `${lead.id} · ${lead.name}` : 'Buyer', tours: 'Tours this week',
    homes: 'Homes · 103 available', communities: 'Communities',
    'home-detail': home ? `${home.name} · ${home.community}` : 'Home',
    'community-detail': community ? `${community.name} · ${community.city}` : 'Community',
    people: 'Contacts · 2,418 in database', person: person ? `${person.id} · ${person.name}` : 'Contact',
    journeys: 'Journeys · automations', journey: (window.NealData.journeys.find(j => j.id === journeyId) || {}).name || 'Journey',
    forms: 'Lead forms', website: 'Website', integrations: 'Connected sources · 14',
  }[route] || 'Workspace';

  let body;
  switch (route) {
    case 'dashboard': body = <NealDashboard onSelectLead={openLead} onSelectCommunity={openCommunity}/>; break;
    case 'pipeline': body = <NealPipeline/>; break;
    case 'leads': body = <NealLeads onSelectLead={openLead}/>; break;
    case 'lead-detail': body = <NealLeadDetail lead={lead || window.NealData.leads[0]} onBack={() => setRoute('leads')} onOpenJourney={openJourney}/>; break;
    case 'homes': body = <NealHomes onSelectLead={openLead} onSelectHome={openHome}/>; break;
    case 'communities': body = <NealCommunities onSelectCommunity={openCommunity}/>; break;
    case 'home-detail': body = <NealHomeDetail home={home || window.NealData.homes[0]} onBack={() => setRoute('homes')} onSelectPerson={openPerson} onSelectCommunity={openCommunity}/>; break;
    case 'community-detail': body = <NealCommunityDetail community={community || window.NealData.communities[0]} onBack={() => setRoute('communities')} onSelectHome={openHome} onSelectPerson={openPerson}/>; break;
    case 'people': body = <NealPeople onSelectPerson={openPerson} onOpenJourney={openJourney}/>; break;
    case 'person': body = <NealPerson person={person || window.NealData.people[0]} onBack={() => setRoute('people')} onOpenJourney={openJourney} onOpenLead={openLead}/>; break;
    case 'journeys': body = <NealJourneys onOpenJourney={openJourney}/>; break;
    case 'journey': body = <NealJourneyDetail journey={window.NealData.journeys.find(j => j.id === journeyId) || window.NealData.journeys[0]} onBack={() => setRoute('journeys')} onSelectPerson={openPerson}/>; break;
    case 'tours': body = <NealTours onSelectLead={openLead}/>; break;
    case 'forms': body = <NealForms onOpenJourney={openJourney}/>; break;
    case 'website': body = <NealWebsite/>; break;
    case 'integrations': body = <NealIntegrations/>; break;
    default: body = <NealDashboard onSelectLead={openLead} onSelectCommunity={openCommunity}/>;
  }

  const navMap = { 'lead-detail': 'leads', 'person': 'people', 'journey': 'journeys', 'home-detail': 'homes', 'community-detail': 'communities' };
  const navId = navMap[route] || route;

  return (
    <>
      <div className="app">
        <NealSidebar current={navId} onNav={setRoute}/>
        <div className="main">
          <NealTopBar crumbs={crumbs} onOpenCopilot={() => setCopilotOpen(true)}/>
          <div className="content">{body}</div>
        </div>
      </div>

      <NealCopilot context={ctx} open={copilotOpen} onClose={() => setCopilotOpen(false)}/>
      {!copilotOpen && <NealLauncher onOpen={() => setCopilotOpen(true)}/>}

      <NealTweaks t={t} setTweak={setTweak}/>
    </>
  );
}

function NealTweaks({ t, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;
  return (
    <TweaksPanel>
      <TweakSection label="Brand">
        <TweakColor label="Accent color" value={t.accent} options={NEAL_ACCENTS} onChange={v => setTweak('accent', v)}/>
      </TweakSection>
      <TweakSection label="Layout">
        <TweakRadio label="Density" value={t.density} options={['comfortable', 'compact']} onChange={v => setTweak('density', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

function NealStub({ title, sub, label }) {
  return (
    <div data-screen-label={label}>
      <div className="page-head">
        <div>
          <div className="eyebrow accent" style={{marginBottom: 8}}>NEAL COMMUNITIES</div>
          <h1 className="page-title">{title}</h1>
          <p className="page-sub">{sub}</p>
        </div>
      </div>
      <div className="card" style={{padding: 60, textAlign: 'center'}}>
        <div className="ai-bug" style={{width: 44, height: 44, margin: '0 auto 16px'}}>{NI.sparkle}</div>
        <div style={{fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 600, color: 'var(--ink)'}}>Module ready to build out</div>
        <p style={{fontSize: 13, color: 'var(--muted)', maxWidth: 420, margin: '8px auto 0', lineHeight: 1.55}}>
          The dashboard, pipeline, leads, homes, and communities screens are fully designed. This module follows the same patterns — let me know to flesh it out next.
        </p>
      </div>
    </div>
  );
}

function rgbaN(hex, a) {
  const h = hex.replace('#', '');
  return `rgba(${parseInt(h.slice(0,2),16)},${parseInt(h.slice(2,4),16)},${parseInt(h.slice(4,6),16)},${a})`;
}
function shadeN(hex, amt) {
  const h = hex.replace('#', '');
  let r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  r = Math.min(255, Math.round(r + (255-r)*amt)); g = Math.min(255, Math.round(g + (255-g)*amt)); b = Math.min(255, Math.round(b + (255-b)*amt));
  return `rgb(${r}, ${g}, ${b})`;
}

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