// Chart primitives for the KIS dashboard — Streamlit home_view.py 1:1 port to mobile.
// All charts: SVG, dark-mode native, KRX colors (red↑ blue↓), no external libs.
//
// All three charts (ValueChart, GainChart, PLBarsChart) share a tap-tooltip
// pattern: the user touches the chart and a small floating card shows the
// value at that point. Used to be always-on text labels (which overlapped
// with 12+ months on the bar chart) — replaced everywhere per user request.
//
//   <ValueChart series>   — 3 lines: invested (blue), cost basis (orange dotted), market value (red)
//   <GainChart series>    — gain ₩ (red) + margin % (purple dotted), dual axis, ₩0/0% baseline
//   <PLBarsChart data>    — monthly or yearly delta bars, red↑ blue↓
//   <PeriodToggle ...>    — segmented control [1주 1달 3달 6달 1년]
//
// All accept a `height` prop. Width auto-fits container via viewBox + preserveAspectRatio.

const { useState, useMemo, useRef, useCallback } = React;

// ─── shared y-axis tick generator ─────────────────────────────
function niceTicks(min, max, count = 4) {
  if (max === min) { max = min + 1; }
  const range = max - min;
  const rough = range / (count - 1);
  const pow = Math.pow(10, Math.floor(Math.log10(rough)));
  const norm = rough / pow;
  let step;
  if (norm < 1.5) step = 1 * pow;
  else if (norm < 3) step = 2 * pow;
  else if (norm < 7) step = 5 * pow;
  else step = 10 * pow;
  const lo = Math.floor(min / step) * step;
  const hi = Math.ceil(max / step) * step;
  const ticks = [];
  for (let v = lo; v <= hi + step / 2; v += step) ticks.push(v);
  return ticks;
}

function fmtKRWAxis(v) {
  const abs = Math.abs(v);
  if (abs >= 1e8)  return `${(v/1e8).toFixed(abs >= 1e9 ? 0 : 1)}억`;
  if (abs >= 1e4)  return `${Math.round(v/1e4)}만`;
  return v.toLocaleString();
}

// Full-precision KRW for tooltips — every won shown with thousands separators.
// (Axis labels stay abbreviated via fmtKRWAxis to avoid overflow; tooltips are
// where the user taps for the exact figure.)
function fmtKRWFull(v) {
  return Math.round(v).toLocaleString();
}

// X-axis date helpers. Prefer the backend's REAL per-anchor dates
// (dateSeries[period], ISO "YYYY-MM-DD") — the series are NOT one-point-per-
// calendar-day; the backend spreads n points evenly across the actual data
// span, so synthesizing dates from "generatedAt − k days" was wrong (off after
// weekends, wildly wrong for accounts younger than the period). Fall back to
// that synthesis only when dates are absent (old payloads / empty data).
function makeDateFns(dates, n, period, generatedAt) {
  const hasDates = Array.isArray(dates) && dates.length === n && n > 0;
  const isoAtIdx = (i) => {
    if (hasDates) return dates[i];
    const base = generatedAt ? new Date(generatedAt) : new Date();
    base.setDate(base.getDate() - (n - 1 - i));
    return `${base.getFullYear()}-${String(base.getMonth() + 1).padStart(2, "0")}-${String(base.getDate()).padStart(2, "0")}`;
  };
  const short = (iso) => {
    if (!iso) return "";
    const p = iso.split("-");
    return (period === "1w" || period === "1m") ? `${+p[1]}/${+p[2]}` : `${p[0].slice(2)}.${p[1]}`;
  };
  const full = (iso) => (iso ? iso.replace(/-/g, ".") : "");
  return { isoAtIdx, short, full };
}

// ─── Tap-tooltip hook ─────────────────────────────────────────
// Computes the nearest data index from a pointer x (touch or mouse) and
// returns: [idx, handlers, clear]. Pass `n` = data length.
//
// The chart renders <div style="position:relative"> wrapping the SVG plus
// the tooltip. handlers spread onto the wrapper. The tooltip stays
// visible until the user pans off the chart (or moves to another point).
function useChartTip(n) {
  const [idx, setIdx] = useState(null);
  const update = useCallback((e) => {
    const wrap = e.currentTarget;
    const rect = wrap.getBoundingClientRect();
    const cx = e.touches && e.touches.length
      ? e.touches[0].clientX
      : (e.clientX != null ? e.clientX : null);
    if (cx == null) return;
    const frac = Math.max(0, Math.min(1, (cx - rect.left) / Math.max(1, rect.width)));
    const i = Math.min(n - 1, Math.max(0, Math.round(frac * (n - 1))));
    setIdx(i);
  }, [n]);
  const handlers = useMemo(() => ({
    onTouchStart: update, onTouchMove: update,
    onMouseDown: update, onMouseMove: (e) => { if (e.buttons) update(e); },
    onMouseLeave: () => setIdx(null),
    onTouchEnd: () => { /* keep showing for the last touched point */ },
  }), [update]);
  return [idx, handlers, () => setIdx(null)];
}

// ─── Floating tooltip card ────────────────────────────────────
// Positioned absolutely inside the chart wrapper. `xPct` is the horizontal
// position (0-100) and `top` is a CSS top in px. Auto-clamps so it doesn't
// hang off the right edge of narrow phone screens.
function ChartTip({ xPct, top, label, lines }) {
  if (xPct == null) return null;
  // Clamp so the tooltip box stays within the chart bounds.
  const left = Math.max(2, Math.min(98, xPct));
  return (
    <div style={{
      position: "absolute",
      left: `${left}%`, top: top != null ? top : 4,
      transform: `translateX(-${left > 60 ? 100 : (left < 30 ? 0 : 50)}%)`,
      background: "var(--surface-elevated)",
      border: "1px solid var(--border)",
      borderRadius: 8,
      padding: "6px 10px",
      pointerEvents: "none",
      whiteSpace: "nowrap",
      zIndex: 5,
      boxShadow: "0 4px 14px rgba(25,31,40,0.12)",
      fontFamily: "var(--font-num)",
    }}>
      {label && (
        <div style={{ color: "var(--fg-tertiary)", fontSize: 10, fontWeight: 600,
                      letterSpacing: "0.04em", marginBottom: 2 }}>{label}</div>
      )}
      {lines.map((ln, i) => (
        <div key={i} style={{ color: ln.color || "var(--fg)",
                              fontSize: 12, fontWeight: 700, lineHeight: 1.3 }}>
          {ln.text}
        </div>
      ))}
    </div>
  );
}

// ─── Period toggle (1주/1달/3달/6달/1년) ─────────────────────────────
function PeriodToggle({ value, onChange, periods = ["1w", "1m", "3m", "6m", "1y"] }) {
  const labels = { "1w": "1주", "1m": "1달", "3m": "3달", "6m": "6달", "1y": "1년" };
  return (
    <div style={{ display: "flex", gap: 4, padding: "4px", background: "var(--surface-elevated)", borderRadius: 12 }}>
      {periods.map(p => (
        <button key={p} onClick={() => onChange(p)} style={{
          flex: 1, padding: "6px 0", borderRadius: 9, border: "none",
          background: value === p ? "#ffffff" : "transparent",
          boxShadow: value === p ? "0 1px 3px rgba(25,31,40,0.10)" : "none",
          color: value === p ? "var(--fg)" : "var(--fg-tertiary)",
          fontSize: 12, fontWeight: 700, cursor: "pointer",
          fontFamily: "inherit", transition: "background 0.18s",
        }}>{labels[p] || p}</button>
      ))}
    </div>
  );
}

// ─── ValueChart: 3-line value vs invested vs cost basis ─────────────
//   red    = market value (the "answer")
//   blue   = net invested
//   orange = cost basis of currently-held shares
function ValueChart({ valueSeries, costSeries, investedSeries, period, dates, generatedAt, height = 200 }) {
  const w = 320, h = height, padL = 4, padR = 4, padT = 16, padB = 38;
  const inner = { x: padL, y: padT, w: w - padL - padR, h: h - padT - padB };

  const n = (valueSeries || []).length;
  const [tipIdx, tipHandlers] = useChartTip(n);

  // Real per-anchor dates from the backend (dateSeries[period]); fall back to
  // generatedAt synthesis only if absent.
  const { isoAtIdx, short: fmtDateShort, full: fmtDateFull } = makeDateFns(dates, n, period, generatedAt);

  if (!valueSeries || n === 0) {
    return (
      <div style={{ height, display: "flex", alignItems: "center",
                    justifyContent: "center", color: "var(--fg-tertiary)",
                    fontSize: 13 }}>자산 데이터 없음</div>
    );
  }
  const all = [...valueSeries, ...(costSeries || []), ...(investedSeries || [])];
  const min = Math.min(...all);
  const max = Math.max(...all);
  const ticks = niceTicks(min, max, 3);
  const yMin = Math.min(min, ticks[0]);
  const yMax = Math.max(max, ticks[ticks.length - 1]);

  const xAt = (i, len) => inner.x + (i / Math.max(1, len - 1)) * inner.w;
  const yAt = (v) => inner.y + (1 - (v - yMin) / Math.max(1, yMax - yMin)) * inner.h;

  const path = (arr) => arr.map((v, i) =>
    `${i === 0 ? "M" : "L"}${xAt(i, arr.length).toFixed(2)} ${yAt(v).toFixed(2)}`
  ).join(" ");
  const areaPath = `${path(valueSeries)} L${xAt(n - 1, n).toFixed(2)} ${yAt(yMin).toFixed(2)} L${xAt(0, n).toFixed(2)} ${yAt(yMin).toFixed(2)} Z`;

  const lastV = valueSeries[n - 1];
  const tipXPct = tipIdx != null ? (xAt(tipIdx, n) / w) * 100 : null;

  return (
    <div style={{ position: "relative", width: "100%" }} {...tipHandlers}>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ display: "block" }}>
        <defs>
          <linearGradient id="vc-area" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="var(--up)" stopOpacity="0.28" />
            <stop offset="100%" stopColor="var(--up)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {ticks.map(t => (
          <g key={t}>
            <line x1={inner.x} x2={inner.x + inner.w} y1={yAt(t)} y2={yAt(t)} stroke="var(--border)" strokeDasharray="2 4" />
            <text x={w - padR} y={yAt(t) - 3} fill="var(--fg-tertiary)" fontSize="9" textAnchor="end">{fmtKRWAxis(t)}</text>
          </g>
        ))}
        <path d={areaPath} fill="url(#vc-area)" />
        {investedSeries && (
          <path d={path(investedSeries)} stroke="var(--down)" strokeWidth="1.4" fill="none" opacity="0.85" />
        )}
        {costSeries && (
          <path d={path(costSeries)} stroke="var(--amber)" strokeWidth="1.4" fill="none" strokeDasharray="3 3" opacity="0.95" />
        )}
        <path d={path(valueSeries)} stroke="var(--up)" strokeWidth="2.4" fill="none" strokeLinejoin="round" strokeLinecap="round" />
        <circle cx={xAt(n - 1, n)} cy={yAt(lastV)} r="3.5" fill="var(--up)" />

        {/* Tap indicator: vertical line + dot at touched x. */}
        {tipIdx != null && (
          <>
            <line x1={xAt(tipIdx, n)} x2={xAt(tipIdx, n)} y1={inner.y} y2={inner.y + inner.h}
                  stroke="var(--fg)" strokeOpacity="0.5" strokeDasharray="2 2" />
            <circle cx={xAt(tipIdx, n)} cy={yAt(valueSeries[tipIdx])} r="3.5" fill="var(--up)" stroke="var(--bg)" strokeWidth="1.5" />
          </>
        )}

        {/* X-axis date labels: 4 ticks evenly spaced including start and end */}
        {n >= 2 && (() => {
          const tickCount = 4;
          const ticks = [];
          for (let k = 0; k < tickCount; k++) {
            const idx = Math.round((k * (n - 1)) / (tickCount - 1));
            const x = xAt(idx, n);
            const anchor = k === 0 ? "start" : k === tickCount - 1 ? "end" : "middle";
            ticks.push(
              <text key={idx} x={x} y={inner.y + inner.h + 12}
                    fontSize="9" fill="var(--fg-tertiary)" textAnchor={anchor}>
                {fmtDateShort(isoAtIdx(idx))}
              </text>
            );
          }
          return ticks;
        })()}

        <g transform={`translate(${padL + 4}, ${h - 4})`} fontSize="10" fill="var(--fg-secondary)">
          <g><rect x="0" y="-8" width="10" height="2" fill="var(--up)" /><text x="14" y="-5">시가</text></g>
          <g transform="translate(54, 0)"><rect x="0" y="-8" width="10" height="2" fill="var(--amber)" opacity="0.95" /><text x="14" y="-5">원가</text></g>
          <g transform="translate(108, 0)"><rect x="0" y="-8" width="10" height="2" fill="var(--down)" opacity="0.85" /><text x="14" y="-5">투입</text></g>
        </g>
      </svg>
      {tipIdx != null && (
        <ChartTip xPct={tipXPct} top={4}
          label={fmtDateFull(isoAtIdx(tipIdx))}
          lines={[
            { text: `시가 ₩${fmtKRWFull(valueSeries[tipIdx])}`, color: "var(--up)" },
            costSeries && costSeries[tipIdx] != null
              ? { text: `원가 ₩${fmtKRWFull(costSeries[tipIdx])}`, color: "var(--amber)" } : null,
            investedSeries && investedSeries[tipIdx] != null
              ? { text: `투입 ₩${fmtKRWFull(investedSeries[tipIdx])}`, color: "var(--down)" } : null,
          ].filter(Boolean)} />
      )}
    </div>
  );
}

// ─── GainChart: gain ₩ + margin % dual axis ─────────────
function GainChart({ gainSeries, marginSeries, period, dates, generatedAt, height = 180 }) {
  const w = 320, h = height, padL = 4, padR = 4, padT = 14, padB = 38;
  const inner = { x: padL, y: padT, w: w - padL - padR, h: h - padT - padB };

  const n = (gainSeries || []).length;
  const [tipIdx, tipHandlers] = useChartTip(n);

  const { isoAtIdx, short: fmtDateShort, full: fmtDateFull } = makeDateFns(dates, n, period, generatedAt);

  if (!gainSeries || n === 0) {
    return (
      <div style={{ height, display: "flex", alignItems: "center",
                    justifyContent: "center", color: "var(--fg-tertiary)",
                    fontSize: 13 }}>이익 데이터 없음</div>
    );
  }

  const gMin = Math.min(0, ...gainSeries);
  const gMax = Math.max(0, ...gainSeries);
  const mMin = Math.min(0, ...marginSeries) / 100;
  const mMax = Math.max(0, ...marginSeries) / 100;

  function aligned(lo, hi, otherLo, otherHi) {
    const lFrac = hi > lo ? (-lo / (hi - lo)) : 0.5;
    const rFrac = otherHi > otherLo ? (-otherLo / (otherHi - otherLo)) : 0.5;
    const zf = Math.min(0.95, Math.max(0.05, Math.max(lFrac, rFrac)));
    const span = Math.max(hi / Math.max(1e-9, 1 - zf), -lo / Math.max(1e-9, zf));
    return [-span * zf, span * (1 - zf)];
  }
  const [gLo, gHi] = aligned(gMin, gMax, mMin, mMax);
  const [mLo, mHi] = aligned(mMin, mMax, gMin, gMax);

  const yAtG = (v) => inner.y + (1 - (v - gLo) / Math.max(1, gHi - gLo)) * inner.h;
  const yAtM = (v) => inner.y + (1 - (v - mLo) / Math.max(0.0001, mHi - mLo)) * inner.h;
  const xAt = (i, len) => inner.x + (i / Math.max(1, len - 1)) * inner.w;

  const pathG = gainSeries.map((v, i) => `${i === 0 ? "M" : "L"}${xAt(i, n).toFixed(2)} ${yAtG(v).toFixed(2)}`).join(" ");
  const pathM = marginSeries.map((v, i) => `${i === 0 ? "M" : "L"}${xAt(i, n).toFixed(2)} ${yAtM(v / 100).toFixed(2)}`).join(" ");
  const zeroY = yAtG(0);
  const tipXPct = tipIdx != null ? (xAt(tipIdx, n) / w) * 100 : null;

  return (
    <div style={{ position: "relative", width: "100%" }} {...tipHandlers}>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ display: "block" }}>
        <line x1={inner.x} x2={inner.x + inner.w} y1={zeroY} y2={zeroY} stroke="var(--fg-tertiary)" strokeDasharray="2 3" opacity="0.5" />
        {/* '0' annotation on the shared baseline so a mid-height point is mappable. */}
        <text x={padL + 2} y={zeroY - 2} fill="var(--fg-tertiary)" fontSize="8">0</text>
        <path d={pathG} stroke="var(--up)" strokeWidth="2.2" fill="none" strokeLinejoin="round" />
        <path d={pathM} stroke="var(--purple)" strokeWidth="2" fill="none" strokeDasharray="3 3" />
        <circle cx={xAt(n - 1, n)} cy={yAtG(gainSeries[n - 1])} r="3" fill="var(--up)" />
        <circle cx={xAt(n - 1, n)} cy={yAtM(marginSeries[n - 1] / 100)} r="3" fill="var(--purple)" />

        <text x={padL + 2} y={padT + 8} fill="var(--up)" fontSize="9" fontWeight="700">이익 ₩</text>
        <text x={w - padR - 2} y={padT + 8} fill="var(--purple)" fontSize="9" fontWeight="700" textAnchor="end">마진 %</text>
        {/* top = max, just above baseline = min, so both axes have two refs. */}
        <text x={padL + 2} y={padT + 18} fill="var(--fg-tertiary)" fontSize="8">{fmtKRWAxis(gMax)}</text>
        <text x={w - padR - 2} y={padT + 18} fill="var(--fg-tertiary)" fontSize="8" textAnchor="end">{(mMax).toFixed(1)}%</text>
        {gMin < 0 && (
          <text x={padL + 2} y={inner.y + inner.h - 2} fill="var(--fg-tertiary)" fontSize="8">{fmtKRWAxis(gMin)}</text>
        )}
        {mMin < 0 && (
          <text x={w - padR - 2} y={inner.y + inner.h - 2} fill="var(--fg-tertiary)" fontSize="8" textAnchor="end">{(mMin * 100).toFixed(1)}%</text>
        )}

        {tipIdx != null && (
          <>
            <line x1={xAt(tipIdx, n)} x2={xAt(tipIdx, n)} y1={inner.y} y2={inner.y + inner.h}
                  stroke="var(--fg)" strokeOpacity="0.5" strokeDasharray="2 2" />
            <circle cx={xAt(tipIdx, n)} cy={yAtG(gainSeries[tipIdx])} r="3" fill="var(--up)" stroke="var(--bg)" strokeWidth="1.5" />
            <circle cx={xAt(tipIdx, n)} cy={yAtM(marginSeries[tipIdx] / 100)} r="3" fill="var(--purple)" stroke="var(--bg)" strokeWidth="1.5" />
          </>
        )}

        {/* X-axis date labels: 4 ticks evenly spaced */}
        {n >= 2 && (() => {
          const tickCount = 4;
          const ticks = [];
          for (let k = 0; k < tickCount; k++) {
            const idx = Math.round((k * (n - 1)) / (tickCount - 1));
            const x = xAt(idx, n);
            const anchor = k === 0 ? "start" : k === tickCount - 1 ? "end" : "middle";
            ticks.push(
              <text key={idx} x={x} y={inner.y + inner.h + 12}
                    fontSize="9" fill="var(--fg-tertiary)" textAnchor={anchor}>
                {fmtDateShort(isoAtIdx(idx))}
              </text>
            );
          }
          return ticks;
        })()}

        <g transform={`translate(${padL + 4}, ${h - 4})`} fontSize="10" fill="var(--fg-secondary)">
          <g><rect x="0" y="-8" width="10" height="2" fill="var(--up)" /><text x="14" y="-5">총수익</text></g>
          <g transform="translate(72, 0)"><rect x="0" y="-8" width="10" height="2" fill="var(--purple)" /><text x="14" y="-5">수익률</text></g>
        </g>
      </svg>
      {tipIdx != null && (
        <ChartTip xPct={tipXPct} top={4}
          label={fmtDateFull(isoAtIdx(tipIdx))}
          lines={[
            { text: `이익 ₩${fmtKRWFull(gainSeries[tipIdx])}`, color: "var(--up)" },
            { text: `마진 ${(marginSeries[tipIdx] / 100).toFixed(2)}%`, color: "var(--purple)" },
          ]} />
      )}
    </div>
  );
}

// ─── PLBarsChart: monthly/yearly delta bars (red↑ blue↓) ─────────────
// Tap a bar → tooltip with the period label and ₩ value. Bar value labels
// removed (used to overlap with 12+ months).
function PLBarsChart({ data, xKey, valueKey = "value", height = 160, labelFmt }) {
  const n = (data || []).length;
  const [tipIdx, tipHandlers] = useChartTip(n);

  if (!data || n === 0) {
    return (
      <div style={{ height, display: "flex", alignItems: "center",
                    justifyContent: "center", color: "var(--fg-tertiary)",
                    fontSize: 13 }}>P/L 내역 없음</div>
    );
  }
  const w = 320, h = height, padL = 28, padR = 8, padT = 12, padB = 28;
  const inner = { x: padL, y: padT, w: w - padL - padR, h: h - padT - padB };

  const vals = data.map(d => d[valueKey]);
  const min = Math.min(0, ...vals);
  const max = Math.max(0, ...vals);
  const ticks = niceTicks(min, max, 3);
  const yMin = Math.min(min, ticks[0]);
  const yMax = Math.max(max, ticks[ticks.length - 1]);

  const xAt = (i) => inner.x + (i + 0.5) * (inner.w / n);
  const yAt = (v) => inner.y + (1 - (v - yMin) / Math.max(1, yMax - yMin)) * inner.h;
  const zeroY = yAt(0);
  const barW = (inner.w / n) * 0.7;

  // Thin x-axis labels when there are many bars: target ~6 visible labels
  // so 12 months don't overlap. The tooltip has the full label.
  const labelStride = Math.max(1, Math.ceil(n / 6));

  const tipXPct = tipIdx != null ? (xAt(tipIdx) / w) * 100 : null;

  return (
    <div style={{ position: "relative", width: "100%" }} {...tipHandlers}>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ display: "block" }}>
        {/* Y gridlines */}
        {ticks.map(t => (
          <g key={t}>
            <line x1={inner.x} x2={inner.x + inner.w}
                  y1={yAt(t)} y2={yAt(t)}
                  stroke="var(--border)" strokeDasharray="2 4"
                  opacity={t === 0 ? 0.85 : 0.4} />
            <text x={padL - 4} y={yAt(t) + 3} fill="var(--fg-tertiary)" fontSize="9" textAnchor="end">
              {fmtKRWAxis(t)}
            </text>
          </g>
        ))}

        {data.map((d, i) => {
          const v = d[valueKey];
          const cx = xAt(i);
          const y = yAt(v);
          const isPos = v >= 0;
          const isHi = i === tipIdx;
          return (
            <g key={d[xKey]}>
              <rect
                x={cx - barW / 2} y={Math.min(y, zeroY)}
                width={barW} height={Math.max(1, Math.abs(y - zeroY))}
                fill={isPos ? "var(--up)" : "var(--down)"} rx="2"
                opacity={tipIdx == null ? 1 : (isHi ? 1 : 0.45)}
              />
              {/* X-axis tick — show only every labelStride'th to avoid overlap.
                  Always show first + last for context. */}
              {(i % labelStride === 0 || i === n - 1) && (
                <text x={cx} y={h - 10} fill="var(--fg-tertiary)" fontSize="9" textAnchor="middle">
                  {xKey === "month" ? d[xKey].slice(5) : d[xKey]}
                </text>
              )}
            </g>
          );
        })}
      </svg>
      {tipIdx != null && (
        <ChartTip xPct={tipXPct} top={4}
          label={data[tipIdx][xKey]}
          lines={[{
            text: (labelFmt ? labelFmt(data[tipIdx][valueKey])
                            : `${data[tipIdx][valueKey] >= 0 ? "+" : "−"}₩${fmtKRWFull(Math.abs(data[tipIdx][valueKey]))}`),
            color: data[tipIdx][valueKey] >= 0 ? "var(--up)" : "var(--down)",
          }]} />
      )}
    </div>
  );
}

Object.assign(window, { ValueChart, GainChart, PLBarsChart, PeriodToggle, niceTicks, fmtKRWAxis, fmtKRWFull });