/* global React, Icon, Button */

const MailPreviewPage = ({ users, onBack }) => {
  const params = new URLSearchParams(window.location.hash.split("?")[1] || "");
  const type   = params.get("type");   // "create" | "reset"
  const userId = params.get("userId");

  const user = users.find(u => u.id === userId);
  if (!user) {
    return (
      <div className="mail-page">
        <div className="mail-topbar">
          <Button variant="default" icon="chevLeft" size="sm" onClick={onBack}>返回</Button>
          <div style={{ width: 1, height: 16, background: "var(--border-1)" }} />
          <div className="mail-topbar__title">通知信模擬</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", flex: 1, color: "var(--fg-3)" }}>
          找不到對應使用者資料
        </div>
      </div>
    );
  }

  const initial = user.name.charAt(0).toUpperCase();

  const isCreate = type === "create";
  const subject  = isCreate
    ? "【DG SKU 管理系統】歡迎加入 — 請完成首次登入"
    : "【DG SKU 管理系統】密碼已重設";
  const credKey  = isCreate ? "臨時密碼" : "新臨時密碼";
  const tempPw   = user.tempPassword || "TempPw-????";

  const now = new Date();
  const stamp = now.getFullYear() + "-"
    + String(now.getMonth() + 1).padStart(2, "0") + "-"
    + String(now.getDate()).padStart(2, "0") + " "
    + String(now.getHours()).padStart(2, "0") + ":"
    + String(now.getMinutes()).padStart(2, "0");

  return (
    <div className="mail-page">
      <div className="mail-topbar">
        <Button variant="default" icon="chevLeft" size="sm" onClick={onBack}>返回</Button>
        <div style={{ width: 1, height: 16, background: "var(--border-1)" }} />
        <div className="mail-topbar__title">通知信模擬</div>
      </div>

      <div className="mail-content">
        <div className="mail-client">
          <div className="mail-client__header">
            <div className="mail-subject">{subject}</div>
            <div className="mail-meta">
              <div className="mail-meta__row">
                <span className="mail-meta__key">寄件人</span>
                <span className="mail-meta__val">
                  <span className="mail-meta__avatar">DG</span>
                  DG SKU 系統 &lt;no-reply@dg-sku.ue.com&gt;
                </span>
              </div>
              <div className="mail-meta__row">
                <span className="mail-meta__key">收件人</span>
                <span className="mail-meta__val">
                  <span className="mail-meta__avatar">{initial}</span>
                  {user.name} &lt;{user.email}&gt;
                </span>
              </div>
              <div className="mail-meta__row">
                <span className="mail-meta__key">日期</span>
                <span className="mail-meta__val" style={{ color: "var(--fg-3)" }}>{stamp}</span>
              </div>
            </div>
          </div>

          <div className="mail-client__body">
            <div className="mail-greeting">親愛的 {user.name}，</div>
            <div className="mail-intro">
              {isCreate
                ? "你的帳號已建立完成，請使用以下資訊進行首次登入："
                : "管理員已重設您的登入密碼，請使用以下資訊重新登入："
              }
            </div>

            <div className="mail-cred-box">
              <div className="mail-cred-row">
                <span className="mail-cred-key">登入帳號</span>
                <span className="mail-cred-val">{user.email}</span>
              </div>
              <div className="mail-cred-row">
                <span className="mail-cred-key">{credKey}</span>
                <span className="mail-cred-val mail-cred-val--pw">{tempPw}</span>
              </div>
            </div>

            <div className="mail-notice">
              {isCreate
                ? <>首次登入後，系統將要求您立即設定新密碼。<br />請勿與他人分享臨時密碼。</>
                : <>登入後系統將要求您立即設定新密碼。<br />如非您本人申請，請立即聯絡管理員。</>
              }
            </div>

            <button className="mail-cta" onClick={() => { window.location.hash = "#/login"; }}>
              前往登入系統
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </button>

            {!isCreate && <div className="mail-notice" style={{ marginBottom: 0 }}>如有問題，請聯絡系統管理員。</div>}
          </div>

          <div className="mail-client__footer">
            <div className="mail-system-name">DG SKU 管理系統</div>
            <div className="mail-auto-reply">此為系統自動發送，請勿直接回覆</div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { MailPreviewPage });