// Timeline.jsx — 02 타임라인: D-day까지 단계별 준비 흐름
const { Card, StatusBadge, Tag } = window.DesignSystem_7d5e72;

function TimelineScreen({ data }) {
  const dday = window.computeDday(data.weddingDate);

  const PHASES = [
    { when: "지금 · D-312", title: "기준 확정", status: "active",
      items: ["예식 월·지역·하객·예산 4개 기준 합의", "우선순위 가중치 정하기"] },
    { when: "D-300 ~ D-270", title: "후보 압축 · 상담", status: "active",
      items: ["예식장 후보 5곳 선정", "상담 질문지 준비", "방문 동선 · 예약"] },
    { when: "D-260 ~ D-220", title: "견적 비교 · 1차 계약", status: "hold",
      items: ["같은 기준으로 견적 정리", "환불·위약 조항 확인", "웨딩홀 계약 · 계약금"] },
    { when: "D-180 ~ D-120", title: "스드메 · 본식 업체", status: "hold",
      items: ["스튜디오·드레스·메이크업 확정", "본식 스냅 / DVD 예약", "중도금 일정 관리"] },
    { when: "D-90 ~ D-30", title: "디테일 · 초대", status: "hold",
      items: ["청첩장 · 모바일 청첩장", "식순 · 사회 · 축가", "하객 수 최종 · 좌석"] },
    { when: "D-14 ~ D-DAY", title: "마무리 · 잔금", status: "check",
      items: ["잔금 납부 · 최종 인원 확정", "리허설 · 동선 확인", "비상 연락망 · 당일 役 분담"] },
  ];

  const railColor = (st) => st === "active" ? "var(--primary)" : st === "check" ? "var(--st-check-dot)" : "var(--line-strong)";

  return (
    <div>
      <Card style={{ marginBottom: "16px" }} accent="gold" eyebrow="결혼식까지" title={`${dday} · ${window.fmtDate(data.weddingDate)}`}>
        <p style={{ margin: 0, fontSize: "14px", color: "var(--ink-2)", lineHeight: 1.6 }}>
          단계는 권장 흐름입니다. 상담·계약 일정에 따라 앞뒤로 조정하세요. 각 단계의 실무 항목은 <b>체크리스트</b>에서 관리합니다.
        </p>
      </Card>

      <div style={{ position: "relative", paddingLeft: "8px" }}>
        {PHASES.map((p, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "28px 1fr", gap: "16px", alignItems: "stretch" }}>
            {/* rail */}
            <div style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center" }}>
              <span style={{ width: "14px", height: "14px", borderRadius: "50%", background: railColor(p.status),
                             border: "3px solid var(--paper-1)", boxShadow: "0 0 0 1px " + railColor(p.status), marginTop: "22px", flex: "none", zIndex: 1 }} />
              {i < PHASES.length - 1 && <span style={{ flex: 1, width: "2px", background: "var(--line)", marginTop: "2px" }} />}
            </div>
            {/* card */}
            <div style={{ paddingBottom: "16px" }}>
              <Card>
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "12px", marginBottom: "12px" }}>
                  <div>
                    <div style={{ fontSize: "11px", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 700, marginBottom: "5px" }}>{p.when}</div>
                    <h3 style={{ margin: 0, fontSize: "var(--fs-h3)", fontWeight: 600, color: "var(--ink-1)" }}>{p.title}</h3>
                  </div>
                  <StatusBadge status={p.status} size="sm" />
                </div>
                <ul style={{ margin: 0, paddingLeft: "18px", display: "flex", flexDirection: "column", gap: "6px" }}>
                  {p.items.map((it, j) => (
                    <li key={j} style={{ fontSize: "14px", color: "var(--ink-2)", lineHeight: 1.55 }}>{it}</li>
                  ))}
                </ul>
              </Card>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.TimelineScreen = TimelineScreen;