// Contracts.jsx — 07 계약현황: 계약 · 환불/위약 조항 · 다음 액션
const { Card, StatCard, StatusBadge, Tag, DataTable, Button } = window.DesignSystem_7d5e72;

function ContractsScreen({ data }) {
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "14px", marginBottom: "16px" }}>
        <StatCard label="계약 완료" value="1" unit="건" note="웨딩홀 가계약" tone="primary" />
        <StatCard label="검토 중" value="2" unit="건" note="스드메 · 스냅" tone="gold" />
        <StatCard label="납부 계약금" value="1,200" unit="만원" note="환불 가능액 확인" tone="rose" />
        <StatCard label="가장 빠른 마감" value="D-18" note="가계약 본계약 전환" tone="risk" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "16px", alignItems: "start" }}>
        <Card eyebrow="계약 상태" title="업체별 계약 단계" padding="0" style={{ overflow: "hidden" }}>
          <DataTable
            style={{ border: "none", borderRadius: 0, boxShadow: "none" }}
            columns={[
              { key: "vendor", label: "업체", nowrap: true },
              { key: "kind", label: "구분" },
              { key: "stage", label: "단계" },
              { key: "deposit", label: "계약금", align: "right" },
              { key: "refund", label: "환불 마감" },
            ]}
            rows={[
              { vendor: <b>더채플앳청담</b>, kind: <Tag tone="rose">웨딩홀</Tag>, stage: <StatusBadge status="active" size="sm">가계약</StatusBadge>, deposit: "1,000", refund: <span style={{ color: "var(--st-risk-ink)", fontSize: "13px" }}>80일 전</span> },
              { vendor: <b>스튜디오 △△</b>, kind: <Tag tone="neutral">스드메</Tag>, stage: <StatusBadge status="hold" size="sm">검토</StatusBadge>, deposit: "200", refund: <span style={{ fontSize: "13px", color: "var(--ink-3)" }}>60일 전</span> },
              { vendor: <b>본식스냅 ○○</b>, kind: <Tag tone="neutral">스냅</Tag>, stage: <StatusBadge status="check" size="sm">조항확인</StatusBadge>, deposit: "—", refund: <span style={{ fontSize: "13px", color: "var(--ink-4)" }}>미정</span> },
            ]}
          />
        </Card>

        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          <Card eyebrow="조항 확인필요" title="환불 · 위약" accent="risk">
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "11px" }}>
              {[
                ["웨딩홀 일정 변경 위약금 기준", "check"],
                ["스드메 헬퍼비 · 추가컷 비용", "check"],
                ["스냅 원본 제공 · 2차 사용범위", "hold"],
              ].map(([t, st], i) => (
                <li key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "10px", fontSize: "13.5px", color: "var(--ink-2)" }}>
                  <span>{t}</span><StatusBadge status={st} size="sm" />
                </li>
              ))}
            </ul>
          </Card>
          <Card eyebrow="다음 액션" title="이번 주 처리">
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "10px" }}>
              {["웨딩홀 본계약 일정 잡기", "스드메 계약서 환불조항 회신 요청", "스냅 견적서 2곳 추가 수집"].map((t, i) => (
                <li key={i} style={{ display: "flex", gap: "10px", fontSize: "14px", color: "var(--ink-1)", alignItems: "center" }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--primary)", flex: "none" }} />{t}
                </li>
              ))}
            </ul>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.ContractsScreen = ContractsScreen;