// Main app — orchestrator

const App = () => {
  const [authed, setAuthed] = React.useState(false);
  const [registering, setRegistering] = React.useState(false);
  const [role, setRole] = React.useState('admin');
  const [page, setPage] = React.useState('dashboard');
  const [company, setCompany] = React.useState('all');
  const [openTaskId, setOpenTaskId] = React.useState(null);
  const [openSupplierId, setOpenSupplierId] = React.useState(null);
  const [chatOpen, setChatOpen] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);

  // When switching role, jump to a sensible default page
  React.useEffect(() => {
    if (role === 'supplier') setPage('sup-home');
    else if (page.startsWith('sup-')) setPage('dashboard');
  }, [role]);

  if (!authed && !registering) {
    return <>
      <LoginPage onLogin={(kind) => { setAuthed(true); setRole(kind === 'supplier' ? 'supplier' : 'admin'); }} onRegister={() => setRegistering(true)}/>
      <ToastStack/>
    </>;
  }
  if (registering) {
    return <>
      <RegistrationFlow onCancel={() => setRegistering(false)} onComplete={() => { setRegistering(false); setAuthed(true); setRole('supplier'); }}/>
      <ToastStack/>
    </>;
  }

  const { TASKS, SUPPLIERS, DOCUMENTS, ME_ADMIN, ME_STAFF } = window.SaifData;
  const me = role === 'admin' ? ME_ADMIN : ME_STAFF;
  const badges = {
    tasks: TASKS.filter(t => t.status !== 'done').length,
    myTasks: TASKS.filter(t => t.assignee === me.id && t.status !== 'done').length,
    approvals: TASKS.filter(t => t.status === 'pending review' && t.assignee === 'me_admin').length,
    suppliers: SUPPLIERS.filter(s => s.status === 'pending').length,
    documents: DOCUMENTS.filter(d => d.status !== 'green').length,
  };

  const openTask = (id) => { setOpenTaskId(id); };
  const openSupplier = (id) => { setOpenSupplierId(id); setPage('suppliers'); };

  const onSearch = (r) => {
    if (r.type === 'task') { setPage('tasks'); openTask(r.id); }
    if (r.type === 'supplier') openSupplier(r.id);
  };

  const supplier = openSupplierId ? SUPPLIERS.find(s => s.id === openSupplierId) : null;
  const task = openTaskId ? TASKS.find(t => t.id === openTaskId) : null;

  let view;
  if (role === 'supplier') {
    if (page === 'sup-home') view = <SupplierHome/>;
    else if (page === 'sup-docs') view = <DocumentsPage company="all"/>;
    else if (page === 'sup-pos') view = <POsPage company="all"/>;
    else if (page === 'sup-tasks') view = <TasksPage role="staff" company="all" openTask={openTask} openTaskId={openTaskId}/>;
    else view = <SupplierHome/>;
  } else {
    if (openSupplierId && page === 'suppliers') view = <SupplierDetail supplier={supplier} onClose={() => setOpenSupplierId(null)} role={role}/>;
    else if (page === 'dashboard') view = <Dashboard role={role} company={company} openTask={openTask} openSupplier={openSupplier} setPage={setPage}/>;
    else if (page === 'tasks') view = <TasksPage role={role} company={company} openTask={openTask} openTaskId={openTaskId}/>;
    else if (page === 'workflows') view = <ApprovalWorkflowPage/>;
    else if (page === 'suppliers') view = <SuppliersPage company={company} openSupplier={openSupplier} role={role}/>;
    else if (page === 'documents') view = <DocumentsPage company={company}/>;
    else if (page === 'pos') view = <POsPage company={company}/>;
    else if (page === 'reports') view = <ComingSoonPage title="Reports" desc="Group-wide reporting and exports"/>;
    else if (page === 'users') view = <ComingSoonPage title="Users & Roles" desc="Manage staff access across all group companies"/>;
    else if (page === 'registration-form') view = <RegFormConfig/>;
    else if (page === 'settings') view = <ComingSoonPage title="Settings" desc="Workspace configuration"/>;
    else view = <Dashboard role={role} company={company} openTask={openTask} openSupplier={openSupplier} setPage={setPage}/>;
  }

  return (
    <div className="app">
      <TopBar
        role={role} setRole={setRole}
        company={company} setCompany={setCompany}
        onSearch={onSearch}
        onChat={() => { setChatOpen(o => !o); setNotifOpen(false); }}
        onNotif={() => { setNotifOpen(o => !o); setChatOpen(false); }}
        notifCount={3} chatUnread={11}
      />
      <Sidebar role={role} page={page} setPage={(p) => { setPage(p); setOpenTaskId(null); setOpenSupplierId(null); }} company={company} setCompany={setCompany} badges={badges}/>
      <div className="main">{view}</div>
      {task && <TaskDetailPanel task={task} onClose={() => setOpenTaskId(null)} role={role}/>}

      {!chatOpen && (
        <button className="chat-fab" onClick={() => setChatOpen(true)} title="Open chat">
          <Icon name="chat" size={20}/>
          <span className="chat-fab-dot"></span>
        </button>
      )}
      <ChatWidget open={chatOpen} onClose={() => setChatOpen(false)}/>
      <NotifPanel open={notifOpen} onClose={() => setNotifOpen(false)}/>
      <ToastStack/>
    </div>
  );
};

const ComingSoonPage = ({ title, desc }) => (
  <div className="page">
    <div className="page-header">
      <div><h1 className="page-title">{title}</h1><p className="page-subtitle">{desc}</p></div>
    </div>
    <div className="card"><div className="empty-state">
      <Icon name="sparkle" size={32} className="text-dim"/>
      <h3>{title}</h3>
      <p>This area is part of the broader portal scope.<br/>Wireframed and ready for spec'ing in the next round.</p>
    </div></div>
  </div>
);

const RegFormConfig = () => {
  const [fields, setFields] = React.useState([
    { id: 1, label: 'Legal company name', type: 'text', required: true, step: 1 },
    { id: 2, label: 'Trade License #', type: 'text', required: true, step: 1 },
    { id: 3, label: 'VAT (TRN)', type: 'text', required: false, step: 1 },
    { id: 4, label: 'Industry', type: 'select', required: true, step: 1 },
    { id: 5, label: 'Contact full name', type: 'text', required: true, step: 2 },
    { id: 6, label: 'Contact email', type: 'email', required: true, step: 2 },
    { id: 7, label: 'IBAN', type: 'text', required: true, step: 3 },
    { id: 8, label: 'Trade License doc', type: 'file', required: true, step: 4 },
    { id: 9, label: 'VAT Certificate doc', type: 'file', required: true, step: 4 },
    { id: 10, label: 'Insurance doc', type: 'file', required: false, step: 4 },
  ]);
  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Registration form</h1>
          <p className="page-subtitle">Configure what suppliers see when they self-register</p>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="eye" size={14}/> Preview</button>
          <button className="btn btn-primary"><Icon name="check" size={14}/> Publish changes</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 18 }}>
        <div className="card">
          <div className="card-header"><h3 className="card-title">Form fields</h3><button className="btn btn-sm"><Icon name="plus" size={12}/> Add field</button></div>
          {[1,2,3,4].map(s => (
            <div key={s}>
              <div style={{ padding: '10px 18px', background: 'var(--surface-2)', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-mute)', borderTop: '1px solid var(--line-2)', borderBottom: '1px solid var(--line-2)' }}>
                Step {s} — {['Company', 'Contacts', 'Bank', 'Documents'][s-1]}
              </div>
              {fields.filter(f => f.step === s).map(f => (
                <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderBottom: '1px solid var(--line-2)' }}>
                  <Icon name="moreH" size={14} className="text-dim"/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{f.label} {f.required && <span style={{ color: 'var(--red)', fontSize: 11 }}>required</span>}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-mute)' }}>Type: {f.type}</div>
                  </div>
                  <button className="btn btn-sm btn-ghost"><Icon name="edit" size={12}/></button>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div className="card">
          <div className="card-header"><h3 className="card-title">Form settings</h3></div>
          <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13 }}>
            <label style={{ display: 'flex', justifyContent: 'space-between' }}>Allow multiple businesses <input type="checkbox" defaultChecked/></label>
            <label style={{ display: 'flex', justifyContent: 'space-between' }}>Require expiration date on documents <input type="checkbox" defaultChecked/></label>
            <label style={{ display: 'flex', justifyContent: 'space-between' }}>Auto-approve trusted domains <input type="checkbox"/></label>
            <label style={{ display: 'flex', justifyContent: 'space-between' }}>Send approval email automatically <input type="checkbox" defaultChecked/></label>
            <div>
              <div className="text-xs text-mute mb-4">Reviewer (auto-assigned)</div>
              <select className="form-control"><option>Layla Hassan — Compliance</option></select>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

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