/* Tachiara client — Profile screen (read/write via api). */

function ProfileScreen({ me, onUserChange, onSignOut }) {
  const toast = useToast();
  const [form, setForm] = React.useState(me);
  const [dirty, setDirty] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  React.useEffect(() => { setForm(me); setDirty(false); }, [me.id, me.updatedAt]);

  const update = (k, v) => { setForm(prev => ({ ...prev, [k]: v })); setDirty(true); };

  const save = async () => {
    setSubmitting(true);
    try {
      const { user } = await window.api.users.updateMe({
        name: form.name, phone: form.phone || "",
        bankCode: form.bankCode || "", bankAccount: form.bankAccount || "",
        accountHolder: form.accountHolder || "",
      });
      onUserChange(user);
      setDirty(false);
      toast("Đã lưu");
    } catch (err) { toast(err.message); }
    finally { setSubmitting(false); }
  };

  const qrPreview = window.QC.vietQRUrl({
    bankCode: form.bankCode, accountNo: form.bankAccount, accountName: form.accountHolder,
  });

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Trang cá nhân</h1>
          <div className="page-subtitle">Cập nhật thông tin & STK để bạn bè chuyển khoản nhanh hơn.</div>
        </div>
        {dirty && (
          <Button variant="primary" icon={<I.check />} onClick={save} disabled={submitting}>
            {submitting ? "Đang lưu..." : "Lưu thay đổi"}
          </Button>
        )}
      </div>

      <div className="grid-2">
        <div className="stack stack-lg">
          <div className="card">
            <div className="section-title">Hồ sơ</div>
            <div className="row-h" style={{ gap: 16, marginBottom: 16 }}>
              <Avatar user={form} size="xl" />
              <div>
                <div className="fw-700" style={{ fontSize: 18 }}>{form.name}</div>
                <div className="text-sm text-muted">{form.email}</div>
                <div className="text-xs text-muted" style={{ marginTop: 4 }}>Avatar được tạo từ initials của bạn.</div>
              </div>
            </div>
            <div className="stack stack-md">
              <Field label="Họ tên">
                <input className="input" value={form.name || ""} onChange={e => update("name", e.target.value)} />
              </Field>
              <div className="grid-2">
                <Field label="Email" hint="Email không sửa được tại đây">
                  <input className="input" type="email" value={form.email} disabled />
                </Field>
                <Field label="Số điện thoại">
                  <input className="input" value={form.phone || ""} onChange={e => update("phone", e.target.value)} placeholder="09xx xxx xxx" />
                </Field>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="section-title">Thông tin ngân hàng</div>
            <div className="text-sm text-muted" style={{ marginBottom: 12 }}>
              Khi bạn bè cần thanh toán, app sẽ sinh QR VietQR tự động từ STK này.
            </div>
            <div className="stack stack-md">
              <Field label="Ngân hàng">
                <select className="select" value={form.bankCode || ""} onChange={e => update("bankCode", e.target.value)}>
                  <option value="">— Chọn ngân hàng —</option>
                  {window.QC.VN_BANKS.map(b => (
                    <option key={b.code} value={b.code}>{b.name} ({b.code})</option>
                  ))}
                </select>
              </Field>
              <Field label="Số tài khoản">
                <input className="input mono" value={form.bankAccount || ""}
                       onChange={e => update("bankAccount", e.target.value.replace(/\s/g, ""))}
                       placeholder="9704xxxxxxxxxxxx" />
              </Field>
              <Field label="Tên chủ tài khoản" hint="Không dấu, viết hoa — đúng như trên thẻ ngân hàng">
                <input className="input" value={form.accountHolder || ""}
                       onChange={e => update("accountHolder", e.target.value.toUpperCase())}
                       placeholder="NGUYEN VAN A" style={{ textTransform: "uppercase" }} />
              </Field>
            </div>
          </div>
        </div>

        <div className="stack stack-lg">
          <div className="card">
            <div className="section-title">QR code VietQR</div>
            {qrPreview ? (
              <div className="stack stack-md">
                <div className="qr-frame" style={{ maxWidth: "100%", margin: "0 auto" }}>
                  <img src={qrPreview} alt="VietQR" />
                </div>
                <div className="text-xs text-muted" style={{ textAlign: "center" }}>
                  Nguồn: <span className="mono">img.vietqr.io</span>
                </div>
              </div>
            ) : (
              <Empty icon={<I.qr />} title="Chưa có QR">
                Cần điền đủ ngân hàng + STK + tên chủ tài khoản để hiển thị QR.
              </Empty>
            )}
          </div>

          <div className="card">
            <div className="section-title">Phiên</div>
            <div className="row">
              <div className="activity-icon"><span className="icon"><I.user /></span></div>
              <div className="row-main">
                <div className="row-title">Đang đăng nhập</div>
                <div className="row-sub">{me.name} · {me.email}</div>
              </div>
              <button className="btn btn-danger-ghost btn-sm" onClick={onSignOut}>
                <span className="icon icon-sm"><I.logout /></span> Đăng xuất
              </button>
            </div>
            <div className="row">
              <div className="activity-icon"><span className="icon"><I.link /></span></div>
              <div className="row-main">
                <div className="row-title">API endpoint</div>
                <div className="row-sub mono" style={{ fontSize: 12 }}>{window.api.getBaseURL()}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ProfileScreen = ProfileScreen;