// Consulting.jsx — 04 상담준비: 후보별 상담 질문지 · 확인 항목 (체크 저장)
const { Card, StatusBadge, Tag, Tabs, Button } = window.DesignSystem_7d5e72;

function ConsultingScreen({ data, patch }) {
  const VENUES = [
    { key: "v-chapel", label: "더채플앳청담" },
    { key: "v-apel",   label: "아펠가모 잠실" },
    { key: "v-eliena", label: "엘리에나 호텔" },
  ];
  const [venue, setVenue] = React.useState(VENUES[0].key);

  // 공통 상담 질문 뱅크 (모든 후보 동일하게 확인)
  const GROUPS = [
    { cat: "가격 · 식대", tone: "gold", q: [
      ["식대 단가 / 최소 보증 인원", "VAT · 봉사료 포함 여부"],
      ["대관료 · 꽃 · 음향 포함 범위", "주말/시간대별 가격 차이"],
    ] },
    { cat: "가능일 · 시간", tone: "primary", q: [
      ["희망 월의 가능일 / 예약 마감", "예식 간격 (앞뒤 타임 여유)"],
    ] },
    { cat: "환불 · 위약", tone: "rose", q: [
      ["계약금 / 환불 규정", "위약금 · 일정 변경 조건"],
    ] },
    { cat: "반입 · 제약", tone: "sage", q: [
      ["외부 스냅 / 본식 DVD 반입 가능", "주차 · 하객 대기공간 · 폐백실"],
    ] },
  ];

  const done = data.done || {};
  const qid = (gi, qi, ci) => `q-${venue}-${gi}-${qi}-${ci}`;
  const toggle = (id) => patch((prev) => ({ ...prev, done: { ...prev.done, [id]: !prev.done[id] } }));

  const allIds = GROUPS.flatMap((g, gi) => g.q.flatMap((row, qi) => row.map((_, ci) => qid(gi, qi, ci))));
  const answered = allIds.filter((id) => done[id]).length;

  const box = (d) => ({
    width: "20px", height: "20px", borderRadius: "6px", border: "1.5px solid",
    borderColor: d ? "var(--primary)" : "var(--line-strong)",
    background: d ? "var(--primary)" : "transparent", display: "inline-flex",
    alignItems: "center", justifyContent: "center", color: "#FFF", fontSize: "12px",
    fontWeight: 700, cursor: "pointer", flex: "none",
  });

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", marginBottom: "16px", flexWrap: "wrap" }}>
        <Tabs items={VENUES.map(v => ({ key: v.key, label: v.label }))} active={venue} onSelect={setVenue} style={{ border: "none" }} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: "8px", fontSize: "13px", color: "var(--ink-3)" }}>
          확인 <b style={{ color: "var(--primary)", fontVariantNumeric: "tabular-nums" }}>{answered}</b> / {allIds.length}
        </span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "16px", alignItems: "start" }}>
        {GROUPS.map((g, gi) => (
          <Card key={gi} title={g.cat} action={<Tag tone={g.tone}>상담 필수</Tag>}>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {g.q.flatMap((row, qi) => row.map((text, ci) => {
                const id = qid(gi, qi, ci);
                const d = !!done[id];
                const last = qi === g.q.length - 1 && ci === row.length - 1;
                return (
                  <div key={id} onClick={() => toggle(id)} style={{ display: "flex", alignItems: "center", gap: "12px",
                       padding: "11px 0", borderBottom: last ? "none" : "1px solid var(--line-soft)", cursor: "pointer" }}>
                    <span style={box(d)}>{d ? "✓" : ""}</span>
                    <span style={{ fontSize: "14px", color: d ? "var(--ink-4)" : "var(--ink-1)", textDecoration: d ? "line-through" : "none" }}>{text}</span>
                  </div>
                );
              }))}
            </div>
          </Card>
        ))}
      </div>

      <p style={{ margin: "16px 2px 0", fontSize: "12.5px", color: "var(--ink-3)", display: "flex", alignItems: "center", gap: "8px" }}>
        <StatusBadge status="check" size="sm">확인필요</StatusBadge>
        후보를 바꾸면 체크 상태가 후보별로 따로 저장됩니다.
      </p>
    </div>
  );
}

window.ConsultingScreen = ConsultingScreen;