// Documents — coffre-fort de pièces (mobile). window.OryzeApp.DocumentsScreen
(function () {
  const { Card, Tag, Button, IconButton } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;
  const TYPES = window.OryzeDocTypes;

  function DocumentsScreen() {
    const ALL = window.OryzeDocuments;
    const [type, setType] = React.useState("all");
    const [q, setQ] = React.useState("");
    const list = ALL
      .filter((d) => (type === "all" ? true : d.type === type))
      .filter((d) => d.name.toLowerCase().includes(q.toLowerCase()) || d.id.toLowerCase().includes(q.toLowerCase()));
    const counts = {}; ALL.forEach((d) => { counts[d.type] = (counts[d.type] || 0) + 1; });

    return (
      <div style={{ padding: "16px 16px 24px", display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em" }}>Documents</div>
          <Button size="sm" iconLeft={<Ic.plus size={15} />}>Importer</Button>
        </div>

        {/* Search */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 42, background: "var(--surface-card)", border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-md)" }}>
          <Ic.search size={18} style={{ color: "var(--text-subtle)" }} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher une pièce…"
            style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-strong)", minWidth: 0 }} />
        </div>

        {/* Type counts */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {Object.keys(TYPES).map((k) => {
            const TIcon = Ic[TYPES[k].icon] || Ic.folder;
            const on = type === k;
            return (
              <Card key={k} variant="flat" interactive padding="12px" onClick={() => setType(on ? "all" : k)}
                style={{ display: "flex", alignItems: "center", gap: 10, ...(on ? { borderColor: "var(--oryze-majorelle)", boxShadow: "var(--shadow-xs)" } : {}) }}>
                <span style={{ width: 34, height: 34, flex: "none", borderRadius: "var(--radius-sm)", background: TYPES[k].color, border: "var(--border-thin) solid var(--line-keyline)", display: "flex", alignItems: "center", justifyContent: "center" }}><TIcon size={17} /></span>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 17, fontWeight: 600, lineHeight: 1 }}>{counts[k] || 0}</div>
                  <div style={{ fontSize: 11.5, color: "var(--text-muted)", marginTop: 2 }}>{TYPES[k].label}</div>
                </div>
              </Card>
            );
          })}
        </div>

        {/* Filter chips */}
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <Chip active={type === "all"} onClick={() => setType("all")}>Tout</Chip>
          {Object.keys(TYPES).map((k) => (
            <Chip key={k} active={type === k} dot={TYPES[k].color} onClick={() => setType(k)}>{TYPES[k].label}</Chip>
          ))}
        </div>

        {/* List */}
        <Card variant="flat" padding="0">
          {list.map((d, i) => {
            const t = TYPES[d.type];
            const TIcon = Ic[t.icon] || Ic.folder;
            return (
              <div key={d.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderBottom: i === list.length - 1 ? "none" : "1px solid var(--line-divider)" }}>
                <span style={{ width: 38, height: 38, flex: "none", borderRadius: "var(--radius-md)", background: t.color, border: "var(--border-thin) solid var(--line-keyline)", display: "flex", alignItems: "center", justifyContent: "center" }}><TIcon size={18} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 14, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.name}</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 2, whiteSpace: "nowrap", overflow: "hidden" }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-subtle)", whiteSpace: "nowrap" }}>{d.ext} · {d.size}</span>
                    <span style={{ fontSize: 11.5, color: "var(--text-muted)", whiteSpace: "nowrap" }}>· {d.date}</span>
                  </div>
                </div>
                <IconButton size="sm" variant="ghost" label="Télécharger" icon={<Ic.download size={18} />} />
              </div>
            );
          })}
          {list.length === 0 && <div style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 14 }}>Aucune pièce ne correspond.</div>}
        </Card>
      </div>
    );
  }

  function Chip({ active, dot, onClick, children }) {
    return (
      <button onClick={onClick} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: "var(--radius-pill)", border: "1.5px solid var(--line-keyline)", background: active ? "var(--oryze-ink)" : "var(--surface-card)", color: active ? "var(--oryze-paper)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, cursor: "pointer" }}>
        {dot && <span style={{ width: 7, height: 7, borderRadius: "50%", background: dot, border: "1px solid " + (active ? "var(--oryze-paper)" : "var(--line-keyline)") }} />}
        {children}
      </button>
    );
  }

  window.OryzeApp = window.OryzeApp || {};
  window.OryzeApp.DocumentsScreen = DocumentsScreen;
})();