// Quotes.jsx — 05 견적비교: 같은 기준으로 업체 견적 나란히 비교
const { Card, StatusBadge, Tag, Button } = window.DesignSystem_7d5e72;

function QuotesScreen({ data, go }) {
  // 비교 대상 (상위 후보 3곳)
  const COLS = [
    { id: "v-chapel", name: "더채플앳청담", area: "강남권", best: true },
    { id: "v-apel",   name: "아펠가모 잠실", area: "송파/잠실" },
    { id: "v-eliena", name: "엘리에나 호텔", area: "강남권" },
  ];
  // 행: [항목, [후보별 값], 강조여부, note]
  const ROWS = [
    ["대관 · 홀", ["포함", "150만원", "300만원"], false],
    ["식대 단가", ["7.9만", "6.8만", "9.2만"], false, "1인 / VAT 별도"],
    ["최소 보증", ["250명", "200명", "220명"], "min"],
    ["스드메", ["별도", "패키지 가능", "별도"], false],
    ["계약금", ["1,000만", "800만", "1,200만"], false],
    ["환불 규정", ["80일 전 50%", "60일 전 70%", "협의"], "warn"],
    ["예상 총액", ["5,200만", "4,600만", "6,100만"], "total"],
  ];
  const stars = data.stars || {};

  const cell = (val, kind, ci) => {
    let color = "var(--ink-1)", weight = 600;
    if (kind === "warn") { color = "var(--st-risk-ink)"; weight = 600; }
    if (kind === "total") { weight = 700; }
    if (kind === "min" && ci === 0) { color = "var(--st-risk-ink)"; }
    return <span style={{ color, fontWeight: weight, fontVariantNumeric: "tabular-nums" }}>{val}</span>;
  };

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px", gap: "12px", flexWrap: "wrap" }}>
        <p style={{ margin: 0, fontSize: "14px", color: "var(--ink-3)" }}>총액만 보지 말고 <b style={{ color: "var(--ink-1)" }}>포함 범위 · 숨은비용 · 환불조건</b>을 같은 행에서 비교하세요.</p>
        <Button variant="quiet" size="md" onClick={() => go && go("venues")}>후보 관리 →</Button>
      </div>

      <Card padding="0" style={{ overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: "560px" }}>
            <thead>
              <tr>
                <th style={{ textAlign: "left", padding: "16px 18px", fontSize: "11px", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 700, background: "var(--paper-2)", borderBottom: "1px solid var(--line)", position: "sticky", left: 0 }}>비교 항목</th>
                {COLS.map((c) => (
                  <th key={c.id} style={{ textAlign: "left", padding: "14px 18px", background: c.best ? "var(--primary-soft)" : "var(--paper-2)", borderBottom: "1px solid var(--line)", borderLeft: "1px solid var(--line)", minWidth: "150px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "14.5px", fontWeight: 700, color: c.best ? "var(--primary-ink)" : "var(--ink-1)" }}>
                      {stars[c.id] && <span style={{ color: "var(--gold)" }}>★</span>}{c.name}
                    </div>
                    <div style={{ fontSize: "12px", color: "var(--ink-3)", marginTop: "3px" }}>{c.area}{c.best && " · 1순위"}</div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {ROWS.map((r, ri) => (
                <tr key={ri} style={{ background: r[2] === "total" ? "var(--paper-2)" : "transparent" }}>
                  <td style={{ padding: "13px 18px", fontSize: "13.5px", color: "var(--ink-2)", fontWeight: 600, borderBottom: "1px solid var(--line-soft)", position: "sticky", left: 0, background: "inherit" }}>
                    {r[0]}
                    {r[3] && <span style={{ display: "block", fontSize: "11.5px", color: "var(--ink-4)", fontWeight: 400 }}>{r[3]}</span>}
                  </td>
                  {r[1].map((v, ci) => (
                    <td key={ci} style={{ padding: "13px 18px", fontSize: "14px", borderBottom: "1px solid var(--line-soft)", borderLeft: "1px solid var(--line-soft)", background: COLS[ci].best && r[2] === "total" ? "var(--primary-soft)" : "inherit" }}>
                      {cell(v, r[2], ci)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <p style={{ margin: "14px 2px 0", fontSize: "12.5px", color: "var(--ink-3)", display: "flex", alignItems: "center", gap: "8px" }}>
        <StatusBadge status="hold" size="sm">주의</StatusBadge>
        식대 · 보증 · 환불조건은 견적서 기준이며, 최종 수치는 상담·계약 시 재확인합니다.
      </p>
    </div>
  );
}

window.QuotesScreen = QuotesScreen;