/* global window React */
const { useState } = React;
const { I, ResultPill, DEMO_SUBMISSIONS, VALIDATION_CHECKS, REPORT_DATA, DEMO_PATHS, SAMPLE_TRIALS, TreeView } = window;

function RegPage({ title, subtitle, kicker, actions, children }) {
  return (
    <div className="rac-page">
      <div style={{display:"flex", alignItems:"flex-end", gap:24, marginBottom:24, flexWrap:"wrap"}}>
        <div style={{flex:1, minWidth:260}}>
          {kicker && <div style={{fontSize:12, fontWeight:700, color:"#5b3fd1", textTransform:"uppercase", letterSpacing:"0.08em", marginBottom:6}}>{kicker}</div>}
          <h1 style={{fontSize:24, fontWeight:700}}>{title}</h1>
          {subtitle && <p style={{fontSize:14, color:"var(--rac-muted)", marginTop:6, maxWidth:680}}>{subtitle}</p>}
        </div>
        {actions && <div className="rac-page__actions" style={{display:"flex", gap:10}}>{actions}</div>}
      </div>
      {children}
    </div>
  );
}

// ─── B1 - Submissions Dashboard ────────────────────────────────────────
function B1Dashboard({ user, onSelect }) {
  const [filter, setFilter] = useState("all");
  const filtered = filter === "all" ? DEMO_SUBMISSIONS
    : filter === "pending" ? DEMO_SUBMISSIONS.filter(s => s.status === "Pending Review")
    : DEMO_SUBMISSIONS.filter(s => s.status === "Approved" || s.status === "Rejected");
  const pendingCount = DEMO_SUBMISSIONS.filter(s => s.status === "Pending Review").length;

  return (
    <RegPage
      kicker={`USEPA · OPPTS Reviewer Console`}
      title="Submissions queue"
      subtitle={`${pendingCount} submissions pending your review. Drill into any row for file validation and assessment review.`}
    >
      <div className="rac-grid-3" style={{marginBottom:24}}>
        <StatTile label="Pending review" value="2" tone="info"/>
        <StatTile label="Approved (90d)" value="1" tone="pass"/>
        <StatTile label="Rejected (90d)" value="1" tone="fail"/>
      </div>

      <div className="rac-card">
        <div className="rac-card__head" style={{display:"flex", alignItems:"center", gap:8}}>
          <div>
            <div className="rac-card__title">All submissions</div>
            <div className="rac-card__sub">Group 15 - Cereal Grains</div>
          </div>
          <div style={{marginLeft:"auto", display:"flex", gap:8}}>
            {[["all","All"],["pending","Pending"],["closed","Closed"]].map(([k,l]) => (
              <button key={k} className={`rac-btn rac-btn--ghost rac-btn--sm`} onClick={() => setFilter(k)}
                style={filter === k ? {borderColor:"#5b3fd1", color:"#5b3fd1", background:"#f0ecfd"} : {}}>{l}</button>
            ))}
            <button className="rac-btn rac-btn--ghost rac-btn--sm"><I.Search size={13}/> Search</button>
          </div>
        </div>

        <table className="rac-table">
          <thead>
            <tr>
              <th>Submission</th><th>Company</th><th>Active substance</th><th>Submitted</th>
              <th style={{textAlign:"center"}}>Trial count</th>
              <th style={{textAlign:"center"}}>Distribution</th>
              <th style={{textAlign:"center"}}>Overall</th>
              <th>Status</th><th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(s => (
              <tr key={s.id} style={{cursor: s.scenario === "archive" ? "default" : "pointer"}}
                  onClick={() => s.scenario !== "archive" && onSelect(s.id)}>
                <td>
                  <div className="rac-mono" style={{fontSize:12.5, fontWeight:600, color:s.scenario === "archive" ? "var(--rac-muted)" : "var(--rac-primary)"}}>{s.id}</div>
                  <div style={{fontSize:11.5, color:"var(--rac-muted)"}}>{s.submissionType}</div>
                </td>
                <td>
                  <div style={{fontSize:13, fontWeight:500}}>{s.company}</div>
                  <div style={{fontSize:11, color:"var(--rac-muted)"}}>{s.contact}</div>
                </td>
                <td>{s.activeSubstance}</td>
                <td style={{color:"var(--rac-muted)", fontSize:12}}>{s.submittedAt}</td>
                <td style={{textAlign:"center"}}><ResultPill value={s.trialCount}/></td>
                <td style={{textAlign:"center"}}><ResultPill value={s.distribution}/></td>
                <td style={{textAlign:"center"}}><ResultPill value={s.overallResult}/></td>
                <td><ResultPill value={s.status}/></td>
                <td style={{textAlign:"right"}}>
                  {s.scenario !== "archive" && <button className="rac-btn rac-btn--ghost rac-btn--sm"><I.Eye size={12}/> Review</button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </RegPage>
  );
}

function StatTile({ label, value, tone }) {
  const colors = { info:"#5b3fd1", pass:"var(--rac-pass)", fail:"var(--rac-fail)" };
  return (
    <div className="rac-card" style={{padding:"18px 22px", borderLeft:`3px solid ${colors[tone]}`}}>
      <div style={{fontSize:11, color:"var(--rac-muted)", fontWeight:700, textTransform:"uppercase", letterSpacing:"0.08em"}}>{label}</div>
      <div style={{fontSize:32, fontWeight:700, fontFamily:"var(--font-display)", marginTop:6, color:"var(--rac-ink)"}}>{value}</div>
    </div>
  );
}

// ─── B2 - File Validation ──────────────────────────────────────────────
function B2FileValidation({ submissionId, onViewReport, onBack }) {
  const sub = DEMO_SUBMISSIONS.find(s => s.id === submissionId);
  if (!sub) return <RegPage title="Not found"><button onClick={onBack}>Back</button></RegPage>;
  const trials = SAMPLE_TRIALS[sub.scenario];

  return (
    <RegPage
      kicker={`Reviewing · ${sub.id}`}
      title="File validation"
      subtitle={`Automated checks on ${sub.demoFile} from ${sub.company}`}
      actions={[
        <button key="b" className="rac-btn rac-btn--ghost" onClick={onBack}><I.Back size={14}/> Back to queue</button>,
        <button key="v" className="rac-btn rac-btn--primary" onClick={onViewReport}>View assessment report <I.Forward size={14}/></button>,
      ]}
    >
      <div className="rac-banner rac-banner--pass" style={{marginBottom:18}}>
        <I.Check size={20}/>
        <div>
          <strong>All file validation checks passed</strong>
          <div style={{fontSize:13, marginTop:2}}>The file is structurally valid; assessment review will determine pass/fail.</div>
        </div>
      </div>

      <div className="rac-card" style={{marginBottom:18}}>
        <div className="rac-card__head"><div className="rac-card__title">Validation checks</div></div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)"}}>
          {VALIDATION_CHECKS.map((c, i) => {
            const cols = Math.min(VALIDATION_CHECKS.length, 4);
            const rowIndex = Math.floor(i / cols);
            const colInRow = i % cols;
            const rowItems = Math.min(cols, VALIDATION_CHECKS.length - rowIndex * cols);
            const isLastInRow = colInRow === rowItems - 1;
            const isLastRow = rowIndex === Math.ceil(VALIDATION_CHECKS.length / cols) - 1;
            return (
              <div key={c.id} style={{display:"flex", alignItems:"flex-start", gap:12, padding:"16px 18px", borderRight: isLastInRow ? "none" : "1px solid var(--rac-line)", borderBottom: isLastRow ? "none" : "1px solid var(--rac-line)"}}>
                <div style={{width:28, height:28, flex:"0 0 28px", borderRadius:"50%", background:"var(--rac-pass-bg)", color:"var(--rac-pass)", display:"grid", placeItems:"center"}}><I.Check size={15}/></div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{display:"flex", alignItems:"center", gap:8, marginBottom:4, flexWrap:"wrap"}}>
                    <div style={{fontSize:13.5, fontWeight:600, color:"var(--rac-ink)"}}>{c.label}</div>
                    <ResultPill value="PASS"/>
                  </div>
                  <div style={{fontSize:12, color:"var(--rac-muted)", lineHeight:1.45}}>{c.detail}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="rac-card">
        <div className="rac-card__head" style={{display:"flex", alignItems:"center"}}>
          <div>
            <div className="rac-card__title rac-mono" style={{fontSize:13.5}}>{sub.demoFile}</div>
            <div className="rac-card__sub">{trials.length} rows · 11 columns</div>
          </div>
          <button className="rac-btn rac-btn--ghost rac-btn--sm" style={{marginLeft:"auto"}}><I.Download size={12}/> Download</button>
        </div>
        <div style={{padding:0, maxHeight:480, overflowY:"auto", overflowX:"auto"}}>
          <table className="rac-table" style={{fontSize:12, whiteSpace:"nowrap"}}>
            <thead style={{position:"sticky", top:0}}>
              <tr>
                <th>trial_id</th><th>state</th><th>county</th><th>usepa_region</th>
                <th>crop</th><th>variety</th>
                <th style={{textAlign:"right"}}>application_rate_lb_ai_per_a</th>
                <th style={{textAlign:"right"}}>number_of_applications</th>
                <th style={{textAlign:"right"}}>phi_days</th>
                <th>harvest_date</th>
                <th style={{textAlign:"right"}}>residue_ppm</th>
              </tr>
            </thead>
            <tbody>
              {trials.map(t => (
                <tr key={t.id}>
                  <td className="rac-mono" style={{fontSize:11.5}}>{t.id}</td>
                  <td>{t.state}</td>
                  <td>{t.county}</td>
                  <td className="rac-mono">{t.region}</td>
                  <td style={{color:"var(--rac-muted)"}}>{t.crop}</td>
                  <td style={{color:"var(--rac-muted)"}}>{t.variety}</td>
                  <td className="rac-mono" style={{textAlign:"right"}}>{t.rate}</td>
                  <td className="rac-mono" style={{textAlign:"right"}}>{t.apps}</td>
                  <td className="rac-mono" style={{textAlign:"right"}}>{t.phi}</td>
                  <td className="rac-mono">{t.harvest}</td>
                  <td className="rac-mono" style={{textAlign:"right"}}>{t.residue}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </RegPage>
  );
}

// ─── B3 - Report Review ────────────────────────────────────────────────
function B3ReportReview({ submissionId, onBack, onBackToValidation }) {
  const sub = DEMO_SUBMISSIONS.find(s => s.id === submissionId);
  const [actionModal, setActionModal] = useState(null); // 'approve'|'request'|'reject'
  const [decided, setDecided] = useState(null);
  if (!sub) return <RegPage title="Not found"><button onClick={onBack}>Back</button></RegPage>;
  const data = REPORT_DATA[sub.scenario];
  const path = DEMO_PATHS[sub.scenario];
  const isPass = data.overallResult === "PASS";

  return (
    <RegPage
      kicker={`Reviewing · ${sub.id}`}
      title="Assessment report"
      subtitle={`${sub.company} · ${sub.activeSubstance} · ${sub.crop} (Group 15)`}
      actions={[
        <button key="b" className="rac-btn rac-btn--ghost" onClick={onBackToValidation}><I.Back size={14}/> File validation</button>,
        <button key="p" className="rac-btn rac-btn--ghost" onClick={() => window.print()}><I.Download size={14}/> Download PDF</button>,
        <button key="q" className="rac-btn rac-btn--ghost" onClick={onBack}>Queue</button>,
      ]}
    >
      {decided && (
        <div className={`rac-banner rac-banner--${decided === "approve" ? "pass" : decided === "reject" ? "fail" : "warn"}`} style={{marginBottom:18}}>
          <I.Check size={20}/>
          <div>
            <strong>Decision recorded: {decided === "approve" ? "Approved" : decided === "reject" ? "Rejected" : "Information requested from registrant"}</strong>
            <div style={{fontSize:13}}>The registrant has been notified. (Mock-up only - no real notification sent.)</div>
          </div>
        </div>
      )}

      <div className={`rac-banner rac-banner--${isPass ? "pass" : "fail"}`} style={{marginBottom:18}}>
        {isPass ? <I.Check size={20}/> : <I.X size={20}/>}
        <div style={{flex:1}}>
          <strong style={{fontSize:15}}>{isPass ? "Trial requirements met" : "Trial requirements NOT met"}</strong>
          <div style={{fontSize:13, marginTop:4}}>
            {isPass
              ? "All count and distribution thresholds satisfied at Individual Crop and Subgroup level."
              : sub.failingRule}
          </div>
        </div>
      </div>

      <div className="rac-grid-2" style={{alignItems:"start", marginBottom:18}}>
        <div className="rac-card">
          <div className="rac-card__head"><div className="rac-card__title">Submission metadata</div></div>
          <div className="rac-card__body" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, fontSize:13}}>
            <Meta label="Submission ID" value={sub.id}/>
            <Meta label="Reg. number" value={sub.regNumber}/>
            <Meta label="Company" value={sub.company}/>
            <Meta label="Contact" value={sub.contact}/>
            <Meta label="Submitted" value={sub.submittedAt}/>
            <Meta label="File" value={sub.demoFile} mono/>
          </div>
        </div>

        <div className="rac-card">
          <div className="rac-card__head"><div className="rac-card__title">Trial summary</div></div>
          <div className="rac-card__body" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, fontSize:13}}>
            <Meta label="Total trials" value={`${data.totalTrials}`}/>
            <Meta label="Regions covered" value={`${sub.regions} of 4 required`}/>
            <Meta label="Active substance" value={sub.activeSubstance}/>
            <Meta label="Crop" value={`${sub.crop} (Group 15)`}/>
          </div>
        </div>
      </div>

      <div className="rac-card" style={{marginBottom:18}}>
        <div className="rac-card__head"><div className="rac-card__title">Trial count assessment</div></div>
        <table className="rac-table">
          <thead><tr><th>Criterion</th><th style={{textAlign:"center"}}>Required</th><th style={{textAlign:"center"}}>Submitted</th><th style={{textAlign:"right"}}>Result</th></tr></thead>
          <tbody>
            {data.trialCounts.map((r,i) => (
              <tr key={i}>
                <td>
                  <div>{r.criterion}</div>
                  {r.note && <div style={{fontSize:11.5, color:"var(--rac-muted)", marginTop:2, lineHeight:1.45}}>{r.note}</div>}
                </td>
                <td style={{textAlign:"center"}} className="rac-mono">{r.required}</td>
                <td style={{textAlign:"center"}} className="rac-mono">{r.submitted}</td>
                <td style={{textAlign:"right"}}><ResultPill value={r.result}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="rac-card" style={{marginBottom:18}}>
        <div className="rac-card__head"><div className="rac-card__title">Geographic distribution</div></div>
        <table className="rac-table">
          <thead><tr><th>Region</th><th>States</th><th style={{textAlign:"center"}}>Trials</th><th style={{textAlign:"right"}}>Result</th></tr></thead>
          <tbody>
            {data.distribution.map((r,i) => (
              <tr key={i}>
                <td>Region {r.region} - {r.name}</td>
                <td className="rac-mono" style={{fontSize:11.5, color:"var(--rac-muted)"}}>{r.states}</td>
                <td style={{textAlign:"center"}} className="rac-mono">{r.present}</td>
                <td style={{textAlign:"right"}}><ResultPill value={r.result}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{marginBottom:18}}>
        <div style={{fontSize:14, fontWeight:700, marginBottom:10}}>Decision tree path</div>
        <TreeView selectedFile={sub.scenario}/>
      </div>

      {decided && (
        <div className={`rac-banner rac-banner--${decided === "approve" ? "pass" : decided === "reject" ? "fail" : "warn"}`} style={{marginBottom:18}}>
          <I.Check size={20}/>
          <div>
            <strong>Decision recorded: {decided === "approve" ? "Approved" : decided === "reject" ? "Rejected" : "Information requested from registrant"}</strong>
            <div style={{fontSize:13}}>The registrant has been notified. (Mock-up only - no real notification sent.)</div>
          </div>
        </div>
      )}

      {/* Regulator action bar */}
      <div className="rac-card" style={{position:"sticky", bottom:0, padding:"16px 20px", background:"#fff", display:"flex", alignItems:"center", gap:14, borderTop:`3px solid ${isPass ? "var(--rac-pass)" : "var(--rac-fail)"}`}}>
        <div style={{flex:1}}>
          <div style={{fontSize:13, fontWeight:600}}>Decision</div>
          <div style={{fontSize:12, color:"var(--rac-muted)"}}>Choose how to proceed with this submission.</div>
        </div>
        <button className="rac-btn rac-btn--ghost" onClick={() => setActionModal("request")}><I.MessageSquare size={14}/> Request information</button>
        <button className="rac-btn rac-btn--danger" onClick={() => setActionModal("reject")}><I.X size={14}/> Reject</button>
        <button className="rac-btn rac-btn--success" onClick={() => setActionModal("approve")} disabled={!isPass}><I.Check size={14}/> Approve</button>
      </div>

      {actionModal && (
        <window.Modal open onClose={() => setActionModal(null)}>
          <div style={{padding:"28px 28px 24px"}}>
            <h2 style={{fontSize:18, marginBottom:6}}>
              {actionModal === "approve" ? "Approve submission" : actionModal === "reject" ? "Reject submission" : "Request additional information"}
            </h2>
            <p style={{fontSize:13, color:"var(--rac-muted)", marginBottom:16}}>
              {actionModal === "approve" && `Confirm approval of ${sub.id}. The registrant will be notified.`}
              {actionModal === "reject" && `Reject ${sub.id}. Provide a brief rejection rationale that will be sent to the registrant.`}
              {actionModal === "request" && `Send a request to ${sub.company} for additional information or clarification.`}
            </p>
            {actionModal !== "approve" && (
              <textarea className="rac-textarea" placeholder={actionModal === "reject" ? "Rejection rationale…" : "What additional information do you need?"} defaultValue={actionModal === "reject" && sub.failingRule ? sub.failingRule : ""}/>
            )}
            <div style={{display:"flex", gap:10, justifyContent:"flex-end", marginTop:16}}>
              <button className="rac-btn rac-btn--ghost" onClick={() => setActionModal(null)}>Cancel</button>
              <button className={`rac-btn ${actionModal === "approve" ? "rac-btn--success" : actionModal === "reject" ? "rac-btn--danger" : "rac-btn--primary"}`} onClick={() => { setDecided(actionModal); setActionModal(null); }}>
                Confirm {actionModal === "approve" ? "approval" : actionModal === "reject" ? "rejection" : "request"}
              </button>
            </div>
          </div>
        </window.Modal>
      )}
    </RegPage>
  );
}

function Meta({ label, value, mono }) {
  return (
    <div>
      <div style={{fontSize:11, color:"var(--rac-muted)", textTransform:"uppercase", letterSpacing:"0.05em", fontWeight:700}}>{label}</div>
      <div className={mono ? "rac-mono" : ""} style={{fontSize:13.5, fontWeight:500, color:"var(--rac-ink)", marginTop:3}}>{value}</div>
    </div>
  );
}

Object.assign(window, { B1Dashboard, B2FileValidation, B3ReportReview });