// Roles.jsx — 09 역할분담: 누가 무엇을 맡는지 · 진행 현황
const { Card, StatusBadge, Tag, BudgetMeter } = window.DesignSystem_7d5e72;

function RolesScreen({ data }) {
  const PEOPLE = [
    { name: "오승하", tone: "rose", areas: [
      ["예식장 후보 · 방문 동선", "active"], ["견적 수집 · 정리", "active"], ["계약 · 결제 일정", "hold"] ] },
    { name: "소영", tone: "sage", areas: [
      ["스드메 리서치 · 예약", "active"], ["상담 질문지 · 조항 검토", "hold"], ["청첩장 · 초대 관리", "hold"] ] },
    { name: "공동", tone: "neutral", areas: [
      ["기준값 · 우선순위 합의", "active"], ["예산 상한 · 분배", "active"], ["최종 의사결정", "hold"] ] },
  ];

  const done = data.done || {};
  const total = Object.keys(done).length ? Object.values(done).length : 8;
  const completed = Object.values(done).filter(Boolean).length;

  return (
    <div>
      <Card style={{ marginBottom: "16px" }} eyebrow="협업 현황" title="둘이 함께 · 따로 맡은 일">
        <BudgetMeter label="전체 준비 진행" spent={completed} cap={8} unit="건" warnAt={2} />
        <p style={{ margin: "12px 0 0", fontSize: "13px", color: "var(--ink-3)" }}>진행 건수는 체크리스트 완료 수와 연동됩니다.</p>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px", alignItems: "start" }}>
        {PEOPLE.map((p, i) => (
          <Card key={i} accent={p.tone === "rose" ? "rose" : p.tone === "sage" ? "sage" : null}
                eyebrow={`${p.areas.length}개 영역`} title={p.name}
                action={<Tag tone={p.tone}>{p.name === "공동" ? "함께" : "담당"}</Tag>}>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "10px" }}>
              {p.areas.map(([t, st], j) => (
                <li key={j} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "10px",
                     padding: "10px 0", borderBottom: j === p.areas.length - 1 ? "none" : "1px solid var(--line-soft)" }}>
                  <span style={{ fontSize: "14px", color: "var(--ink-1)" }}>{t}</span>
                  <StatusBadge status={st} size="sm" />
                </li>
              ))}
            </ul>
          </Card>
        ))}
      </div>
    </div>
  );
}

window.RolesScreen = RolesScreen;