const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const { toastErr } = require('../../utils/ui.js');

// 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大
const W = 620;
const H = 1480;

// 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。
// 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来
function loadImage(canvas, src) {
  return new Promise((resolve) => {
    if (!src) return resolve(null);
    const img = canvas.createImage();
    img.onload = () => resolve(img);
    img.onerror = () => resolve(null);
    img.src = src;
  });
}

Page({
  data: {
    petId: '',
    card: null,
    cardImg: '',
    qrReady: false,
    saving: false,
    needPhone: false, // 没手机号：门槛，先验证才生成
    phoneRefused: false, // 用户拒绝了授权
    manualMode: false, // 手动填手机号（getPhoneNumber 唤不起时的兜底）
    manualPhone: '',
  },
  onLoad(q) {
    store
      .ready()
      .then(() => {
        const id = (q && q.id) || store.currentPetId();
        if (!id) {
          wx.showToast({ title: '先选一只毛孩子', icon: 'none' });
          return;
        }
        this.setData({ petId: id });
        return api.petIDCard(id);
      })
      .then((card) => {
        if (!card) return;
        this.setData({ card, qrReady: !!card.qr_ready });
        // 门槛：没手机号不生成，先引导用微信验证
        if (!card.phone) {
          this.setData({ needPhone: true });
          return;
        }
        // 布局要等页面渲染完 canvas 节点才拿得到，放 nextTick
        wx.nextTick(() => this.draw());
      })
      .catch((e) => toastErr(e));
  },

  draw() {
    wx.createSelectorQuery()
      .select('#idCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const node = res && res[0] && res[0].node;
        if (!node) return;
        let dpr = 2;
        try {
          dpr = (wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync()).pixelRatio || 2;
        } catch (e) {
          dpr = 2;
        }
        node.width = W * dpr;
        node.height = H * dpr;
        const ctx = node.getContext('2d');
        ctx.scale(dpr, dpr);

        const c = this.data.card || {};
        // 两张远程图都就绪再开画，否则小程序码会画不上或画一半（plan 里点过名的坑）
        Promise.all([loadImage(node, c.avatar_url), loadImage(node, c.qr_url)]).then(([avatar, qr]) => {
          this.paint(ctx, node, c, avatar, qr);
        });
      });
  },

  paint(ctx, node, c, avatar, qr) {
    ctx.clearRect(0, 0, W, H);

    // 外层留白背景
    ctx.fillStyle = '#F3EFE8';
    ctx.fillRect(0, 0, W, H);

    const pad = 30;
    const cardW = W - pad * 2;

    const fx = pad, cardW2 = cardW;

    // 顶部标题
    ctx.textAlign = 'center';
    ctx.fillStyle = '#8A5A18';
    ctx.font = '700 40px sans-serif';
    ctx.fillText('🐾 宠物身份卡 🐾', W / 2, 66);

    // ══════════ 正面卡（暖黄）══════════
    ctx.fillStyle = '#C7A36A';
    ctx.font = '22px sans-serif';
    ctx.fillText('· 正面 ·', W / 2, 116);
    const fY = 140, fH = 700;
    const gf = ctx.createLinearGradient(fx, fY, fx, fY + fH);
    gf.addColorStop(0, '#FFF7E0');
    gf.addColorStop(1, '#FFE7AE');
    this.roundRect(ctx, fx, fY, cardW2, fH, 30);
    ctx.fillStyle = gf;
    ctx.fill();
    // 爪印水印
    ctx.save();
    this.roundRect(ctx, fx, fY, cardW2, fH, 30);
    ctx.clip();
    ctx.globalAlpha = 0.07;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '150px sans-serif';
    ctx.fillText('🐾', fx + cardW2 - 90, fY + fH - 80);
    ctx.restore();
    ctx.globalAlpha = 1;
    ctx.textBaseline = 'alphabetic';

    // 卡头：左 logo，右 徽章
    ctx.textAlign = 'left';
    ctx.fillStyle = '#8A5A18';
    ctx.font = '600 26px sans-serif';
    ctx.fillText('🐱 宠星人', fx + 32, fY + 52);
    ctx.textAlign = 'right';
    ctx.fillStyle = '#B07A1E';
    ctx.font = '600 22px sans-serif';
    ctx.fillText('🛡 宠物身份卡', fx + cardW2 - 32, fY + 50);

    // 头像圆 + 白边
    const avD = 150, avX = fx + 36, avY = fY + 90;
    ctx.save();
    ctx.beginPath();
    ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
    ctx.clip();
    if (avatar) {
      const iw = avatar.width || avD, ih = avatar.height || avD, side = Math.min(iw, ih);
      ctx.drawImage(avatar, (iw - side) / 2, (ih - side) / 2, side, side, avX, avY, avD, avD);
    } else {
      ctx.fillStyle = '#FFD9A3';
      ctx.fillRect(avX, avY, avD, avD);
      ctx.fillStyle = '#8A5A18';
      ctx.font = '64px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(c.species === '狗狗' ? '🐶' : '🐱', avX + avD / 2, avY + avD / 2);
    }
    ctx.restore();
    ctx.textBaseline = 'alphabetic';
    ctx.beginPath();
    ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 8;
    ctx.stroke();

    // 名字 + 性别（头像右侧）
    const nx = avX + avD + 28;
    ctx.textAlign = 'left';
    ctx.fillStyle = '#2D2925';
    ctx.font = '700 52px sans-serif';
    ctx.fillText(c.name || '毛孩子', nx, avY + 44);
    if (c.gender) {
      ctx.fillStyle = c.gender === '女孩' ? '#E86A9B' : '#5B9BE8';
      ctx.font = '30px sans-serif';
      ctx.fillText(c.gender === '女孩' ? '♀' : '♂', nx + ctx.measureText(c.name || '毛孩子').width + 12, avY + 44);
    }
    // 头像右的资料行
    const kvF = (label, value, yy) => {
      ctx.textAlign = 'left';
      ctx.font = '24px sans-serif';
      ctx.fillStyle = '#A98C5A';
      ctx.fillText(label, nx, yy);
      ctx.fillStyle = '#3D3427';
      ctx.font = '600 26px sans-serif';
      ctx.fillText(value || '—', nx + 78, yy);
    };
    kvF('性别', c.gender, avY + 92);
    kvF('品种', c.breed, avY + 130);
    kvF('毛色', c.color, avY + 168);
    kvF('年龄', c.age, avY + 206);

    // 性格标签
    let ty = avY + avD + 34;
    ctx.textAlign = 'left';
    ctx.fillStyle = '#8A5A18';
    ctx.font = '600 24px sans-serif';
    ctx.fillText('🐾 性格标签', fx + 34, ty);
    const tags = (c.personality || '').split(',').filter(Boolean);
    const tagColors = [['#FFE7A8', '#8A5A18'], ['#D6E9FF', '#2E6DA8'], ['#FFD9DE', '#C24A63']];
    let tx = fx + 34;
    ty += 42;
    tags.forEach((t, i) => {
      ctx.font = '23px sans-serif';
      const tw = ctx.measureText(t).width + 32;
      const col = tagColors[i % tagColors.length];
      ctx.fillStyle = col[0];
      this.roundRect(ctx, tx, ty - 28, tw, 40, 20);
      ctx.fill();
      ctx.fillStyle = col[1];
      ctx.textAlign = 'left';
      ctx.fillText(t, tx + 16, ty);
      tx += tw + 14;
    });

    // 介绍 quote
    if (c.intro) {
      const qy = ty + 30;
      ctx.fillStyle = 'rgba(255,255,255,.6)';
      this.roundRect(ctx, fx + 34, qy, cardW2 - 68, 60, 16);
      ctx.fill();
      ctx.fillStyle = '#7A5A2E';
      ctx.font = '25px sans-serif';
      ctx.textAlign = 'left';
      ctx.fillText('“ ' + c.intro + ' ”', fx + 54, qy + 40);
    }

    // 底部：身份ID + 一起生活天数
    ctx.textAlign = 'left';
    ctx.fillStyle = '#9C7A3E';
    ctx.font = '22px sans-serif';
    ctx.fillText('物ID  ' + (c.id_no || ''), fx + 34, fY + fH - 60);
    if (c.days > 0) {
      ctx.fillText('和主人一起生活的第 ' + c.days + ' 天', fx + 34, fY + fH - 26);
    }

    // ══════════ 背面卡（白 + 蓝）══════════
    const bY = fY + fH + 46, bH = 620;
    ctx.textAlign = 'center';
    ctx.fillStyle = '#C7A36A';
    ctx.font = '22px sans-serif';
    ctx.fillText('· 背面 ·', W / 2, bY - 16);
    this.roundRect(ctx, fx, bY, cardW2, bH, 30);
    ctx.fillStyle = '#FFFFFF';
    ctx.fill();

    // 蓝色标题条
    const hb = 64;
    const gb = ctx.createLinearGradient(fx, bY, fx + cardW2, bY);
    gb.addColorStop(0, '#5AA0E8');
    gb.addColorStop(1, '#7FB6F0');
    this.roundRect(ctx, fx + 24, bY + 24, cardW2 - 48, hb, 18);
    ctx.fillStyle = gb;
    ctx.fill();
    ctx.textAlign = 'center';
    ctx.fillStyle = '#fff';
    ctx.font = '700 28px sans-serif';
    ctx.fillText('🌿 照护信息', W / 2, bY + 24 + 42);

    // 照护行（emoji 图标 + 标签 + 值）
    const rowX = fx + 40;
    const kvB = (icon, label, value, yy) => {
      ctx.textAlign = 'left';
      ctx.font = '26px sans-serif';
      ctx.fillText(icon, rowX, yy);
      ctx.font = '24px sans-serif';
      ctx.fillStyle = '#8D8277';
      ctx.fillText(label, rowX + 44, yy);
      ctx.font = '600 25px sans-serif';
      ctx.fillStyle = '#2D2925';
      ctx.fillText(value || '—', rowX + 170, yy);
    };
    let ry = bY + 140;
    kvB('👤', '主人', c.owner, ry); ry += 46;
    kvB('📞', '联系电话', c.phone || '未验证', ry); ry += 46;
    kvB('💉', '疫苗情况', c.vaccine_state, ry); ry += 46;
    kvB('📝', '备注', c.notes || '无', ry); ry += 46;
    kvB('🏛', '发证机构', c.org || '肉垫计划', ry); ry += 46;
    kvB('📅', '有效期', c.validity || '永久有效', ry); ry += 40;

    // 走失联系框 + 小程序码
    const lostY = ry + 16, lostH = bY + bH - lostY - 30;
    this.roundRect(ctx, fx + 24, lostY, cardW2 - 48, lostH, 18);
    ctx.fillStyle = '#EAF3FE';
    ctx.fill();
    ctx.textAlign = 'left';
    ctx.fillStyle = '#2E6DA8';
    ctx.font = '600 25px sans-serif';
    ctx.fillText('🔔 走失时请联系主人', fx + 44, lostY + 44);
    ctx.fillStyle = '#5B7A9C';
    ctx.font = '21px sans-serif';
    ctx.fillText('微信扫一扫，查看' + (c.name || '') + '的身份信息', fx + 44, lostY + 84);
    ctx.fillText('或联系主人', fx + 44, lostY + 114);
    // 小程序码
    const qrD = 118, qrX = fx + cardW2 - 24 - 20 - qrD, qrY = lostY + (lostH - qrD) / 2;
    ctx.fillStyle = '#fff';
    this.roundRect(ctx, qrX, qrY, qrD, qrD, 12);
    ctx.fill();
    if (qr) {
      ctx.drawImage(qr, qrX + 8, qrY + 8, qrD - 16, qrD - 16);
    } else {
      ctx.fillStyle = '#9CB4CC';
      ctx.font = '18px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 2);
      ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 24);
    }

    wx.canvasToTempFilePath(
      {
        canvas: node,
        fileType: 'png',
        success: (r) => this.setData({ cardImg: r.tempFilePath }),
        fail: () => wx.showToast({ title: '生成失败，稍后再试', icon: 'none' }),
      },
      this,
    );
  },

  roundRect(ctx, x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
  },

  // 微信取手机号：新版 getPhoneNumber 返回动态 code，后端换成真实手机号存库，
  // 拿回后重新取卡（此时电话就有了）并重画
  onGetPhone(e) {
    const d = e.detail || {};
    if (!d.code) {
      // 用户拒绝授权：不给生成，明确提示
      this.setData({ phoneRefused: true });
      return wx.showToast({ title: '没有手机号，无法生成身份卡', icon: 'none' });
    }
    wx.showLoading({ title: '验证中…', mask: true });
    api
      .bindPhone(d.code)
      .then(() => api.petIDCard(this.data.petId))
      .then((card) => {
        wx.hideLoading();
        if (!card) return;
        this.setData({ card, qrReady: !!card.qr_ready, needPhone: false, phoneRefused: false });
        wx.nextTick(() => this.draw());
        wx.showToast({ title: '手机号已验证', icon: 'success' });
      })
      .catch((err) => {
        wx.hideLoading();
        toastErr(err, '验证失败');
      });
  },

  // 手动填手机号兜底（getPhoneNumber 需企业认证，唤不起时用这个）
  showManual() {
    this.setData({ manualMode: true });
  },
  onManualPhone(e) {
    this.setData({ manualPhone: e.detail.value });
  },
  submitManual() {
    const p = (this.data.manualPhone || '').trim();
    if (!/^1\d{10}$/.test(p)) return wx.showToast({ title: '手机号格式不对', icon: 'none' });
    wx.showLoading({ title: '保存中…', mask: true });
    api
      .updateProfile({ phone: p })
      .then(() => api.petIDCard(this.data.petId))
      .then((card) => {
        wx.hideLoading();
        if (!card) return;
        this.setData({ card, qrReady: !!card.qr_ready, needPhone: false, manualMode: false });
        wx.nextTick(() => this.draw());
      })
      .catch((err) => {
        wx.hideLoading();
        toastErr(err, '保存失败');
      });
  },

  onSave() {
    if (!this.data.cardImg) return wx.showToast({ title: '还在生成，稍等一下', icon: 'none' });
    if (this.data.saving) return;
    this.setData({ saving: true });
    wx.saveImageToPhotosAlbum({
      filePath: this.data.cardImg,
      success: () => wx.showToast({ title: '已保存到相册', icon: 'success' }),
      fail: (err) => {
        const msg = (err && err.errMsg) || '';
        if (msg.indexOf('cancel') >= 0) return;
        // 拒过一次后 authorize 不再弹，必须引导去设置页
        if (msg.indexOf('auth deny') >= 0 || msg.indexOf('authorize') >= 0) {
          wx.showModal({
            title: '需要相册权限',
            content: '保存身份卡需要允许访问相册，去设置里打开一下？',
            confirmText: '去设置',
            success: (r) => r.confirm && wx.openSetting({}),
          });
          return;
        }
        wx.showToast({ title: '保存失败', icon: 'none' });
      },
      complete: () => this.setData({ saving: false }),
    });
  },

  onShareAppMessage() {
    const c = this.data.card || {};
    return {
      title: `${c.name || '我家毛孩子'} 的居民身份卡`,
      path: '/pages/idcard/idcard?id=' + this.data.petId,
      imageUrl: this.data.cardImg || '', // 用画好的卡当分享封面
    };
  },
});