// Budget.jsx — 06 예산결제: 총액 / 계약금 / 잔금 / 숨은비용 / VAT
const { Card, StatCard, StatusBadge, Tag, DataTable, BudgetMeter } = window.DesignSystem_7d5e72;

function BudgetScreen({ data }) {
  const cap = data.budgetCap || 8500;
  const quote = 7890;
  const pct = Math.round((quote / cap) * 100);
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "14px", marginBottom: "16px" }}>
        <StatCard label="총예산 상한" value={cap.toLocaleString("ko-KR")} unit="만원" note="둘이 합의한 상한" />
        <StatCard label="현재 견적 합계" value="7,890" unit="만원" note={"상한의 " + pct + "%"} tone={pct >= 90 ? "risk" : "gold"} />
        <StatCard label="납부한 계약금" value="1,200" unit="만원" note="웨딩홀 · 스드메" tone="rose" />
        <StatCard label="잔금 예정" value="6,690" unit="만원" note="최종 2027.04.04" tone="risk" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "16px", alignItems: "start" }}>
        <Card eyebrow="항목별 견적" title="포함 · 별도비용 비교" padding="20px">
          <DataTable
            dense
            columns={[
              { key: "item", label: "항목", nowrap: true },
              { key: "base", label: "기본 견적", align: "right" },
              { key: "hidden", label: "숨은 비용" },
              { key: "vat", label: "VAT" },
            ]}
            rows={[
              { item: <b>웨딩홀</b>, base: "4,300", hidden: <span style={{ fontSize: "13px", color: "var(--st-risk-ink)" }}>봉사료 · 최소보증</span>, vat: <Tag tone="gold">별도</Tag> },
              { item: <b>스드메</b>, base: "1,450", hidden: <span style={{ fontSize: "13px", color: "var(--st-risk-ink)" }}>헬퍼비 · 출장</span>, vat: <Tag tone="sage">포함</Tag> },
              { item: <b>본식 스냅</b>, base: "320", hidden: <span style={{ fontSize: "13px", color: "var(--ink-4)" }}>원본 추가</span>, vat: <Tag tone="sage">포함</Tag> },
              { item: <b>예복 · 한복</b>, base: "620", hidden: <span style={{ fontSize: "13px", color: "var(--ink-4)" }}>대여 연장</span>, vat: <Tag tone="gold">별도</Tag> },
            ]}
          />
          <p style={{ margin: "12px 0 0", fontSize: "12.5px", color: "var(--ink-3)", lineHeight: 1.5 }}>
            업체별 총액만 비교하지 말고 포함사항 · 별도비용 · 계약금 · 환불조건을 같은 행에 기록합니다.
          </p>
        </Card>

        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          <Card eyebrow="상한 대비" title="예산 소진" accent="risk">
            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
              <BudgetMeter label="웨딩홀" spent={4300} cap={5000} />
              <BudgetMeter label="스드메" spent={1450} cap={1300} />
              <BudgetMeter label="기타 (스냅·예복)" spent={940} cap={1200} />
            </div>
          </Card>
          <Card eyebrow="결제 일정" title="다음 납부">
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "11px" }}>
              {[
                ["웨딩홀 중도금", "2027.01.10", "1,500", "hold"],
                ["스드메 잔금", "2027.03.20", "850", "hold"],
                ["웨딩홀 잔금", "2027.04.04", "2,300", "check"],
              ].map(([n, d, amt, st], i) => (
                <li key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px" }}>
                  <div>
                    <div style={{ fontSize: "13.5px", fontWeight: 600, color: "var(--ink-1)" }}>{n}</div>
                    <div style={{ fontSize: "12px", color: "var(--ink-3)", fontVariantNumeric: "tabular-nums" }}>{d}</div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                    <span style={{ fontSize: "14px", fontWeight: 700, fontVariantNumeric: "tabular-nums", color: "var(--ink-1)" }}>{amt}<span style={{ color: "var(--ink-4)", fontWeight: 400 }}>만원</span></span>
                    <StatusBadge status={st} size="sm" />
                  </div>
                </li>
              ))}
            </ul>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.BudgetScreen = BudgetScreen;