const {useEffect,useMemo,useState}=React;
const {createClient}=supabase;
const sb=createClient(window.MRMS_CONFIG.SUPABASE_URL,window.MRMS_CONFIG.SUPABASE_PUBLISHABLE_KEY);

const STATUS={
  NEW:1,ASSIGNED:2,RFQ:3,QUOTATION:4,SENT_OPS:5,OPS_APPROVED:6,
  PO_PROCESSING:7,PO_ISSUED:8,COMPLETED:9,HOLD:10,CANCELLED:11,MODIFIED:12
};

const KPI_DEFS=[
 ["total_open","Total Open","open"],["new_count","New","new"],["assigned_count","Assigned","assigned"],
 ["rfq_count","RFQ","rfq"],["quotation_received_count","Quotation Received","quotation"],
 ["sent_ops_count","Sent to Ops","sent_ops"],["ops_approved_count","Ops Approved","ops_approved"],
 ["po_processing_count","PO Processing","po_processing"],["po_issued_count","PO Issued","po_issued"],
 ["completed_count","Completed","completed"],["on_hold_count","On Hold","hold"],["modified_review_count","Modified / Review","modified"]
];
const AGING_DEFS=[
 ["open_over_7","Open > 7 Days","age7"],["open_over_14","Open > 14 Days","age14"],
 ["open_over_30","Open > 30 Days","age30"],["unassigned_over_7","Unassigned > 7 Days","unassigned7"]
];

const todayISO=()=>new Date().toISOString().slice(0,10);
const nowISO=()=>new Date().toISOString();
const displayDate=v=>!v?"":new Date(String(v).length===10?v+"T00:00:00":v).toLocaleDateString("en-GB");
const num=v=>Number(v||0).toLocaleString();
const escExcel=v=>v==null?"":v;

function Brand(){
 return <div className="brand"><img src="./aec-logo.png" className="logo" alt="AEC"/><div><h1>AEC MR Management System</h1><small>Material Request Workflow & Status Portal</small></div></div>
}

function Login({onReady}){
 const [email,setEmail]=useState(""),[password,setPassword]=useState(""),[busy,setBusy]=useState(false),[error,setError]=useState("");
 async function submit(e){e.preventDefault();setBusy(true);setError("");const {data,error}=await sb.auth.signInWithPassword({email:email.trim(),password});if(error){setError(error.message);setBusy(false);return;}onReady(data.session);}
 return <div className="login-shell"><form className="login-card" onSubmit={submit}>
   <div className="login-brand"><img className="logo" src="./aec-logo.png" alt="AEC"/></div>
   <h1>AEC MRMS</h1><p className="lead">Material Request Management System</p>
   <div className="field"><label>Email</label><input type="email" required value={email} onChange={e=>setEmail(e.target.value)}/></div>
   <div className="field" style={{marginTop:12}}><label>Password</label><input type="password" required value={password} onChange={e=>setPassword(e.target.value)}/></div>
   <button className="btn btn-green" style={{width:"100%",marginTop:17}} disabled={busy}>{busy?"Signing in…":"Sign In"}</button>
   {error&&<div className="error">{error}</div>}
 </form></div>
}

function useLookups(){
 const [teams,setTeams]=useState([]),[members,setMembers]=useState([]),[statuses,setStatuses]=useState([]),[error,setError]=useState("");
 async function reload(){
   const [t,m,s]=await Promise.all([
     sb.from("teams").select("team_id,team_name").order("team_name"),
     sb.from("members").select("member_id,member_name,is_active,can_assign_mr,auth_user_id").eq("is_active",true).order("member_name"),
     sb.from("mr_status").select("status_id,status_name,sort_order").order("sort_order")
   ]);
   const e=t.error||m.error||s.error;if(e){setError(e.message);return false}
   setTeams(t.data||[]);setMembers(m.data||[]);setStatuses(s.data||[]);return true;
 }
 useEffect(()=>{reload()},[]);
 return {teams,members,statuses,error,reload};
}

function MRTable({rows,teams,members,statuses,onOpen,emptyText="No matching MRs found."}){
 const teamMap=useMemo(()=>new Map(teams.map(x=>[String(x.team_id),x.team_name])),[teams]);
 const memberMap=useMemo(()=>new Map(members.map(x=>[String(x.member_id),x.member_name])),[members]);
 const statusMap=useMemo(()=>new Map(statuses.map(x=>[String(x.status_id),x.status_name])),[statuses]);
 return <div className="table-wrap"><table><thead><tr>
  <th>MR No.</th><th>Approval</th><th>Age</th><th>Team</th><th>Assigned To</th><th>Status</th><th>Description</th><th>Assigned</th><th>PO</th><th>Completed</th>
 </tr></thead><tbody>{rows.map(r=>{
   const age=r.approval_date?Math.max(0,Math.floor((Date.now()-new Date(r.approval_date+"T00:00:00"))/86400000)):"";
   return <tr key={r.mr_id}>
    <td><button className="mr-link" onClick={()=>onOpen(r.mr_id)}>{r.mr_number}</button></td><td>{displayDate(r.approval_date)}</td><td>{age}</td>
    <td>{teamMap.get(String(r.team_id))||""}</td><td>{memberMap.get(String(r.assigned_to_member_id))||""}</td>
    <td>{statusMap.get(String(r.status_id))||""}</td><td className="desc">{r.mr_description||""}</td>
    <td>{displayDate(r.assigned_date)}</td><td>{r.po_number||""}</td><td>{displayDate(r.completion_date)}</td>
   </tr>})}</tbody></table>{!rows.length&&<div className="empty">{emptyText}</div>}</div>
}

function MRTracker({mrId,profile,lookups,onClose,onSaved}){
 const admin=!!profile.can_assign_mr;
 const {teams,members,statuses}=lookups;
 const [mr,setMr]=useState(null),[busy,setBusy]=useState(true),[error,setError]=useState(""),[message,setMessage]=useState("");
 useEffect(()=>{load()},[mrId]);
 async function load(){
  setBusy(true);setError("");const {data,error}=await sb.from("mr_master").select("*").eq("mr_id",mrId).maybeSingle();
  if(error){setError(error.message);setBusy(false);return}if(!data){setError("MR not found.");setBusy(false);return}
  setMr({...data,_original_assignee:data.assigned_to_member_id});setBusy(false);
 }
 const setF=(k,v)=>setMr(x=>({...x,[k]:v}));
 async function save(){
  setError("");setMessage("");if(!mr)return;
  let payload={
   team_id:mr.team_id?Number(mr.team_id):null,
   assigned_to_member_id:mr.assigned_to_member_id?Number(mr.assigned_to_member_id):null,
   status_id:mr.status_id?Number(mr.status_id):null,
   quotation_received:!!mr.quotation_received,
   quotation_received_date:mr.quotation_received?(mr.quotation_received_date||todayISO()):null,
   sent_for_ops_approval:!!mr.sent_for_ops_approval,
   sent_for_ops_approval_date:mr.sent_for_ops_approval?(mr.sent_for_ops_approval_date||todayISO()):null,
   ops_approved:!!mr.ops_approved,
   ops_approval_date:mr.ops_approved?(mr.ops_approval_date||todayISO()):null,
   po_number:(mr.po_number||"").trim()||null,
   po_date:mr.po_date||null,
   completion_date:mr.completion_date||null,
   remarks:mr.remarks||null,
   is_complete:!!mr.is_complete,
   is_on_hold:!!mr.is_on_hold,
   last_updated:nowISO()
  };
  if(admin&&String(mr._original_assignee??"")!==String(mr.assigned_to_member_id??""))payload.assigned_date=todayISO();

  // Preserve current MRMS workflow rules.
  if(payload.is_on_hold){payload.status_id=STATUS.HOLD;payload.is_complete=false;}
  else if(payload.is_complete||payload.po_number){payload.status_id=STATUS.COMPLETED;payload.is_complete=true;if(!payload.completion_date)payload.completion_date=todayISO();}
  else if(payload.ops_approved){payload.status_id=STATUS.OPS_APPROVED;}
  else if(payload.sent_for_ops_approval){payload.status_id=STATUS.SENT_OPS;}
  else if(payload.quotation_received){payload.status_id=STATUS.QUOTATION;}

  const {error}=await sb.from("mr_master").update(payload).eq("mr_id",mr.mr_id);
  if(error){setError(error.message);return}
  setMessage("MR saved successfully.");await onSaved();setTimeout(onClose,300);
 }
 if(busy)return <div className="card"><div className="empty">Loading MR…</div></div>;
 return <div className="card">
  <div className="form-section"><div className="page-title"><div><h2>MR Tracker</h2><p>MR information is read-only. Assignment changes are restricted by role.</p></div><button className="btn btn-soft" onClick={onClose}>Back</button></div>
   {error&&<div className="error">{error}</div>}{message&&<div className="success">{message}</div>}
   {mr&&<>
    <div className="form-title"><h3>MR Information</h3><span className="badge">Read Only</span></div>
    <div className="grid2 readonly">
     <div className="field"><label>MR Number</label><input value={mr.mr_number||""} readOnly/></div>
     <div className="field"><label>Approval Date</label><input value={mr.approval_date||""} readOnly/></div>
     <div className="field"><label>Requester</label><input value={mr.requester||""} readOnly/></div>
     <div className="field"><label>Department</label><input value={mr.department||""} readOnly/></div>
     <div className="field" style={{gridColumn:"1/-1"}}><label>MR Description</label><textarea value={mr.mr_description||""} readOnly/></div>
    </div>
   </>}
  </div>
  {mr&&<div className="form-section">
   <div className="form-title"><h3>Assignment & Workflow</h3></div>
   <div className="grid3">
    <div className="field"><label>Team</label><select disabled={!admin} value={mr.team_id||""} onChange={e=>setF("team_id",e.target.value)}><option value=""></option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>
    <div className="field"><label>Assigned To</label><select disabled={!admin} value={mr.assigned_to_member_id||""} onChange={e=>setF("assigned_to_member_id",e.target.value)}><option value=""></option>{members.map(x=><option key={x.member_id} value={x.member_id}>{x.member_name}</option>)}</select></div>
    <div className="field"><label>Status</label><select value={mr.status_id||""} onChange={e=>setF("status_id",e.target.value)}><option value=""></option>{statuses.map(x=><option key={x.status_id} value={x.status_id}>{x.status_name}</option>)}</select></div>

    <div className="field"><label>Quotation Received</label><select value={mr.quotation_received?"1":"0"} onChange={e=>setF("quotation_received",e.target.value==="1")}><option value="0">No</option><option value="1">Yes</option></select></div>
    <div className="field"><label>Quotation Date</label><input type="date" value={mr.quotation_received_date||""} onChange={e=>setF("quotation_received_date",e.target.value)}/></div>
    <div></div>
    <div className="field"><label>Sent for Ops Approval</label><select value={mr.sent_for_ops_approval?"1":"0"} onChange={e=>setF("sent_for_ops_approval",e.target.value==="1")}><option value="0">No</option><option value="1">Yes</option></select></div>
    <div className="field"><label>Sent to Ops Date</label><input type="date" value={mr.sent_for_ops_approval_date||""} onChange={e=>setF("sent_for_ops_approval_date",e.target.value)}/></div>
    <div></div>
    <div className="field"><label>Ops Approved</label><select value={mr.ops_approved?"1":"0"} onChange={e=>setF("ops_approved",e.target.value==="1")}><option value="0">No</option><option value="1">Yes</option></select></div>
    <div className="field"><label>Ops Approval Date</label><input type="date" value={mr.ops_approval_date||""} onChange={e=>setF("ops_approval_date",e.target.value)}/></div>
    <div></div>

    <div className="field"><label>PO Number</label><input value={mr.po_number||""} onChange={e=>setF("po_number",e.target.value)}/></div>
    <div className="field"><label>PO Date</label><input type="date" value={mr.po_date||""} onChange={e=>setF("po_date",e.target.value)}/></div>
    <div className="field"><label>Completion Date</label><input type="date" value={mr.completion_date||""} onChange={e=>setF("completion_date",e.target.value)}/></div>
   </div>
   <div className="checkbox-row">
    <label><input type="checkbox" checked={!!mr.is_complete} onChange={e=>{setF("is_complete",e.target.checked);if(e.target.checked)setF("is_on_hold",false)}}/> Complete</label>
    <label><input type="checkbox" checked={!!mr.is_on_hold} onChange={e=>{setF("is_on_hold",e.target.checked);if(e.target.checked)setF("is_complete",false)}}/> Hold</label>
   </div>
   <div className="field" style={{marginTop:13}}><label>Remarks</label><textarea value={mr.remarks||""} onChange={e=>setF("remarks",e.target.value)}/></div>
   <div className="actions"><button className="btn btn-soft" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={save}>Save & Close</button></div>
  </div>}
 </div>
}

function Dashboard({profile,lookups,onOpenMR,onNavigate,onNotify}){
 const admin=!!profile.can_assign_mr,{teams,members,statuses}=lookups;
 const [team,setTeam]=useState(""),[member,setMember]=useState(admin?"":String(profile.member_id));
 const [kpis,setKpis]=useState({}),[rows,setRows]=useState([]),[list,setList]=useState({code:"new",label:"New"}),[busy,setBusy]=useState(false),[error,setError]=useState("");
 const [search,setSearch]=useState("");
 const [localTeam,setLocalTeam]=useState("");
 useEffect(()=>{if(teams.length||members.length)refresh()},[team,member,teams.length,members.length]);
 useEffect(()=>{if(admin)checkNew()},[]);
 const filters=()=>({memberId:admin?(member?Number(member):null):Number(profile.member_id),teamId:admin?(team?Number(team):null):null});
 async function checkNew(){
  const {count}=await sb.from("mr_master").select("mr_id",{count:"exact",head:true}).is("team_id",null).is("assigned_to_member_id",null);
  if(count>0)onNotify(count);
 }
 async function refresh(){
  setBusy(true);setError("");const f=filters();
  const {data,error}=await sb.rpc("get_mr_dashboard_kpis",{p_member_id:f.memberId,p_team_id:f.teamId});
  if(error){setError(error.message);setBusy(false);return}
  setKpis(Array.isArray(data)?(data[0]||{}):(data||{}));await loadList(list.code,list.label,f.memberId,f.teamId);setBusy(false);
 }
 function applyCode(q,code){
  if(code==="open")return q.not("status_id","in","(9,11)");
  if(code==="new")return q.eq("status_id",1);if(code==="assigned")return q.eq("status_id",2);if(code==="rfq")return q.eq("status_id",3);
  if(code==="quotation")return q.eq("status_id",4);if(code==="sent_ops")return q.eq("status_id",5);if(code==="ops_approved")return q.eq("status_id",6);
  if(code==="po_processing")return q.eq("status_id",7);if(code==="po_issued")return q.eq("status_id",8);if(code==="completed")return q.eq("status_id",9);
  if(code==="hold")return q.eq("status_id",10);if(code==="modified")return q.eq("status_id",12);
  if(code==="age7")return q.not("status_id","in","(9,11)").lt("approval_date",new Date(Date.now()-7*86400000).toISOString().slice(0,10));
  if(code==="age14")return q.not("status_id","in","(9,11)").lt("approval_date",new Date(Date.now()-14*86400000).toISOString().slice(0,10));
  if(code==="age30")return q.not("status_id","in","(9,11)").lt("approval_date",new Date(Date.now()-30*86400000).toISOString().slice(0,10));
  if(code==="unassigned7")return q.is("assigned_to_member_id",null).not("status_id","in","(9,11)").lt("approval_date",new Date(Date.now()-7*86400000).toISOString().slice(0,10));
  return q;
 }
 async function loadList(code,label,forcedMember,forcedTeam){
  setList({code,label});setLocalTeam("");
  const f=filters(),mid=forcedMember!==undefined?forcedMember:f.memberId,tid=forcedTeam!==undefined?forcedTeam:f.teamId;
  let q=sb.from("mr_master").select("mr_id,mr_number,approval_date,team_id,assigned_to_member_id,status_id,mr_description,assigned_date,po_number,completion_date").order("approval_date",{ascending:false}).order("mr_id",{ascending:false}).limit(100);
  if(mid)q=q.eq("assigned_to_member_id",mid);if(tid)q=q.eq("team_id",tid);q=applyCode(q,code);
  const {data,error}=await q;if(error){setError(error.message);return}setRows(data||[]);
 }
 async function searchMR(){
  const v=search.trim();if(!v){setError("Enter an MR number.");return}
  const {data,error}=await sb.from("mr_master").select("mr_id").eq("mr_number",v).maybeSingle();
  if(error){setError(error.message);return}if(!data){setError("MR "+v+" was not found.");return}onOpenMR(data.mr_id);
 }
 const visibleRows=localTeam?rows.filter(r=>String(r.team_id)===String(localTeam)):rows;
 return <>
  <div className="card hero"><div className="hero-grid">
   <div><div className="eyebrow">MR MANAGEMENT DASHBOARD</div><h2>Welcome, {profile.member_name}</h2><p>{admin?"View the full workload or filter by Team and Member.":"Your assigned workload across Material and Service."}</p></div>
   <div>
    {admin&&<div className="filters" style={{marginBottom:10}}>
     <div className="compact-field"><label>Team</label><select value={team} onChange={e=>setTeam(e.target.value)}><option value="">ALL</option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>
     <div className="compact-field"><label>Member</label><select value={member} onChange={e=>setMember(e.target.value)}><option value="">ALL</option>{members.map(x=><option key={x.member_id} value={x.member_id}>{x.member_name}</option>)}</select></div>
     <button className="btn btn-soft" onClick={refresh}>Refresh</button>
    </div>}
    <div className="search-line"><input placeholder="Search exact MR number" value={search} onChange={e=>setSearch(e.target.value)} onKeyDown={e=>{if(e.key==="Enter")searchMR()}}/><button className="btn btn-primary" onClick={searchMR}>Search MR</button></div>
   </div>
  </div></div>
  {error&&<div className="error">{error}</div>}
  <div className="section-head"><h3>Current Workload</h3><span>{busy?"Refreshing…":"Live KPI data"}</span></div>
  <div className="kpis">{KPI_DEFS.map(([f,l,c])=><button className="kpi" key={f} onClick={()=>loadList(c,l)}><div className="kpi-label">{l}</div><div className="kpi-value">{num(kpis[f])}</div></button>)}</div>
  <div className="section-head"><h3>Aging / Attention Required</h3></div>
  <div className="kpis aging">{AGING_DEFS.map(([f,l,c])=><button className="kpi" key={f} onClick={()=>loadList(c,l)}><div className="kpi-label">{l}</div><div className="kpi-value">{num(kpis[f])}</div></button>)}</div>

  <div className="card panel">
   <div className="panel-head"><div><h3>{list.label} MRs</h3><div className="subtle">Latest 100 matching records</div></div>
    <div className="toolbar">
     {admin&&<div className="compact-field"><label>List Team</label><select value={localTeam} onChange={e=>setLocalTeam(e.target.value)}><option value="">ALL</option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>}
     <button className="btn btn-soft" onClick={()=>loadList(list.code,list.label)}>Refresh</button>
    </div>
   </div>
   <MRTable rows={visibleRows} teams={teams} members={members} statuses={statuses} onOpen={onOpenMR}/>
  </div>
 </>;
}

function MyMRs({profile,lookups,onOpenMR}){
 const {teams,members,statuses}=lookups,[rows,setRows]=useState([]),[status,setStatus]=useState(""),[team,setTeam]=useState(""),[search,setSearch]=useState(""),[error,setError]=useState("");
 useEffect(()=>{load()},[status,team]);
 async function load(){
  let q=sb.from("mr_master").select("mr_id,mr_number,approval_date,team_id,assigned_to_member_id,status_id,mr_description,assigned_date,po_number,completion_date").eq("assigned_to_member_id",profile.member_id).order("approval_date",{ascending:false}).limit(100);
  if(status)q=q.eq("status_id",status);if(team)q=q.eq("team_id",team);const {data,error}=await q;if(error){setError(error.message);return}setRows(data||[]);
 }
 const filtered=search?rows.filter(r=>String(r.mr_number).includes(search.trim())):rows;
 return <><div className="page-title"><div><h2>My MRs</h2><p>MRs currently assigned to {profile.member_name}.</p></div></div>{error&&<div className="error">{error}</div>}
  <div className="card panel"><div className="panel-head"><div className="toolbar">
   <div className="compact-field"><label>MR Number</label><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Filter"/></div>
   <div className="compact-field"><label>Team</label><select value={team} onChange={e=>setTeam(e.target.value)}><option value="">ALL</option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>
   <div className="compact-field"><label>Status</label><select value={status} onChange={e=>setStatus(e.target.value)}><option value="">ALL</option>{statuses.map(x=><option key={x.status_id} value={x.status_id}>{x.status_name}</option>)}</select></div>
  </div><button className="btn btn-soft" onClick={load}>Refresh</button></div>
  <MRTable rows={filtered} teams={teams} members={members} statuses={statuses} onOpen={onOpenMR}/></div></>;
}

function Assignment({profile,lookups,onOpenMR}){
 const {teams,members}=lookups,[queue,setQueue]=useState("unclassified"),[mr,setMr]=useState(null),[teamId,setTeamId]=useState(""),[memberId,setMemberId]=useState(""),[error,setError]=useState(""),[message,setMessage]=useState("");
 const admin=!!profile.can_assign_mr;
 useEffect(()=>{if(admin)loadNext()},[queue]);
 const teamByName=name=>teams.find(t=>String(t.team_name).toLowerCase()===name.toLowerCase());
 async function loadNext(){
  setError("");setMessage("");let q=sb.from("mr_master").select("*").is("assigned_to_member_id",null).order("approval_date",{ascending:true}).order("mr_id",{ascending:true}).limit(1);
  if(queue==="unclassified")q=q.is("team_id",null);
  if(queue==="material"){const t=teamByName("Material");if(t)q=q.eq("team_id",t.team_id);}
  if(queue==="service"){const t=teamByName("Service");if(t)q=q.eq("team_id",t.team_id);}
  const {data,error}=await q;if(error){setError(error.message);return}const r=(data||[])[0]||null;setMr(r);setTeamId(r?.team_id||"");setMemberId("");
 }
 async function assign(){
  if(!mr)return;if(!teamId){setError("Please select a Team.");return}if(!memberId){setError("Please select a Member.");return}
  const payload={team_id:Number(teamId),assigned_to_member_id:Number(memberId),assigned_date:todayISO(),status_id:mr.status_id===STATUS.NEW?STATUS.ASSIGNED:mr.status_id,last_updated:nowISO()};
  const {error}=await sb.from("mr_master").update(payload).eq("mr_id",mr.mr_id);if(error){setError(error.message);return}setMessage("MR assigned successfully.");setTimeout(loadNext,250);
 }
 async function next(){
  if(!mr)return;
  if(teamId&&String(teamId)!==String(mr.team_id??"")){const {error}=await sb.from("mr_master").update({team_id:Number(teamId),last_updated:nowISO()}).eq("mr_id",mr.mr_id);if(error){setError(error.message);return}}
  await loadNext();
 }
 if(!admin)return <div className="card form-section"><div className="warning">You do not have permission to assign MRs.</div></div>;
 return <><div className="page-title"><div><h2>MR Assignment</h2><p>Classify new MRs or assign team-classified MRs to a member.</p></div></div>
  <div className="queue-layout"><div className="card queue-card">
   <div className="toolbar" style={{marginBottom:15}}><div className="compact-field"><label>Assignment Queue</label><select value={queue} onChange={e=>setQueue(e.target.value)}><option value="unclassified">Unclassified</option><option value="material">Material - Member Pending</option><option value="service">Service - Member Pending</option></select></div></div>
   {error&&<div className="error">{error}</div>}{message&&<div className="success">{message}</div>}
   {!mr?<div className="empty">No MRs in this queue.</div>:<>
    <div className="queue-meta">
     <div className="detail-box"><label>MR Number</label><div><button className="mr-link" onClick={()=>onOpenMR(mr.mr_id)}>{mr.mr_number}</button></div></div>
     <div className="detail-box"><label>Approval Date</label><div>{displayDate(mr.approval_date)}</div></div>
     <div className="detail-box"><label>Requester</label><div>{mr.requester||""}</div></div>
     <div className="detail-box"><label>Department</label><div>{mr.department||""}</div></div>
     <div className="detail-box" style={{gridColumn:"1/-1"}}><label>Description</label><div>{mr.mr_description||""}</div></div>
    </div>
    <div className="grid2" style={{marginTop:15}}>
     <div className="field"><label>Team</label><select value={teamId} onChange={e=>setTeamId(e.target.value)}><option value="">Select Team</option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>
     <div className="field"><label>Assign To</label><select value={memberId} onChange={e=>setMemberId(e.target.value)}><option value="">Select Member</option>{members.map(x=><option key={x.member_id} value={x.member_id}>{x.member_name}</option>)}</select></div>
    </div>
    <div className="actions"><button className="btn btn-soft" onClick={next}>Next</button><button className="btn btn-green" onClick={assign}>Assign MR</button></div>
   </>}
  </div><div className="card queue-card"><h3>Queue Rules</h3><p className="subtle">Unclassified shows MRs with no Team and no Member. Material/Service queues show Team-classified MRs that still have no assigned member.</p><div className="warning">Next saves the Team if you selected/changed it, but does not assign a member.</div></div></div></>;
}

function ManualEntry({lookups,onOpenMR}){
 const {teams}=lookups,[form,setForm]=useState({mr_number:"",approval_date:todayISO(),requester:"",department:"",mr_description:"",team_id:"",remarks:""}),[error,setError]=useState(""),[message,setMessage]=useState("");
 const f=(k,v)=>setForm(x=>({...x,[k]:v}));
 async function save(closeAfter){
  setError("");setMessage("");
  if(!form.mr_number.trim()||!form.approval_date||!form.requester.trim()||!form.mr_description.trim()){setError("MR Number, Approval Date, Requester and Description are required.");return}
  const {data:dup,error:de}=await sb.from("mr_master").select("mr_id").eq("mr_number",form.mr_number.trim()).maybeSingle();if(de){setError(de.message);return}if(dup){setError("MR "+form.mr_number+" already exists.");return}
  const payload={mr_number:form.mr_number.trim(),approval_date:form.approval_date,requester:form.requester.trim(),department:form.department.trim()||null,mr_description:form.mr_description.trim(),team_id:form.team_id?Number(form.team_id):null,assigned_to_member_id:null,assigned_date:null,status_id:STATUS.NEW,quotation_received:false,sent_for_ops_approval:false,ops_approved:false,po_number:null,po_date:null,completion_date:null,remarks:form.remarks||null,import_source:"Manual Entry",is_complete:false,is_on_hold:false,last_updated:nowISO()};
  const {data,error}=await sb.from("mr_master").insert(payload).select("mr_id").single();if(error){setError(error.message);return}
  setMessage("MR added successfully.");if(closeAfter&&data)onOpenMR(data.mr_id);else setForm({mr_number:"",approval_date:todayISO(),requester:"",department:"",mr_description:"",team_id:"",remarks:""});
 }
 return <><div className="page-title"><div><h2>Add MR Manually</h2><p>For missed or historical approved MRs.</p></div></div><div className="card form-section">
  {error&&<div className="error">{error}</div>}{message&&<div className="success">{message}</div>}
  <div className="grid2">
   <div className="field"><label>MR Number *</label><input value={form.mr_number} onChange={e=>f("mr_number",e.target.value)}/></div>
   <div className="field"><label>Approval Date *</label><input type="date" value={form.approval_date} onChange={e=>f("approval_date",e.target.value)}/></div>
   <div className="field"><label>Requester *</label><input value={form.requester} onChange={e=>f("requester",e.target.value)}/></div>
   <div className="field"><label>Department</label><input value={form.department} onChange={e=>f("department",e.target.value)}/></div>
   <div className="field"><label>Team (Optional)</label><select value={form.team_id} onChange={e=>f("team_id",e.target.value)}><option value="">Unclassified</option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>
   <div></div>
   <div className="field" style={{gridColumn:"1/-1"}}><label>MR Description *</label><textarea value={form.mr_description} onChange={e=>f("mr_description",e.target.value)}/></div>
   <div className="field" style={{gridColumn:"1/-1"}}><label>Remarks</label><textarea value={form.remarks} onChange={e=>f("remarks",e.target.value)}/></div>
  </div>
  <div className="actions"><button className="btn btn-soft" onClick={()=>save(false)}>Save & New</button><button className="btn btn-green" onClick={()=>save(true)}>Save & Open</button></div>
 </div></>;
}

function Reports({profile,lookups,onOpenMR}){
 const {teams,members,statuses}=lookups,[team,setTeam]=useState(""),[member,setMember]=useState(""),[status,setStatus]=useState(""),[rows,setRows]=useState([]),[error,setError]=useState("");
 async function loadAll(){
  let q=sb.from("mr_master").select("mr_id,mr_number,approval_date,team_id,assigned_to_member_id,status_id,mr_description,assigned_date,po_number,po_date,completion_date,remarks").order("approval_date",{ascending:false});
  if(team)q=q.eq("team_id",team);if(member)q=q.eq("assigned_to_member_id",member);if(status)q=q.eq("status_id",status);
  if(!profile.can_assign_mr)q=q.eq("assigned_to_member_id",profile.member_id);
  const {data,error}=await q;if(error){setError(error.message);return}setRows(data||[]);
 }
 useEffect(()=>{loadAll()},[]);
 function exportExcel(){
  const teamMap=new Map(teams.map(x=>[String(x.team_id),x.team_name])),memberMap=new Map(members.map(x=>[String(x.member_id),x.member_name])),statusMap=new Map(statuses.map(x=>[String(x.status_id),x.status_name]));
  const data=rows.map(r=>({"MR Number":escExcel(r.mr_number),"Approval Date":r.approval_date||"","Team":teamMap.get(String(r.team_id))||"","Assigned To":memberMap.get(String(r.assigned_to_member_id))||"","Status":statusMap.get(String(r.status_id))||"","MR Description":r.mr_description||"","Assigned Date":r.assigned_date||"","PO Number":r.po_number||"","PO Date":r.po_date||"","Completion Date":r.completion_date||"","Remarks":r.remarks||""}));
  const ws=XLSX.utils.json_to_sheet(data),wb=XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb,ws,"MR Dataset");XLSX.writeFile(wb,"AEC_MRMS_Export.xlsx");
 }
 return <><div className="page-title"><div><h2>Reports / Export</h2><p>Filter the MR dataset and export all matching rows to Excel.</p></div></div>{error&&<div className="error">{error}</div>}
  <div className="card panel"><div className="panel-head"><div className="toolbar">
   <div className="compact-field"><label>Team</label><select value={team} onChange={e=>setTeam(e.target.value)}><option value="">ALL</option>{teams.map(x=><option key={x.team_id} value={x.team_id}>{x.team_name}</option>)}</select></div>
   {profile.can_assign_mr&&<div className="compact-field"><label>Member</label><select value={member} onChange={e=>setMember(e.target.value)}><option value="">ALL</option>{members.map(x=><option key={x.member_id} value={x.member_id}>{x.member_name}</option>)}</select></div>}
   <div className="compact-field"><label>Status</label><select value={status} onChange={e=>setStatus(e.target.value)}><option value="">ALL</option>{statuses.map(x=><option key={x.status_id} value={x.status_id}>{x.status_name}</option>)}</select></div>
   <button className="btn btn-soft" onClick={loadAll}>Apply</button>
  </div><div className="btn-row"><span className="badge">{rows.length} records</span><button className="btn btn-green" onClick={exportExcel}>Export All to Excel</button></div></div>
  <MRTable rows={rows.slice(0,100)} teams={teams} members={members} statuses={statuses} onOpen={onOpenMR}/></div></>;
}

function AppShell({profile,onLogout}){
 const lookups=useLookups(),[page,setPage]=useState("dashboard"),[trackerId,setTrackerId]=useState(null),[newCount,setNewCount]=useState(0),[showNewModal,setShowNewModal]=useState(false);
 const admin=!!profile.can_assign_mr;
 async function refreshAfterSave(){await lookups.reload()}
 function openMR(id){setTrackerId(id)}
 function closeTracker(){setTrackerId(null)}
 function notifyNew(count){setNewCount(count);setShowNewModal(true)}
 const nav=[["dashboard","⌂","Dashboard"],["my","▣","My MRs"],["assignment","⇄","MR Assignment"],["manual","✎","Manual MR Entry"],["reports","⇩","Reports / Export"]];
 return <>
  <header className="topbar"><div className="topbar-inner"><Brand/><div className="top-actions"><span className="pill">Live</span><div className="userbox"><strong>{profile.member_name}</strong><small>{admin?"Assignment Admin":"Member"}</small></div><button className="btn btn-soft" onClick={onLogout}>Logout</button></div></div></header>
  <div className="shell"><aside className="sidebar"><div className="nav-title">MRMS</div>{nav.map(([id,ic,label])=>{if(id==="assignment"&&!admin)return null;return <button key={id} className={"nav-btn "+(page===id&&!trackerId?"active":"")} onClick={()=>{setTrackerId(null);setPage(id)}}><span className="nav-icon">{ic}</span><span>{label}</span></button>})}</aside>
   <main className="content">
    {lookups.error&&<div className="error">{lookups.error}</div>}
    {trackerId?<MRTracker mrId={trackerId} profile={profile} lookups={lookups} onClose={closeTracker} onSaved={refreshAfterSave}/>:
      page==="dashboard"?<Dashboard profile={profile} lookups={lookups} onOpenMR={openMR} onNavigate={setPage} onNotify={notifyNew}/>:
      page==="my"?<MyMRs profile={profile} lookups={lookups} onOpenMR={openMR}/>:
      page==="assignment"?<Assignment profile={profile} lookups={lookups} onOpenMR={openMR}/>:
      page==="manual"?<ManualEntry lookups={lookups} onOpenMR={openMR}/>:
      <Reports profile={profile} lookups={lookups} onOpenMR={openMR}/>
    }
   </main>
  </div>
  {showNewModal&&admin&&<div className="modal-backdrop"><div className="modal"><h3>NEW MR AVAILABLE</h3><p><strong>{newCount}</strong> MR(s) currently have no Team and no assigned member.</p><div className="actions"><button className="btn btn-soft" onClick={()=>setShowNewModal(false)}>Not Now</button><button className="btn btn-green" onClick={()=>{setShowNewModal(false);setTrackerId(null);setPage("assignment")}}>Open Assignment</button></div></div></div>}
 </>;
}

function App(){
 const [session,setSession]=useState(null),[profile,setProfile]=useState(null),[loading,setLoading]=useState(true),[fatal,setFatal]=useState("");
 useEffect(()=>{
  sb.auth.getSession().then(({data})=>{if(data.session)establish(data.session);else setLoading(false)});
  const {data:l}=sb.auth.onAuthStateChange((_e,s)=>{if(!s){setSession(null);setProfile(null);setLoading(false)}});return()=>l.subscription.unsubscribe();
 },[]);
 async function establish(s){
  setLoading(true);setFatal("");setSession(s);
  const {data,error}=await sb.from("members").select("member_id,member_name,can_assign_mr,is_active,auth_user_id").eq("auth_user_id",s.user.id).eq("is_active",true).maybeSingle();
  if(error){setFatal(error.message);setLoading(false);return}if(!data){setFatal("Your Supabase login is valid, but it is not linked to an active MRMS member.");setLoading(false);return}setProfile(data);setLoading(false);
 }
 async function logout(){await sb.auth.signOut();setSession(null);setProfile(null)}
 if(loading)return <div className="login-shell"><div className="login-card">Loading MRMS…</div></div>;
 if(fatal)return <div className="login-shell"><div className="login-card"><h2>Account Setup Required</h2><div className="error">{fatal}</div><button className="btn btn-soft" onClick={()=>sb.auth.signOut()}>Back to Login</button></div></div>;
 if(!session||!profile)return <Login onReady={establish}/>;
 return <AppShell profile={profile} onLogout={logout}/>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);