agent-platform/web/src/pages/teams/components/TeamOverview.tsx

import type { ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Activity, AlertTriangle, CalendarClock, GitBranch, ShieldCheck, Target, UserRound, Users } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import type { JSONObject, TeamConfig, TeamDefinition, TeamRun } from "@/types";
import { formatDateTime } from "@/lib/utils";

export function TeamOverview({
  team,
  activeConfig,
  runCount,
  failedRunCount,
  latestRun,
}: {
  team: TeamDefinition;
  activeConfig?: TeamConfig;
  runCount: number;
  failedRunCount: number;
  latestRun?: TeamRun;
}) {
  const { t } = useTranslation();
  const memberCount = activeConfig?.member_refs_json.length ?? 0;
  return (
    <div className="min-w-0 space-y-4">
      <div className="grid min-w-0 gap-3 md:grid-cols-4">
        <Signal icon={<Activity className="h-4 w-4" />} label={t("common.runs")} value={runCount} />
        <Signal icon={<AlertTriangle className="h-4 w-4" />} label={t("teams.failedRuns")} value={failedRunCount} />
        <Signal icon={<Users className="h-4 w-4" />} label={t("teams.members")} value={memberCount} />
        <Signal icon={<CalendarClock className="h-4 w-4" />} label={t("teams.lastRun")} value={latestRun ? formatDateTime(latestRun.created_time) : t("teams.noRuns")} />
      </div>

      <section className="min-w-0 rounded-md border border-border bg-surface-base p-4">
        <div className="flex min-w-0 items-start gap-3">
          <div className="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
            <Target className="h-5 w-5" />
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex min-w-0 flex-wrap items-center gap-2">
              <h3 className="truncate text-sm font-semibold">{t("teams.currentObjective")}</h3>
              <Badge className="border-border bg-muted/40 text-muted-foreground">{readableLabel(activeConfig?.coordination_mode ?? team.team_type)}</Badge>
            </div>
            <p className="mt-2 break-words text-sm leading-6 text-muted-foreground">
              {activeConfig?.objective || team.description || t("teams.noObjectiveProvided")}
            </p>
          </div>
        </div>
      </section>

      {activeConfig ? (
        <div className="grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_280px]">
          <section className="min-w-0 rounded-md border border-border bg-surface-base p-4">
            <SectionHeader icon={<Users className="h-4 w-4" />} title={t("teams.members")} />
            {activeConfig.member_refs_json.length ? (
              <div className="mt-3 grid min-w-0 gap-2">
                {activeConfig.member_refs_json.map((member, index) => (
                  <MemberCard key={index} member={member} index={index} />
                ))}
              </div>
            ) : (
              <p className="mt-3 text-sm text-muted-foreground">{t("teams.noMembersConfigured")}</p>
            )}
          </section>

          <section className="min-w-0 space-y-3 rounded-md border border-border bg-muted/20 p-4">
            <SectionHeader icon={<GitBranch className="h-4 w-4" />} title={t("teams.policy")} />
            <PolicyRow icon={<GitBranch className="h-4 w-4" />} label={t("teams.coordination")} value={readableLabel(activeConfig.coordination_mode)} />
            <PolicyRow icon={<Activity className="h-4 w-4" />} label={t("teams.maxRoundsField")} value={getJsonString(activeConfig.policy_json, "max_rounds") ?? t("teams.none")} />
            <PolicyRow icon={<ShieldCheck className="h-4 w-4" />} label={t("teams.handoff")} value={readableLabel(getJsonString(activeConfig.policy_json, "handoff") ?? t("teams.none"))} />
            <div className="rounded-md border border-border bg-surface-elevated p-3">
              <p className="text-xs text-muted-foreground">{t("common.created")}</p>
              <p className="mt-1 truncate text-sm font-medium">{formatDateTime(activeConfig.created_time)}</p>
            </div>
          </section>
        </div>
      ) : (
        <div className="rounded-md border border-dashed border-border bg-muted/20 p-5 text-sm text-muted-foreground">
          {t("teams.noTeamConfiguration")}
        </div>
      )}
    </div>
  );
}

function Signal({ icon, label, value }: { icon: ReactNode; label: string; value: string | number }) {
  return (
    <div className="min-w-0 rounded-md border border-border bg-muted/25 p-3">
      <div className="flex min-w-0 items-center gap-2 text-muted-foreground">
        <span className="shrink-0 text-primary">{icon}</span>
        <span className="truncate text-xs">{label}</span>
      </div>
      <p className="mt-2 truncate text-xl font-semibold tabular-nums">{value}</p>
    </div>
  );
}

function MemberCard({ member, index }: { member: JSONObject; index: number }) {
  const { t } = useTranslation();
  const name = getJsonString(member, "name") ?? getJsonString(member, "agent_name") ?? `${t("teams.member")} ${index + 1}`;
  const role = getJsonString(member, "role") ?? t("teams.member");
  const responsibility = getJsonString(member, "description") ?? getJsonString(member, "responsibility") ?? t("teams.noResponsibilitySummary");
  return (
    <div className="min-w-0 rounded-md border border-border bg-muted/20 p-3">
      <div className="flex min-w-0 items-start justify-between gap-3">
        <div className="flex min-w-0 items-start gap-2">
          <div className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
            <UserRound className="h-4 w-4" />
          </div>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold">{name}</p>
            <p className="mt-0.5 truncate text-xs text-muted-foreground">
              {getJsonString(member, "agent_id") ?? getJsonString(member, "id") ?? t("teams.unboundAgent")}
            </p>
          </div>
        </div>
        <Badge className="shrink-0 border-border bg-surface-elevated text-muted-foreground">{readableLabel(role)}</Badge>
      </div>
      <p className="mt-2 line-clamp-2 break-words text-sm leading-6 text-muted-foreground">{responsibility}</p>
    </div>
  );
}

function PolicyRow({ icon, label, value }: { icon: ReactNode; label: string; value: string }) {
  return (
    <div className="flex min-w-0 items-center gap-3 rounded-md border border-border bg-surface-elevated p-3">
      <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">{icon}</span>
      <div className="min-w-0">
        <p className="truncate text-xs text-muted-foreground">{label}</p>
        <p className="mt-0.5 truncate text-sm font-medium">{value}</p>
      </div>
    </div>
  );
}

function SectionHeader({ icon, title }: { icon: ReactNode; title: string }) {
  return (
    <div className="flex min-w-0 items-center gap-2">
      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">{icon}</span>
      <h3 className="truncate text-sm font-semibold">{title}</h3>
    </div>
  );
}

function readableLabel(value: string) {
  return value.split(/[_-]+/).filter(Boolean).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
}

function getJsonString(value: JSONObject, key: string) {
  const item = value[key];
  if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") return String(item);
  return undefined;
}