// Asset Library — design system, Figma, design.md, brand assets
const AssetLibrary = ({ showToast }) => {
  const isMobile = useIsMobile();
  const [activeCat, setActiveCat] = React.useState("all");
  const [view, setView] = React.useState("grid");

  const assets = [
    { id: 1, name: "Acme Design System", v: "v4.2.1", type: "system", ext: "Tokens · Components", size: "12.4 MB", updated: "2d ago", icon: "package", desc: "Full token set, 240 components, dark + light themes.", tag: "Core" },
    { id: 2, name: "design.md — for AI agents", v: "v4.2.1", type: "agent", ext: "Markdown", size: "84 KB", updated: "2d ago", icon: "sparkles", desc: "Machine-readable spec. Drop into Cursor, Claude, or any AI coding agent.", tag: "AI-ready", featured: true },
    { id: 3, name: "Acme Master — Figma", v: "Library", type: "figma", ext: ".fig", size: "186 MB", updated: "5h ago", icon: "fig", desc: "Linked Figma library — components, variants, color styles.", tag: "Synced" },
    { id: 4, name: "Brand Guidelines 2026", v: "Q2", type: "brand", ext: "PDF", size: "42 MB", updated: "1w ago", icon: "doc", desc: "Logo usage, voice & tone, photography direction.", tag: "PDF" },
    { id: 5, name: "Iconography — Therapeutic", v: "v2.0", type: "system", ext: "SVG · 280 icons", size: "1.2 MB", updated: "3w ago", icon: "image", desc: "Pictograms for cardiology, oncology, neuro, immunology.", tag: "SVG" },
    { id: 6, name: "Veltrox photography library", v: "Live", type: "brand", ext: "JPG · 340 images", size: "2.1 GB", updated: "yesterday", icon: "image", desc: "Approved HCP and patient photography. Geo-tagged for use rights.", tag: "Rights-checked" },
    { id: 7, name: "@acme/ui — npm package", v: "4.2.1", type: "code", ext: "npm", size: "3.4 MB", updated: "2d ago", icon: "package", desc: "React component library. Tree-shakeable. Storybook included.", tag: "npm" },
    { id: 8, name: "Storybook — staging", v: "Live", type: "code", ext: "URL", size: "—", updated: "live", icon: "code", desc: "Interactive playground. SSO required.", tag: "External" },
    { id: 9, name: "Motion guidelines", v: "v1.3", type: "brand", ext: "MP4 · MD", size: "180 MB", updated: "2w ago", icon: "play", desc: "Easing curves, durations, reduced-motion fallbacks.", tag: "Video" },
  ];

  const cats = [
    { id: "all", label: "All", n: assets.length },
    { id: "system", label: "Design system", n: 3 },
    { id: "figma", label: "Figma files", n: 1 },
    { id: "agent", label: "AI agent specs", n: 1 },
    { id: "brand", label: "Brand & photography", n: 3 },
    { id: "code", label: "Code packages", n: 2 },
  ];

  const filtered = activeCat === "all" ? assets : assets.filter(a => a.type === activeCat);

  const handleDownload = (a) => showToast(`Downloading "${a.name}" (${a.size})`);

  return (
    <div style={{ padding: isMobile ? "20px 16px 60px" : "36px 36px 80px", maxWidth: 1500 }}>
      <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: isMobile ? "stretch" : "flex-end", gap: isMobile ? 16 : 0, marginBottom: isMobile ? 24 : 32 }}>
        <div>
          <div className="eyebrow">Asset Library</div>
          <h1 className="h-section" style={{ marginTop: 6 }}>Everything <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)" }}>on-brand</span>, in one place.</h1>
          <p style={{ color: "var(--muted)", maxWidth: 620, marginTop: 10, fontSize: 15 }}>
            Tokens, components, Figma libraries, AI agent specs, brand assets and code packages — versioned, governed, and ready to drop into your stack.
          </p>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-quiet"><Icon name="git" size={14}/> Sync changelog</button>
          <button className="btn btn-ghost"><Icon name="download" size={14}/> Bulk export</button>
        </div>
      </div>

      {/* Featured AI banner */}
      <div className="chamfer" style={{ background: "var(--ink)", color: "var(--bone)", padding: isMobile ? "22px 22px" : "28px 32px", marginBottom: 28, "--chamfer": "18px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr auto", gap: isMobile ? 18 : 32, alignItems: "center" }}>
        <div>
          <div className="eyebrow eyebrow-coral" style={{ marginBottom: 10 }}>● New · For AI coding agents</div>
          <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 500, letterSpacing: "-0.01em" }}>Drop <code style={{ fontFamily: "var(--font-mono)", color: "var(--accent)", background: "rgba(255,90,78,0.12)", padding: "1px 8px", borderRadius: 4 }}>design.md</code> into Cursor or Claude. Get on-brand code, instantly.</div>
          <p style={{ color: "var(--muted-2)", margin: "10px 0 0", fontSize: 14, maxWidth: 640 }}>
            A single Markdown file describing your tokens, components, voice, and regulatory guardrails — written for LLMs to reason over.
          </p>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <button className="btn btn-primary"><Icon name="download" size={13}/> Download design.md</button>
          <button className="btn btn-ghost-light"><Icon name="copy" size={13}/> Copy install URL</button>
        </div>
      </div>

      {/* Filters + view */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18, gap: 16, flexWrap: "wrap" }}>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {cats.map(c => (
            <button key={c.id} onClick={()=>setActiveCat(c.id)} style={{
              padding: "7px 14px", border: "1px solid", borderColor: activeCat===c.id ? "var(--ink)" : "var(--line)",
              background: activeCat===c.id ? "var(--ink)" : "var(--paper)", color: activeCat===c.id ? "var(--bone)" : "var(--ink)",
              borderRadius: 999, fontSize: 13, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8
            }}>
              {c.label} <span style={{ fontSize: 11, opacity: 0.6, fontFamily: "var(--font-mono)" }}>{c.n}</span>
            </button>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <button className="btn btn-quiet" style={{ padding: "7px 12px", fontSize: 12 }}><Icon name="filter" size={13}/> Filter</button>
          <div style={{ display: "flex", border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden" }}>
            <button onClick={()=>setView("grid")} style={{ padding: "7px 10px", background: view==="grid"?"var(--ink)":"var(--paper)", color: view==="grid"?"var(--bone)":"var(--ink)", border: "none", cursor: "pointer" }}>Grid</button>
            <button onClick={()=>setView("list")} style={{ padding: "7px 10px", background: view==="list"?"var(--ink)":"var(--paper)", color: view==="list"?"var(--bone)":"var(--ink)", border: "none", cursor: "pointer" }}>List</button>
          </div>
        </div>
      </div>

      {/* Grid */}
      {view === "grid" ? (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 18 }}>
          {filtered.map(a => (
            <div key={a.id} className="card chamfer-tr" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14, transition: "transform 0.15s, border-color 0.15s", cursor: "pointer", position: "relative" }}
              onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--ink)"; e.currentTarget.style.transform="translateY(-2px)"}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--line)"; e.currentTarget.style.transform="translateY(0)"}}>
              {a.featured && <span className="pill" style={{ position: "absolute", top: 14, right: 24, background: "var(--accent)", borderColor: "var(--accent)", color: "var(--ink)" }}>★ AI-ready</span>}
              <div style={{ width: 44, height: 44, borderRadius: 10, background: "var(--bone)", display: "grid", placeItems: "center" }}>
                <Icon name={a.icon} size={20}/>
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.01em" }}>{a.name}</div>
                <p style={{ fontSize: 13, color: "var(--muted)", margin: "4px 0 0", lineHeight: 1.45 }}>{a.desc}</p>
              </div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                <span className="pill">{a.v}</span>
                <span className="pill">{a.ext}</span>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "var(--muted)" }}>
                <span>{a.size} · {a.updated}</span>
                <button onClick={e=>{e.stopPropagation(); handleDownload(a)}} style={{ background: "transparent", border: "none", color: "var(--ink)", cursor: "pointer", display: "flex", alignItems: "center", gap: 6, fontWeight: 500, fontSize: 13 }}>
                  <Icon name="download" size={14}/> Get
                </button>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="card" style={{ overflow: "hidden" }}>
          <div className="tbl-scroll">
          <table className="tbl">
            <thead><tr><th>Name</th><th>Version</th><th>Format</th><th>Size</th><th>Updated</th><th></th></tr></thead>
            <tbody>
              {filtered.map(a => (
                <tr key={a.id}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bone)", display: "grid", placeItems: "center" }}><Icon name={a.icon} size={15}/></div>
                      <div><div style={{ fontWeight: 500 }}>{a.name}</div><div style={{ fontSize: 12, color: "var(--muted)" }}>{a.desc}</div></div>
                    </div>
                  </td>
                  <td><span className="pill">{a.v}</span></td>
                  <td style={{ color: "var(--muted)" }}>{a.ext}</td>
                  <td style={{ color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 12 }}>{a.size}</td>
                  <td style={{ color: "var(--muted)" }}>{a.updated}</td>
                  <td><button onClick={()=>handleDownload(a)} className="btn btn-quiet" style={{ padding: "6px 12px", fontSize: 12 }}><Icon name="download" size={12}/> Download</button></td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>
      )}
    </div>
  );
};

window.AssetLibrary = AssetLibrary;