// Dashboard.jsx — 01 대시보드: Google Sheet 데이터 연결형
const { Card, StatCard, StatusBadge, Tag, DataTable, BudgetMeter, Button } = window.DesignSystem_7d5e72;

function DashScreen({ data, patch, go }) {
  const sheet = window.WED_SHEET_DATA || {};
  const venues = (sheet.venues || []).slice(0, 5);
  const questions = (sheet.questions || []).filter(r => (r['결정상태'] || '').includes('미정')).slice(0, 4);
  const checklist = sheet.checklist || [];
  const doneCount = checklist.filter(r => String(r['완료']).toUpperCase() === 'TRUE').length;
  const dday = window.computeDday(data.weddingDate);
  const cap = (data.budgetCap || 8500).toLocaleString("ko-KR");
  const eyebrow = { fontSize: "11px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 600, margin: "0 0 12px" };
  const taskRow = { display: "flex", alignItems: "center", gap: "12px", padding: "12px 0", borderBottom: "1px solid var(--line-soft)", fontSize: "14.5px", color: "var(--ink-1)" };
  const numChip = { width: "24px", height: "24px", borderRadius: "8px", flex: "none", background: "var(--rose-soft)", border: "1px solid var(--rose-line)", color: "var(--rose-ink)", fontSize: "12px", fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", fontVariantNumeric: "tabular-nums" };
  const linkRow = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px", padding: "11px 14px", borderRadius: "10px", border: "1px solid var(--line)", background: "var(--paper-1)", textDecoration: "none", color: "var(--ink-1)", fontSize: "14px", fontWeight: 500 };
  const toneForArea = (area) => /강남|호텔/.test(area || '') ? 'rose' : 'neutral';

  return (
    <div>
      <div className="sheet-bridge" style={{ marginTop: 0, marginBottom: 16, borderColor: 'var(--primary-line)', background: 'var(--primary-soft)' }}>
        <h3>실시간 기준 데이터: Google Sheet 스냅샷 연결됨</h3>
        <p>현재 화면은 마스터 Sheet에서 읽어온 데이터 스냅샷 기준입니다. 생성시각: {(sheet.generatedAt || '').replace('T',' ').slice(0,16)} · 후보 {venues.length}/전체 {(sheet.venues || []).length}곳 · 체크리스트 {(sheet.checklist || []).length}개</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "14px", marginBottom: "16px" }}>
        <StatCard label="결정 필요" value={(sheet.questions || []).length || 8} unit="건" note="12_확인필요 탭" tone="rose" />
        <StatCard label="체크리스트" value={doneCount} unit={`/ ${(sheet.checklist || []).length || 63} 완료`} note="08_체크리스트 탭" tone="primary" />
        <StatCard label="AI 리서치 후보" value={(sheet.venues || []).length || 35} unit="곳" note="대표/소영 확정 전 제안 목록" />
        <StatCard label="결혼식까지" value={dday} note={window.fmtDate(data.weddingDate) + " 예정"} tone="gold" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: "16px", alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          <Card eyebrow="이번 주 · 가장 급한 결정" title="둘이 먼저 맞춰야 할 기준값" accent="rose" action={<StatusBadge status="check" size="sm">Sheet</StatusBadge>}>
            <div>
              {(questions.length ? questions : [{질문:'2027년 선호 예식 월/계절은?'},{질문:'예식 지역 범위는?'},{질문:'예상 하객수/보증인원은?'},{질문:'총예산 상한은?'}]).map((r, i) => (
                <div key={i} style={{ ...taskRow, borderBottom: i === Math.min(3, questions.length || 4)-1 ? "none" : taskRow.borderBottom }}>
                  <span style={numChip}>{r['우선순위'] || i + 1}</span>
                  <span style={{ flex: 1 }}>{r['질문'] || r.질문}</span>
                  <StatusBadge status="hold" size="sm">{r['결정상태'] || '미정'}</StatusBadge>
                </div>
              ))}
            </div>
          </Card>

          <Card eyebrow={`AI 리서치 후보 · TOP ${venues.length}`} title="확정 전 검토용 제안 목록" action={<Button variant="ghost" size="sm" onClick={() => go && go("venues")}>전체 보기 →</Button>}>
            <DataTable dense columns={[{ key: "venue", label: "예식장", nowrap: true }, { key: "area", label: "권역" }, { key: "status", label: "주차/상태" }, { key: "guests", label: "홀타입", align: "right" }]}
              rows={venues.map(r => ({ venue: r['후보'], area: <Tag tone={toneForArea(r['권역'])}>{r['권역']}</Tag>, status: <span style={{fontSize:13,color:'var(--ink-3)'}}>{r['주차'] || '상담확인'}</span>, guests: r['홀타입'] || '상담확인' }))} />
            <p style={{ margin: "12px 0 0", fontSize: "12.5px", color: "var(--ink-3)", lineHeight: 1.5 }}>원본: 03_예식장후보. 이 목록은 AI/리서치가 넓게 수집한 후보군이며, 대표님·소영님이 상담 후보로 확정한 목록이 아닙니다.</p>
          </Card>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          <Card eyebrow="예산 위험" title="상담확인 필요 항목" accent="risk">
            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
              <BudgetMeter label="웨딩홀 식대/대관" spent={0} cap={5000} />
              <BudgetMeter label="스드메/본식업체" spent={0} cap={2500} />
              <BudgetMeter label="혼수·예복·기타" spent={0} cap={1000} />
            </div>
            <p style={{fontSize:12.5,color:'var(--ink-3)',lineHeight:1.5}}>금액은 원본 Sheet의 상담확인 전 상태를 반영해 0/상담확인 기준으로 표시했습니다.</p>
          </Card>

          <Card eyebrow={`확인필요 · ${(sheet.questions || []).length}건`} title="대기 중인 결정" action={<StatusBadge status="check" size="sm">Sheet</StatusBadge>}>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "10px" }}>
              {questions.slice(0,3).map((r, i) => <li key={i} style={{ display: "flex", justifyContent: "space-between", gap: "10px", fontSize: "13.5px", color: "var(--ink-2)", lineHeight: 1.45 }}><span>{r['질문']}</span><span style={{ flex: "none", color: "var(--ink-4)", fontSize: "12px" }}>{r['결정상태'] || '미정'}</span></li>)}
            </ul>
          </Card>

          <Card eyebrow="주요 링크" title="자료 바로가기">
            <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
              <a href={sheet.sheetUrl || '#'} target="_blank" rel="noreferrer" style={linkRow}><span>운영 Google Sheet</span><span style={{ color: "var(--ink-4)" }}>↗</span></a>
              <a href="https://drive.google.com/drive/folders/1IRkplc86kHPQUbLxNfpMCQwTgGsu5Fd_" target="_blank" rel="noreferrer" style={linkRow}><span>Drive · 결혼준비 폴더</span><span style={{ color: "var(--ink-4)" }}>↗</span></a>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}
window.DashScreen = DashScreen;