/* ============ Entity List + Entity Detail ============ */

/* ====== Entity List ====== */
const EntityList = ({ state, nav }) => {
  const [q, setQ] = React.useState("");
  const [myJobs, setMyJobs] = React.useState(false);
  const [newOpen, setNewOpen] = React.useState(false);

  const me = CURRENT_ADMIN.id;

  /* Search — name (case-insensitive) OR tax ID (only when user typed digits) */
  const matchesQuery = (e) => {
    const term = q.trim();
    if (!term) return true;
    if (e.name.toLowerCase().includes(term.toLowerCase())) return true;
    const digits = term.replace(/\D/g, "");
    if (digits && e.taxId.includes(digits)) return true;
    return false;
  };

  /* My Jobs only — entity is "mine" when I'm linked to any of its projects
     (member / creator / approver) OR I'm in the entity's Project Creators list. */
  const matchesMyJobs = (e) => {
    if (!myJobs) return true;
    if ((e.creators || []).includes(me)) return true;
    return state.projects.some(p =>
      p.entityId === e.id &&
      (p.members.includes(me) || p.createdBy === me || p.approvedBy === me)
    );
  };

  /* Sorting — click a column header to toggle asc/desc */
  const [sort, setSort] = React.useState({ k: null, dir: "asc" });
  const SORT_GETTERS = {
    name:     e => e.name,
    taxId:    e => e.taxId,
    projects: e => state.projects.filter(p => p.entityId === e.id).length,
    storage:  e => entityStorageMB(e.id, state.projects),
  };

  const rows = sortRows(
    state.entities.filter(e => matchesQuery(e) && matchesMyJobs(e)),
    sort, SORT_GETTERS);

  /* Pagination — client list can grow large in real use. Page size is
     user-selectable; 5 default keeps the pager visible with seed data. */
  const PAGE_SIZES = [5, 10, 25, 50];
  const [pageSize, setPageSize] = React.useState(5);
  const [page, setPage] = React.useState(1);
  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
  const safePage = Math.min(page, totalPages);
  const pageRows = rows.slice((safePage - 1) * pageSize, safePage * pageSize);

  return (
    <>
      <div className="page-head">
        <div className="page-title-row">
          <h1 className="page-title">Entities</h1>
          <div className="page-actions">
            <button className="btn primary" onClick={()=>setNewOpen(true)}>
              <Icon n="plus" s={13}/> New Entity
            </button>
          </div>
        </div>
      </div>

      <div className="page-body">
        <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap",marginBottom:14}}>
          <div className="input" style={{minWidth:280}}>
            <Icon n="search" s={14} c="muted"/>
            <input placeholder="Search by name or Tax ID…" value={q} onChange={e=>{setQ(e.target.value); setPage(1);}}/>
          </div>
          <div style={{marginLeft:"auto"}}>
            <button className={`toggle ${myJobs?"on":""}`} onClick={()=>{setMyJobs(!myJobs); setPage(1);}}>
              <span className="knob"></span>
              My Jobs only
            </button>
          </div>
        </div>

        {rows.length === 0 ? (
          <div className="card">
            <EmptyState
              icon="building"
              title="No entities yet"
              sub="Add your first client to get started."
              cta={<button className="btn primary" onClick={()=>setNewOpen(true)}><Icon n="plus" s={13}/> New entity</button>}
            />
          </div>
        ) : (
          <div className="card">
            <table className="tbl">
              <thead><tr>
                <SortTh label="Entity name" k="name" sort={sort} setSort={setSort}/>
                <SortTh label="Tax ID" k="taxId" sort={sort} setSort={setSort}/>
                <SortTh label="Projects" k="projects" sort={sort} setSort={setSort} style={{textAlign:"right",width:120}}/>
                <SortTh label="Storage" k="storage" sort={sort} setSort={setSort} style={{textAlign:"right",width:90}}/>
                <th style={{width:140}}>Creators</th>
                <th style={{width:80,textAlign:"right"}}></th>
              </tr></thead>
              <tbody>
                {pageRows.map(e => {
                  const projects = state.projects.filter(p => p.entityId === e.id);
                  const active = projects.filter(p => p.status === "active").length;
                  const draft = projects.filter(p => p.status === "draft").length;
                  return (
                    <tr key={e.id} className="clickable" onClick={()=>nav.go({view:"entity-detail", entityId:e.id})}>
                      <td>
                        <div style={{display:"flex",alignItems:"center",gap:10}}>
                          <span className={`ent-mark`} style={{background:`var(--ink)`,width:30,height:30,fontSize:10}}>{e.code}</span>
                          <div style={{display:"flex",flexDirection:"column",gap:2,minWidth:0,maxWidth:420}}>
                            <span className="truncate" style={{fontWeight:600}}>{e.name}</span>
                            <span className="truncate muted" style={{fontSize:11.5}} title={e.desc}>{e.desc.split(".")[0]}</span>
                          </div>
                        </div>
                      </td>
                      <td><span className="mono" style={{fontSize:12}}>{e.taxId}</span></td>
                      <td style={{textAlign:"right"}}>
                        <div style={{display:"flex",alignItems:"center",gap:6,justifyContent:"flex-end"}}>
                          <span style={{fontFamily:"var(--mono)",fontWeight:600}}>{projects.length}</span>
                          {draft > 0 && <span className="badge">{draft} draft</span>}
                        </div>
                      </td>
                      <td style={{textAlign:"right"}}>
                        <span className="mono" style={{fontSize:11.5,color:"var(--muted)"}}>{fmtMB(entityStorageMB(e.id, state.projects))}</span>
                      </td>
                      <td>
                        {e.creators.length === 0 ? (
                          <span className="badge" style={{background:"var(--danger-soft)",color:"var(--danger-ink)",borderColor:"transparent"}}>none set</span>
                        ) : (
                          <div className="avatar-stack">
                            {e.creators.slice(0,4).map(uid=>{const u=userById(uid);return <Avatar key={uid} id={uid} name={u.name} size="sm"/>;})}
                            {e.creators.length > 4 && <span className="avatar sm" style={{background:"var(--ink)",color:"#fff",borderColor:"transparent"}}>+{e.creators.length-4}</span>}
                          </div>
                        )}
                      </td>
                      <td style={{textAlign:"right"}}>
                        <button className="btn sm ghost" onClick={(ev)=>{ev.stopPropagation();nav.go({view:"entity-detail", entityId:e.id});}}>Open <Icon n="chev-r" s={11}/></button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {/* Footer shows whenever the list outgrows the smallest page size,
               so the per-page selector stays reachable even on a single page */}
            {rows.length > PAGE_SIZES[0] && (
              <div style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",borderTop:"1px solid var(--line)"}}>
                <span className="mono" style={{fontSize:11,color:"var(--muted)"}}>
                  {(safePage - 1) * pageSize + 1}–{Math.min(safePage * pageSize, rows.length)} of {rows.length}
                </span>
                <select className="btn sm" value={pageSize} title="Rows per page"
                  onChange={e=>{ setPageSize(Number(e.target.value)); setPage(1); }}
                  style={{fontFamily:"var(--mono)",fontSize:11}}>
                  {PAGE_SIZES.map(n => <option key={n} value={n}>{n} / page</option>)}
                </select>
                <div style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:6}}>
                  <button className="btn sm ghost" disabled={safePage <= 1} onClick={()=>setPage(safePage - 1)}>
                    <Icon n="arrow-l" s={11}/> Prev
                  </button>
                  <span className="mono" style={{fontSize:11,color:"var(--muted)"}}>{safePage} / {totalPages}</span>
                  <button className="btn sm ghost" disabled={safePage >= totalPages} onClick={()=>setPage(safePage + 1)}>
                    Next <Icon n="chev-r" s={11}/>
                  </button>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {newOpen && <NewEntityModal
        existingTaxIds={state.entities.map(e=>e.taxId)}
        onClose={()=>setNewOpen(false)}
        onSave={(payload)=>{
          const code = payload.name.replace(/[^A-Za-z0-9]/g,"").slice(0,3).toUpperCase() || "NEW";
          const id = "E-" + String(100 + state.entities.length).padStart(3,"0");
          nav.addEntity({ id, code, color:"a0", ...payload, archived:false, creators:[] });
          nav.toast("Entity created","ok");
          setNewOpen(false);
        }}/>}
    </>
  );
};

/* ====== Entity Detail — 2 tabs ======
   Per user feedback (rev. MTG3) — Projects is now the default landing tab.
   Info / Edit history / Project Creators consolidated into a single "Settings"
   tab (accordion-style) so they don't compete with Projects for attention. */
const EntityDetail = ({ state, nav, entityId, tab="projects" }) => {
  const e = state.entities.find(x => x.id === entityId);
  if (!e) return <div className="page-body"><div className="empty">Entity not found</div></div>;
  const projects = state.projects.filter(p => p.entityId === e.id);
  const history = ENTITY_HISTORY[e.id] || [{ ts:"2026-02-01T09:00:00", actor:"U-AD1", action:"create", detail:"Entity created" }];

  const [edit, setEdit] = React.useState(false);
  const [showAddCreator, setShowAddCreator] = React.useState(false);

  const setTab = (t) => nav.go({ view:"entity-detail", entityId, tab:t });

  return (
    <>
      <div className="page-head tight">
        <div style={{display:"flex",alignItems:"flex-start",gap:14}}>
          <span className="ent-mark lg" style={{background:"var(--ink)",marginTop:2}}>{e.code}</span>
          <div style={{flex:1,minWidth:0}}>
            <div className="page-title-row" style={{alignItems:"baseline"}}>
              <h1 className="page-title" style={{minWidth:0}}>{e.name}</h1>
              <span className="mono" style={{fontSize:12,color:"var(--muted)"}}>{e.taxId}</span>
              <span className="mono" style={{fontSize:12,color:"var(--muted)"}} title="Cloud storage used across this client's projects">
                · {fmtMB(entityStorageMB(e.id, state.projects))} used
              </span>
            </div>
            {e.desc && (
              <div style={{marginTop:6, fontSize:13, lineHeight:1.55, color:"var(--ink-2)", maxWidth:760, overflowWrap:"anywhere"}}>
                {e.desc}
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="tabbar">
        <button className={`tab ${tab==="projects"?"active":""}`} onClick={()=>setTab("projects")}>
          <Icon n="layers" s={13}/> Projects <span className="badge-count">{projects.length}</span>
        </button>
        <button className={`tab ${tab==="settings"?"active":""}`} onClick={()=>setTab("settings")} title="Entity info, edit history, and Project Creators">
          <Icon n="settings" s={13}/> Settings &amp; Management
        </button>
      </div>

      <div className="page-body">
        {tab === "projects" && (
          <ProjectsTab entity={e} projects={projects} nav={nav}/>
        )}

        {tab === "settings" && (
          <div>
            <div>
              {/* Entity info */}
              <div className="sec">
                <div className="sec-head">
                  <span className="sec-title"><Icon n="building" s={14}/> Entity info</span>
                  <div className="sec-actions"><button className="btn sm" onClick={()=>setEdit(true)}><Icon n="edit-3" s={12}/> Edit</button></div>
                </div>
                <div className="sec-body">
                  <dl className="kv">
                    <dt>Name</dt><dd>{e.name}</dd>
                    <dt>Tax ID</dt><dd className="mono">{e.taxId}</dd>
                    <dt>Description</dt><dd>{e.desc || <span className="muted">—</span>}</dd>
                  </dl>
                </div>
              </div>

              {/* Project Creators — was its own tab; now lives in Settings */}
              <div className="sec">
                <div className="sec-head">
                  <span className="sec-title"><Icon n="lock" s={14}/> Project Creators <span className="badge">{e.creators.length}</span></span>
                  <div className="sec-actions">
                    <button className="btn primary sm" onClick={()=>setShowAddCreator(true)}><Icon n="plus" s={12}/> Add Creator</button>
                  </div>
                </div>
                <div className="sec-body">
                  {e.creators.length === 0 ? (
                    <EmptyState
                      icon="users"
                      title="No Project Creators yet"
                      sub="Assign at least one Supervisor before they can create Projects under this entity."
                      cta={<button className="btn primary" onClick={()=>setShowAddCreator(true)}><Icon n="plus" s={13}/> Add Creator</button>}
                    />
                  ) : (
                    <div style={{display:"flex",flexDirection:"column",gap:8}}>
                      {e.creators.map(uid => {
                        const u = userById(uid);
                        return (
                          <div key={uid} style={{display:"flex",alignItems:"center",gap:12,padding:"12px 14px",border:"1px solid var(--line)",borderRadius:"var(--radius)"}}>
                            <Avatar id={uid} name={u.name} size="lg"/>
                            <div style={{flex:1}}>
                              <div style={{fontWeight:600}}>{u.name}</div>
                              <div className="muted" style={{fontSize:11.5,fontFamily:"var(--mono)"}}>{u.email}</div>
                            </div>
                            <span className="badge">Supervisor</span>
                            <button className="btn sm danger" onClick={()=>{
                              nav.updateEntity(e.id, { creators: e.creators.filter(c=>c!==uid) });
                              nav.toast("Creator removed","warn");
                            }}><Icon n="x" s={11}/> Remove</button>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>

              {/* Edit history — was its own tab; now lives in Settings */}
              <div className="sec">
                <div className="sec-head">
                  <span className="sec-title"><Icon n="history" s={14}/> Edit history <span className="badge">{history.length}</span></span>
                </div>
                <div className="sec-body">
                  <div className="tl">
                    {history.map((ev,i) => {
                      const u = userById(ev.actor);
                      const cls = ev.action === "create" ? "ok" : ev.action === "add_creator" ? "warn" : "draft";
                      const ic  = ev.action === "create" ? "sparkle" : ev.action === "add_creator" ? "users" : ev.action === "remove_creator" ? "x" : "edit";
                      return (
                        <div key={i} className={`tl-ev ${cls}`}>
                          <div className="tl-node"><div className="tl-ind"><Icon n={ic} s={13}/></div></div>
                          <div className="tl-content">
                            <div className="tl-date">{fmtTs(ev.ts)}</div>
                            <div className="tl-title">{u.name} <span className="tl-act">· {ev.action.replace("_"," ")}</span></div>
                            <div className="tl-desc">{ev.detail}</div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {edit && <EditEntityModal entity={e} onClose={()=>setEdit(false)} onSave={(payload)=>{
        nav.updateEntity(e.id, payload);
        nav.toast("Entity updated","ok");
        setEdit(false);
      }}/>}
      {showAddCreator && <AddCreatorModal entity={e} onClose={()=>setShowAddCreator(false)} onAdd={(uid)=>{
        nav.updateEntity(e.id, { creators: [...e.creators, uid] });
        nav.toast("Project Creator added","ok");
        setShowAddCreator(false);
      }}/>}
    </>
  );
};

/* Projects tab inside an Entity */
const ProjectsTab = ({ entity, projects, nav }) => {
  const [filter, setFilter] = React.useState("all");
  const matches = (p) => filter === "all" || p.status === filter;

  /* Sorting — click a column header to toggle asc/desc */
  const [sort, setSort] = React.useState({ k: null, dir: "asc" });
  const RISK_ORDER = { Low: 0, Moderate: 1, High: 2 };
  const SORT_GETTERS = {
    name:     p => p.name,
    category: p => p.category || "",
    risk:     p => RISK_ORDER[p.riskLevel] ?? -1,
    status:   p => p.status,
    storage:  p => projectStorageMB(p.id),
    lastEdit: p => p.lastEditAt || "",
  };
  const filtered = sortRows(projects.filter(matches), sort, SORT_GETTERS);
  const counts = {
    all: projects.length,
    draft: projects.filter(p=>p.status==="draft").length,
    active: projects.filter(p=>p.status==="active").length,
    archived: projects.filter(p=>p.status==="archived").length,
  };
  return (
    <div className="sec">
      <div className="sec-head">
        <span className="sec-title"><Icon n="layers" s={14}/> Projects <span className="badge">{projects.length}</span></span>
        <div className="sec-actions">
          <button className="btn primary sm" onClick={()=>nav.go({view:"project-new", entityId:entity.id})}>
            <Icon n="plus" s={12}/> New Project
          </button>
        </div>
      </div>
      <div style={{padding:"10px 16px",borderBottom:"1px solid var(--line)",display:"flex",gap:6,flexWrap:"wrap"}}>
        <button className={`chip ${filter==="all"?"active":""}`} onClick={()=>setFilter("all")}>All <span style={{fontFamily:"var(--mono)",opacity:.7,marginLeft:4}}>{counts.all}</span></button>
        {counts.draft>0 && <button className={`chip ${filter==="draft"?"active":""}`} onClick={()=>setFilter("draft")}>Drafts <span style={{fontFamily:"var(--mono)",opacity:.7,marginLeft:4}}>{counts.draft}</span></button>}
        {counts.active>0 && <button className={`chip ${filter==="active"?"active":""}`} onClick={()=>setFilter("active")}>Active <span style={{fontFamily:"var(--mono)",opacity:.7,marginLeft:4}}>{counts.active}</span></button>}
        {counts.archived>0 && <button className={`chip ${filter==="archived"?"active":""}`} onClick={()=>setFilter("archived")}>Archived <span style={{fontFamily:"var(--mono)",opacity:.7,marginLeft:4}}>{counts.archived}</span></button>}
      </div>
      <div className="sec-body flush">
        {filtered.length === 0 ? (
          <EmptyState icon="folder" title="No projects in this filter" sub="Try another filter, or create a new project."/>
        ) : (
          <table className="tbl" style={{borderRadius:0}}>
            <thead><tr>
              <SortTh label="Name" k="name" sort={sort} setSort={setSort}/>
              <SortTh label="Category" k="category" sort={sort} setSort={setSort}/>
              <SortTh label="Risk" k="risk" sort={sort} setSort={setSort}/>
              <SortTh label="Status" k="status" sort={sort} setSort={setSort}/>
              <th>Members</th>
              <SortTh label="Storage" k="storage" sort={sort} setSort={setSort} style={{textAlign:"right",width:90}}/>
              <SortTh label="Last activity" k="lastEdit" sort={sort} setSort={setSort}/>
              <th style={{textAlign:"right",width:90}}></th>
            </tr></thead>
            <tbody>
              {filtered.map(p => {
                /* Drafts open the editable form; everything else (active OR archived)
                   opens the workspace — archived renders there as hard-locked
                   view & download only, same as drill-in from the Archive screen */
                const target = p.status==="draft" ? "project-draft" : "project-structure";
                return (
                  <tr key={p.id} className="clickable" onClick={()=>nav.go({view:target, projectId:p.id})}>
                    <td>
                      <span style={{fontWeight:600}}>{p.name}</span>
                    </td>
                    <td>
                      <Tooltip text={CATEGORY_INFO[p.category]?.desc || "—"}>
                        {CATEGORY_INFO[p.category]?.label || `Category ${p.category}`}
                      </Tooltip>
                    </td>
                    <td><RiskBadge level={p.riskLevel}/></td>
                    <td><StatusBadge project={p}/></td>
                    <td>
                      {(() => {
                        const creator = userById(p.createdBy);
                        const others = p.members.filter(uid => uid !== p.createdBy);
                        return (
                          <div style={{display:"flex",alignItems:"center",gap:8}}>
                            {creator && (
                              <div
                                style={{display:"inline-flex",borderRadius:"50%",boxShadow:"0 0 0 2px var(--ink)"}}
                                title={`Creator: ${creator.name}`}>
                                <Avatar id={creator.id} name={creator.name} size="sm"/>
                              </div>
                            )}
                            {creator && others.length > 0 && (
                              <span style={{width:1,height:18,background:"var(--line)"}}/>
                            )}
                            {others.length > 0 && (
                              <div className="avatar-stack">
                                {others.slice(0,3).map(uid=>{const u=userById(uid);return <Avatar key={uid} id={uid} name={u.name} size="sm"/>;})}
                                {others.length > 3 && <span className="avatar sm" style={{background:"var(--ink)",color:"#fff",borderColor:"transparent"}}>+{others.length-3}</span>}
                              </div>
                            )}
                          </div>
                        );
                      })()}
                    </td>
                    <td style={{textAlign:"right"}}>
                      <span className="mono" style={{fontSize:11.5,color:"var(--muted)"}}>{fmtMB(projectStorageMB(p.id))}</span>
                    </td>
                    <td><span className="mono" style={{fontSize:11.5}}>{fmtTsShort(p.lastEditAt)}</span></td>
                    <td style={{textAlign:"right"}}>
                      <button className="btn sm ghost" onClick={(ev)=>{ev.stopPropagation();nav.go({view:target, projectId:p.id});}}>Open <Icon n="chev-r" s={11}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

/* Edit Entity modal — same 3 fields. Converted from drawer to modal to
   match the rest of the app's form pattern (Service Types, Company
   Categories, SOP Templates). */
const EditEntityModal = ({ entity, onClose, onSave }) => {
  const [name, setName] = React.useState(entity.name);
  const [taxId, setTaxId] = React.useState(entity.taxId);
  const [desc, setDesc] = React.useState(entity.desc);

  return (
    <div className="modal-veil" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{maxWidth:560, width:"94vw"}}>
        <div className="modal-head">
          <div style={{width:32,height:32,borderRadius:8,background:"var(--accent-soft)",color:"var(--accent-ink)",display:"grid",placeItems:"center"}}>
            <Icon n="edit-3" s={15}/>
          </div>
          <h3>Edit entity</h3>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Entity name <span className="req">*</span></label>
            <input type="text" value={name} onChange={e=>setName(e.target.value)} autoFocus/>
          </div>
          <div className="field">
            <label>Tax ID <span className="req">*</span></label>
            <input type="text" value={taxId} onChange={e=>setTaxId(e.target.value)}/>
            <div className="help">Changing this records a history entry.</div>
          </div>
          <div className="field" style={{marginBottom:0}}>
            <label>Description</label>
            <textarea value={desc} maxLength={ENTITY_DESC_MAX}
              onChange={e=>setDesc(e.target.value.slice(0, ENTITY_DESC_MAX))}/>
            <div className="help" style={{display:"flex",justifyContent:"space-between"}}>
              <span>Shown on the entity header — keep it to a line or two.</span>
              <span className="mono" style={{color: desc.length >= ENTITY_DESC_MAX ? "var(--danger-ink)" : "var(--muted)"}}>
                {desc.length}/{ENTITY_DESC_MAX}
              </span>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" onClick={()=>onSave({name,taxId,desc})}>
            <Icon n="check" s={13}/> Save changes
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { EntityList, EntityDetail, EditEntityModal });