// ============================================
// Reliq — Apps
// ============================================

const APPS_DATA = [
  { id:"app_roamly", name:"Roamly", letters:"R", grad:"linear-gradient(135deg,#5B9DFF,#A78BFA)",
    bundle:"com.roamly.app", platforms:["play","app"],
    connectedRepo:"github.com/zolalena/roamly", repoType:"github",
    latestScore:78, latestVerdict:"needs_fixes", lastScan:"22 May 2026",
    buildsScanned:4, primaryRisk:"Privacy",
    category:"Travel", latestVersion:"1.4.0", latestScanId:"scn_2k8x" },
  { id:"app_quickinvoice", name:"QuickInvoice", letters:"Q", grad:"linear-gradient(135deg,#F59E0B,#EF4444)",
    bundle:"com.quickinvoice.android", platforms:["play"],
    connectedRepo:"github.com/zolalena/quickinvoice", repoType:"github",
    latestScore:41, latestVerdict:"will_reject", lastScan:"22 May 2026",
    buildsScanned:2, primaryRisk:"Security",
    category:"Finance", latestVersion:"2.1.3", latestScanId:"scn_2k8w" },
  { id:"app_moodboard", name:"MoodBoard AI", letters:"M", grad:"linear-gradient(135deg,#A78BFA,#EF4444)",
    bundle:"com.moodboard.ai", platforms:["play","app"],
    connectedRepo:"github.com/zolalena/moodboard", repoType:"github",
    latestScore:64, latestVerdict:"needs_fixes", lastScan:"22 May 2026",
    buildsScanned:3, primaryRisk:"Permissions",
    category:"Social", latestVersion:"0.9.2", latestScanId:"scn_2k8v" },
  { id:"app_tidalflow", name:"TidalFlow", letters:"T", grad:"linear-gradient(135deg,#00D4AA,#5B9DFF)",
    bundle:"com.tidalflow.app", platforms:["app"],
    connectedRepo:null, repoType:null,
    latestScore:88, latestVerdict:"pass", lastScan:"21 May 2026",
    buildsScanned:6, primaryRisk:"None",
    category:"Health & Fitness", latestVersion:"3.0.1", latestScanId:"scn_2k8u" },
  { id:"app_pocketcoach", name:"Pocket Coach", letters:"P", grad:"linear-gradient(135deg,#5B9DFF,#00D4AA)",
    bundle:"com.pocket.coach", platforms:["play","app"],
    connectedRepo:null, repoType:null,
    latestScore:76, latestVerdict:"likely_pass", lastScan:"21 May 2026",
    buildsScanned:1, primaryRisk:"Privacy Manifest",
    category:"Health & Fitness", latestVersion:"1.0.0", latestScanId:"scn_2k8t" },
  { id:"app_brewline", name:"Brewline", letters:"B", grad:"linear-gradient(135deg,#F59E0B,#A78BFA)",
    bundle:"com.brewline.app", platforms:["play"],
    connectedRepo:"bitrise.io/app/brewline", repoType:"cpu",
    latestScore:95, latestVerdict:"pass", lastScan:"20 May 2026",
    buildsScanned:8, primaryRisk:"None",
    category:"Lifestyle", latestVersion:"4.2.1", latestScanId:"scn_2k8s" },
];

const AppsPage = ({ go }) => {
  const [view, setView]             = React.useState("list");
  const [search, setSearch]         = React.useState("");
  const [filterPlatform, setFilterPlatform] = React.useState("all");
  const [filterVerdict, setFilterVerdict]   = React.useState("all");
  const [sortKey, setSortKey]       = React.useState("name");
  const [sortDir, setSortDir]       = React.useState("asc");

  const cycleSort = (key) => {
    if (sortKey === key) setSortDir(d => d === "asc" ? "desc" : "asc");
    else { setSortKey(key); setSortDir(key === "latestScore" ? "desc" : "asc"); }
  };
  const SI = ({ col }) => sortKey !== col
    ? <span style={{color:"var(--fg-3)",marginLeft:3,fontSize:10}}>↕</span>
    : <span style={{color:"var(--teal)",marginLeft:3,fontSize:10}}>{sortDir==="asc"?"↑":"↓"}</span>;

  const filtered = APPS_DATA.filter(a => {
    if (search && !a.name.toLowerCase().includes(search.toLowerCase()) &&
        !a.bundle.toLowerCase().includes(search.toLowerCase())) return false;
    if (filterPlatform !== "all" && !a.platforms.includes(filterPlatform)) return false;
    if (filterVerdict !== "all" && a.latestVerdict !== filterVerdict) return false;
    return true;
  }).sort((a, b) => {
    let av, bv;
    if (sortKey === "latestScore") { av = a.latestScore; bv = b.latestScore; }
    else if (sortKey === "lastScan") { av = a.lastScan; bv = b.lastScan; }
    else { av = a.name.toLowerCase(); bv = b.name.toLowerCase(); }
    if (av < bv) return sortDir === "asc" ? -1 : 1;
    if (av > bv) return sortDir === "asc" ? 1 : -1;
    return 0;
  });

  const hasFilters = search || filterPlatform !== "all" || filterVerdict !== "all";

  const riskColor = r => r === "None" ? "var(--teal)" : r.includes("Security") ? "var(--red)" : "var(--amber)";

  return (
    <AuthLayout
      route="apps"
      go={go}
      crumbs={["Workspace", "Apps"]}
      actions={
        <button className="btn btn-primary btn-sm" onClick={() => go("/scan/new")}>
          <Icon name="plus" size={13} /> Scan new build
        </button>
      }
    >
          <div className="page-head">
            <div>
              <h1 className="page-title">Apps</h1>
              <p className="page-sub">{APPS_DATA.length} apps · {APPS_DATA.filter(a=>a.latestVerdict==="will_reject").length} blocked · {APPS_DATA.filter(a=>a.latestVerdict==="pass").length} passing</p>
            </div>
            <div style={{display:"flex", gap:8}}>
              <div style={{background:"var(--bg-1)", border:"1px solid var(--line-2)", borderRadius:"var(--r-sm)", display:"flex", overflow:"hidden"}}>
                <button className={`btn btn-sm btn-ghost ${view==="list"?"active":""}`} style={{borderRadius:0, borderRight:"1px solid var(--line-2)", background:view==="list"?"var(--bg-3)":"transparent"}}
                  onClick={() => setView("list")}><Icon name="list-view" size={13} /></button>
                <button className={`btn btn-sm btn-ghost ${view==="grid"?"active":""}`} style={{borderRadius:0, background:view==="grid"?"var(--bg-3)":"transparent"}}
                  onClick={() => setView("grid")}><Icon name="grid" size={13} /></button>
              </div>
            </div>
          </div>

          {/* Filter bar */}
          <div style={{display:"flex", gap:8, marginBottom:20, flexWrap:"wrap", alignItems:"center"}}>
            <div style={{position:"relative", flex:"1 1 200px", minWidth:160}}>
              <Icon name="search" size={14} style={{position:"absolute", left:10, top:"50%", transform:"translateY(-50%)", color:"var(--fg-3)", pointerEvents:"none"}} />
              <input
                value={search} onChange={e => setSearch(e.target.value)}
                placeholder="Search apps or bundle IDs…"
                style={{width:"100%", height:34, boxSizing:"border-box",
                  background:"var(--bg-1)", border:"1px solid var(--line-2)", borderRadius:"var(--r-sm)",
                  padding:"0 12px 0 34px", fontSize:13, color:"var(--fg-0)", outline:"none"}}
              />
            </div>
            {[
              { val: filterPlatform, set: setFilterPlatform, opts: [{v:"all",l:"All platforms"},{v:"play",l:"Google Play"},{v:"app",l:"App Store"}] },
              { val: filterVerdict,  set: setFilterVerdict,  opts: [{v:"all",l:"All verdicts"},{v:"pass",l:"Pass"},{v:"likely_pass",l:"Likely Pass"},{v:"needs_fixes",l:"Needs Fixes"},{v:"will_reject",l:"Will Reject"}] },
            ].map((f, i) => (
              <select key={i} value={f.val} onChange={e => f.set(e.target.value)} style={{
                background:"var(--bg-1)", border:"1px solid var(--line-2)", borderRadius:"var(--r-sm)",
                padding:"0 10px", height:34, fontSize:13, color:"var(--fg-0)", outline:"none", cursor:"pointer",
              }}>
                {f.opts.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
              </select>
            ))}
            {hasFilters && (
              <button className="btn btn-sm btn-ghost" onClick={() => { setSearch(""); setFilterPlatform("all"); setFilterVerdict("all"); }}>
                <Icon name="x" size={12} /> Clear
              </button>
            )}
          </div>

          {view === "list" ? (
            <div className="card">
              <div className="tbl-scroll">
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{cursor:"pointer",userSelect:"none"}} onClick={() => cycleSort("name")}>App <SI col="name" /></th>
                    <th>Platforms</th>
                    <th>Connected source</th>
                    <th style={{textAlign:"right",cursor:"pointer",userSelect:"none"}} onClick={() => cycleSort("latestScore")}>Score <SI col="latestScore" /></th>
                    <th>Verdict</th>
                    <th style={{cursor:"pointer",userSelect:"none"}} onClick={() => cycleSort("lastScan")}>Last scan <SI col="lastScan" /></th>
                    <th style={{textAlign:"center"}}>Builds</th>
                    <th>Primary risk</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.length === 0 && (
                    <tr><td colSpan={9} style={{textAlign:"center", padding:"48px 20px", color:"var(--fg-3)"}}>
                      <Icon name="search" size={20} />
                      <div style={{marginTop:10, fontSize:14, fontWeight:500, color:"var(--fg-2)"}}>No apps match</div>
                      <div style={{fontSize:12, marginTop:4}}>Try adjusting your search or filters.</div>
                    </td></tr>
                  )}
                  {filtered.map(a => (
                    <tr key={a.id} onClick={() => go("/scan/" + a.latestScanId)}>
                      <td>
                        <div style={{display:"flex", alignItems:"center", gap:12}}>
                          <AppIcon letters={a.letters} size={36} gradient={a.grad} />
                          <div>
                            <div style={{fontWeight:500, fontSize:13.5}}>{a.name}</div>
                            <div className="mono" style={{fontSize:11, color:"var(--fg-3)"}}>{a.bundle}</div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div style={{display:"flex", gap:5}}>
                          {a.platforms.map(p => <StoreChip key={p} store={p} iconOnly={true} />)}
                        </div>
                      </td>
                      <td>
                        {a.connectedRepo ? (
                          <div style={{display:"flex", alignItems:"center", gap:8}}>
                            <Icon name={a.repoType||"github"} size={13} style={{color:"var(--fg-3)"}} />
                            <span className="mono" style={{fontSize:11.5, color:"var(--fg-2)"}}>{a.connectedRepo}</span>
                          </div>
                        ) : (
                          <span style={{fontSize:12, color:"var(--fg-3)"}}>Not connected</span>
                        )}
                      </td>
                      <td style={{textAlign:"right"}}>
                        <span className="mono" style={{fontSize:15, fontWeight:600,
                          color:a.latestScore>=85?"var(--teal)":a.latestScore>=60?"var(--amber)":"var(--red)"}}>
                          {a.latestScore}
                        </span>
                        <span className="mono" style={{color:"var(--fg-3)", fontSize:11}}>/100</span>
                      </td>
                      <td><VerdictPill verdict={a.latestVerdict} /></td>
                      <td className="mono" style={{fontSize:12, color:"var(--fg-2)", whiteSpace:"nowrap"}}>{a.lastScan}</td>
                      <td style={{textAlign:"center"}}>
                        <span style={{fontFamily:"var(--font-mono)", fontSize:12, color:"var(--fg-1)", background:"var(--bg-3)", border:"1px solid var(--line-2)", borderRadius:4, padding:"2px 8px"}}>{a.buildsScanned}</span>
                      </td>
                      <td>
                        <span style={{fontSize:12.5, color:riskColor(a.primaryRisk)}}>{a.primaryRisk}</span>
                      </td>
                      <td>
                        <button className="btn btn-sm btn-ghost" title="Open latest scan" onClick={e => { e.stopPropagation(); go("/scan/" + a.latestScanId); }}>
                          <Icon name="external-link" size={13} />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              </div>
            </div>
          ) : (
            <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))", gap:14}}>
              {filtered.map(a => {
                const scoreColor = a.latestScore>=85?"var(--teal)":a.latestScore>=60?"var(--amber)":"var(--red)";
                return (
                  <div key={a.id} className="card" style={{cursor:"pointer", transition:"border-color .12s"}}
                       onClick={() => go("/scan/" + a.latestScanId)}
                       onMouseEnter={e => e.currentTarget.style.borderColor="var(--line-3)"}
                       onMouseLeave={e => e.currentTarget.style.borderColor="var(--line-1)"}>
                    <div className="card-body">
                      <div style={{display:"flex", alignItems:"flex-start", gap:14, marginBottom:16}}>
                        <AppIcon letters={a.letters} size={44} gradient={a.grad} />
                        <div style={{flex:1, minWidth:0}}>
                          <div style={{fontWeight:600, fontSize:15, letterSpacing:"-0.005em"}}>{a.name}</div>
                          <div className="mono" style={{fontSize:11, color:"var(--fg-3)", marginTop:2, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{a.bundle}</div>
                          <div style={{display:"flex", gap:5, marginTop:8}}>
                            {a.platforms.map(p => <StoreChip key={p} store={p} />)}
                          </div>
                        </div>
                        <div style={{textAlign:"center"}}>
                          <div style={{fontFamily:"var(--font-pixel-square)", fontSize:28, color:scoreColor, lineHeight:1}}>{a.latestScore}</div>
                          <div className="mono" style={{fontSize:10, color:"var(--fg-3)", marginTop:2}}>/100</div>
                        </div>
                      </div>

                      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, borderTop:"1px solid var(--line-1)", paddingTop:14}}>
                        <div>
                          <div className="mono" style={{fontSize:10, color:"var(--fg-3)", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:4}}>Verdict</div>
                          <VerdictPill verdict={a.latestVerdict} />
                        </div>
                        <div>
                          <div className="mono" style={{fontSize:10, color:"var(--fg-3)", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:4}}>Primary risk</div>
                          <span style={{fontSize:13, color:riskColor(a.primaryRisk)}}>{a.primaryRisk}</span>
                        </div>
                        <div>
                          <div className="mono" style={{fontSize:10, color:"var(--fg-3)", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:4}}>Last scan</div>
                          <span style={{fontSize:12.5, color:"var(--fg-2)"}}>{a.lastScan}</span>
                        </div>
                        <div>
                          <div className="mono" style={{fontSize:10, color:"var(--fg-3)", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:4}}>Builds</div>
                          <span style={{fontSize:12.5, color:"var(--fg-2)"}}>{a.buildsScanned} scanned</span>
                        </div>
                      </div>

                      {a.connectedRepo && (
                        <div style={{display:"flex", alignItems:"center", gap:8, marginTop:12, padding:"8px 10px", background:"var(--bg-2)", border:"1px solid var(--line-1)", borderRadius:"var(--r-sm)"}}>
                          <Icon name={a.repoType||"github"} size={13} style={{color:"var(--fg-3)"}} />
                          <span className="mono" style={{fontSize:11, color:"var(--fg-2)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{a.connectedRepo}</span>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
    </AuthLayout>
  );
};

Object.assign(window, { AppsPage });