/* eslint-disable */
// Phone Preview — realistic Android/iOS RCS chat preview

const MEDIA_PRESETS = {
  "ramen": "https://images.unsplash.com/photo-1569718212165-3a8278d5f624?w=600&q=70",
  "shoes": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&q=70",
  "watch": "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=70",
  "coffee": "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&q=70",
  "headphones": "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&q=70",
};

function resolveText(s, vars) {
  if (!s) return s;
  return s.replace(/\{\{(\w+)\}\}/g, (_, k) => vars[k] || `{{${k}}}`);
}

function actionIcon(type, size = 13) {
  switch (type) {
    case "call": return <I.Phone size={size} />;
    case "url": return <I.Link size={size} />;
    case "map": return <I.MapPin size={size} />;
    case "calendar": return <I.CalendarPlus size={size} />;
    case "reply": return <I.Reply size={size} />;
    default: return <I.ChevronRight size={size} />;
  }
}

function StatusBar() {
  const [time, setTime] = React.useState("9:41");
  React.useEffect(() => {
    const t = setInterval(() => {
      const d = new Date();
      setTime(`${d.getHours()}:${String(d.getMinutes()).padStart(2, "0")}`);
    }, 30000);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="statusbar">
      <span>{time}</span>
      <div className="right">
        <I.Signal size={14} />
        <I.Wifi size={14} />
        <div className="battery"><div className="fill" /></div>
      </div>
    </div>
  );
}

function ChatHeader({ brand }) {
  return (
    <div className="chat-head">
      <span className="back"><I.ChevronLeft size={20} /></span>
      <div className="avatar">
        {brand.avatar ? <img src={brand.avatar} alt="" /> : (brand.name || "B").charAt(0).toUpperCase()}
        <span className="verified"><I.Check size={9} /></span>
      </div>
      <div className="name">
        <h6>{brand.name || "Brand"} <I.Verified size={13} /></h6>
        <p>已驗證商家 · Online</p>
      </div>
      <button className="ico-btn" style={{ background: "none", border: 0 }}><I.Video size={18} /></button>
      <button className="ico-btn" style={{ background: "none", border: 0 }}><I.MoreV size={18} /></button>
    </div>
  );
}

function TextBubble({ text, vars }) {
  const resolved = resolveText(text, vars);
  if (!resolved || resolved.trim() === "") {
    return (
      <div className="bubble-wrap in">
        <div className="bubble empty">輸入文字內容…</div>
      </div>
    );
  }
  return (
    <div className="bubble-wrap in">
      <div className="bubble">
        {resolved}
        <div className="timestamp">下午 2:34 · RCS</div>
      </div>
    </div>
  );
}

function RichCard({ card, vars, compact }) {
  const title = resolveText(card.title, vars) || "";
  const desc = resolveText(card.desc, vars) || "";
  const actions = (card.actions || []).filter((a) => a.label);
  const mediaUrl = card.mediaPreset ? MEDIA_PRESETS[card.mediaPreset] : card.mediaUrl;
  return (
    <div className="rich-card">
      <div className={"rc-media " + (card.mediaHeight || "")}
           style={{ backgroundImage: mediaUrl ? `url(${mediaUrl})` : "none", backgroundColor: mediaUrl ? "transparent" : "var(--rh-bg)" }}>
        {!mediaUrl && <span className="placeholder">未選擇圖片 / no image</span>}
      </div>
      <div className="rc-body">
        <h6 className="rc-title">{title || "卡片標題"}</h6>
        <p className="rc-desc">{desc || "卡片描述會出現在此處。Lorem ipsum dolor sit amet."}</p>
      </div>
      {actions.length > 0 && (
        <div className="rc-actions">
          {actions.slice(0, compact ? 2 : 4).map((a, i) => (
            <button key={i}>{actionIcon(a.type, 13)} {resolveText(a.label, vars)}</button>
          ))}
        </div>
      )}
    </div>
  );
}

function QuickReplies({ replies, vars }) {
  const visible = (replies || []).filter((r) => r.label);
  if (visible.length === 0) return null;
  return (
    <div className="quick-replies">
      {visible.map((r, i) => (
        <span key={i} className="qr-chip">{actionIcon(r.type, 12)} {resolveText(r.label, vars)}</span>
      ))}
    </div>
  );
}

function PhonePreview({ state, deviceMode }) {
  const { brand, type, text, card, cards, media, replies, recipient } = state;
  const vars = {
    name: recipient.previewName || "陳小美",
    code: "TG88K",
    city: "台北",
  };

  return (
    <div className="phone">
      <div className="notch" />
      <span className="side-btn-r" /><span className="side-btn-l1" /><span className="side-btn-l2" />
      <div className="screen">
        <StatusBar />
        <ChatHeader brand={brand} />
        <div className="chat-body">
          <div className="day-stamp">今天 · Today</div>

          {/* Welcome / context bubble */}
          <div className="bubble-wrap in">
            <div className="bubble" style={{ background: "rgba(21,60,245,0.06)", color: "var(--rh-fg)" }}>
              👋 {brand.name || "品牌"} 已加入聊天室。所有訊息皆為已驗證商家發送。
              <div className="timestamp">下午 2:30</div>
            </div>
          </div>

          {/* Main payload */}
          {type === "text" && <TextBubble text={text} vars={vars} />}

          {type === "rich" && (
            <div className="bubble-wrap in">
              <RichCard card={card} vars={vars} />
            </div>
          )}

          {type === "carousel" && (
            <div className="bubble-wrap in" style={{ maxWidth: "100%" }}>
              <div className="carousel">
                {(cards || []).map((c, i) => (
                  <RichCard key={i} card={c} vars={vars} compact />
                ))}
              </div>
            </div>
          )}

          {type === "media" && (
            <div className="bubble-wrap in">
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <div style={{
                  width: 220, height: 200,
                  borderRadius: "18px 18px 18px 4px",
                  background: media.url ? `url(${MEDIA_PRESETS[media.preset] || media.url}) center/cover` : "var(--rh-bg)",
                  position: "relative",
                  display: "grid", placeItems: "center",
                  color: "var(--rh-fg-muted)", fontSize: 11, fontWeight: 700,
                  overflow: "hidden",
                }}>
                  {!media.url && "未選擇媒體 / No media"}
                  {media.kind === "video" && media.url && (
                    <div style={{
                      position: "absolute", inset: 0, display: "grid", placeItems: "center",
                      background: "rgba(0,0,0,0.2)"
                    }}>
                      <div style={{
                        width: 44, height: 44, borderRadius: "50%",
                        background: "rgba(255,255,255,0.9)",
                        display: "grid", placeItems: "center",
                      }}>
                        <div style={{
                          width: 0, height: 0,
                          borderTop: "8px solid transparent",
                          borderBottom: "8px solid transparent",
                          borderLeft: "12px solid #111",
                          marginLeft: 3,
                        }} />
                      </div>
                    </div>
                  )}
                </div>
                {(media.caption) && (
                  <div className="bubble" style={{ maxWidth: 220 }}>
                    {resolveText(media.caption, vars)}
                    <div className="timestamp">下午 2:34</div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Quick replies — shown after main content */}
          <QuickReplies replies={replies} vars={vars} />
        </div>

        <div className="compose">
          <div className="input-mock">傳送 RCS 訊息…</div>
          <div className="send-mock"><I.Send size={16} /></div>
        </div>
        <div className="home-indicator" />
      </div>
    </div>
  );
}

window.PhonePreview = PhonePreview;
window.MEDIA_PRESETS = MEDIA_PRESETS;