const { Icon, Button } = window.SamsonAILabDesignSystem_8f27a2;

function TasksView() {
  return (
    <div className="ds-scroll" style={{ flex: 1, overflowY: "auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 96px 110px 96px 88px", gap: 12, padding: "8px 20px", borderBottom: "1px solid var(--color-grid-bright)", fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--color-text-faint)" }}>
        <span>Identifier</span><span>Type</span><span>Queue</span><span>Last run</span><span>Runs 24h</span>
      </div>
      {window.TASKS.map((t) => (
        <div key={t.id} style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 96px 110px 96px 88px", gap: 12, alignItems: "center", padding: "11px 20px", borderBottom: "1px solid var(--color-grid-hairline)", fontSize: "var(--text-2sm)", color: "var(--color-text-dimmed)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10, minWidth: 0 }}>
            <Icon name={t.icon} size={16} color={t.color} />
            <span style={{ fontFamily: "var(--font-mono)", color: "var(--color-text-bright)", overflow: "hidden", textOverflow: "ellipsis" }}>{t.id}</span>
          </span>
          <span>{t.type}</span>
          <span style={{ fontFamily: "var(--font-mono)" }}>{t.queue}</span>
          <span>{t.lastRun}</span>
          <span style={{ fontFamily: "var(--font-mono)" }}>{t.runs24h}</span>
        </div>
      ))}
    </div>
  );
}

function QueuesView() {
  return (
    <div className="ds-scroll" style={{ flex: 1, overflowY: "auto", padding: 20 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }}>
        {window.QUEUES.map((q) => (
          <div key={q.name} style={{ padding: 16, background: "var(--color-background-bright)", border: "1px solid var(--color-grid-bright)", borderRadius: "var(--radius-md)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name="layers" size={16} color="var(--color-cat-purple)" />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "var(--color-text-bright)" }}>{q.name}</span>
              <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-2sm)", color: "var(--color-text-dimmed)" }}>{q.running} / {q.limit}</span>
            </div>
            <div style={{ height: 2, marginTop: 14, background: "var(--color-grid-bright)" }}>
              <div style={{ height: 2, width: Math.round((q.running / q.limit) * 100) + "%", background: "var(--color-cat-purple)" }} />
            </div>
            <div style={{ display: "flex", gap: 16, marginTop: 12, fontSize: "var(--text-2sm)", color: "var(--color-text-dimmed)" }}>
              <span>Concurrency limit {q.limit}</span>
              <span style={{ marginLeft: "auto", color: q.queued ? "var(--color-text-bright)" : "var(--color-text-faint)" }}>{q.queued} queued</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EmptyView({ label }) {
  return (
    <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
      <div style={{ maxWidth: 360, textAlign: "center", padding: 32, border: "1px dashed var(--color-border-bright)", borderRadius: "var(--radius-md)" }}>
        <div style={{ fontSize: "var(--text-xl)", letterSpacing: "var(--tracking-xl)", fontWeight: "var(--font-weight-medium)", color: "var(--color-text-bright)" }}>No {label} yet</div>
        <p style={{ marginTop: 8, fontSize: "var(--text-sm)", color: "var(--color-text-dimmed)" }}>This screen is not specified in the source design document. The dashed border is the system's empty-state treatment.</p>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 20 }}>
          <Button variant="primary" size="medium">Create {label.replace(/s$/, "")}</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TasksView, QueuesView, EmptyView });