// Kotleto · Admin charts (custom SVG, no libs)

function RevenueChart({ accent }) {
  const { lang } = useLang();
  const data = [12, 18, 14, 22, 28, 35, 24]; // Sat..Fri
  const days = lang==="fa" ? ["ش","ی","د","س","چ","پ","ج"] : ["S","M","T","W","T","F","S"];
  const max = Math.max(...data);
  const w = 520, h = 200, padL = 30, padB = 30;
  const bw = (w - padL - 10) / data.length;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: 220 }}>
      {[0,0.25,0.5,0.75,1].map((p,i)=>(
        <line key={i} x1={padL} x2={w-10} y1={padB + p*(h-padB-10)} y2={padB + p*(h-padB-10)} stroke="rgba(255,244,226,0.08)" strokeDasharray="2 4"/>
      ))}
      {data.map((d, i) => {
        const bh = ((h - padB - 20) * d) / max;
        const x = padL + i * bw + 8;
        const y = h - padB - bh;
        return (
          <g key={i}>
            <rect x={x} y={y} width={bw - 16} height={bh} fill={`url(#bargrad)`} rx="6"/>
            <text x={x + (bw-16)/2} y={h-10} textAnchor="middle" fontSize="11" fill="rgba(255,244,226,0.5)">{days[i]}</text>
            <text x={x + (bw-16)/2} y={y - 6} textAnchor="middle" fontSize="11" fontFamily="var(--display)" fill="var(--paper)">{lang==="fa"?toFa(d):d}M</text>
          </g>
        );
      })}
      <defs>
        <linearGradient id="bargrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={accent}/>
          <stop offset="100%" stopColor={accent} stopOpacity="0.4"/>
        </linearGradient>
      </defs>
    </svg>
  );
}

function MonthChart({ accent }) {
  const data = [142, 168, 195, 178, 224, 268, 245, 290, 312, 305, 340, 360];
  const labels = ["F","M","A","M","J","J","A","S","O","N","D","J"];
  const max = Math.max(...data);
  const w = 480, h = 200, padL = 30, padB = 26;
  const stepX = (w - padL - 20) / (data.length - 1);
  const pts = data.map((d, i) => [padL + i * stepX, padB + (h - padB - 20) - ((h - padB - 20) * d) / max]);
  const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0] + " " + p[1]).join(" ");
  const area = path + ` L ${pts[pts.length-1][0]} ${h-padB} L ${pts[0][0]} ${h-padB} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: 220 }}>
      <defs>
        <linearGradient id="areag" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.4"/>
          <stop offset="100%" stopColor={accent} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} fill="url(#areag)"/>
      <path d={path} fill="none" stroke={accent} strokeWidth="2.5"/>
      {pts.map((p,i)=>(<circle key={i} cx={p[0]} cy={p[1]} r="3" fill={accent}/>))}
      {labels.map((l,i)=>(<text key={i} x={padL + i*stepX} y={h-8} textAnchor="middle" fontSize="10" fill="rgba(255,244,226,0.5)">{l}</text>))}
    </svg>
  );
}

function DonutChart({ accent }) {
  const { lang } = useLang();
  const data = [
    { label: lang==="fa"?"اپ":"App", val: 58, color: accent },
    { label: lang==="fa"?"تلفن":"Phone", val: 22, color: "#E8B14A" },
    { label: lang==="fa"?"حضوری":"In-store", val: 14, color: "#5B6B3A" },
    { label: lang==="fa"?"سایر":"Other", val: 6, color: "#9AB8E8" },
  ];
  let acc = 0;
  const arcs = data.map(d => {
    const start = (acc / 100) * 2 * Math.PI;
    acc += d.val;
    const end = (acc / 100) * 2 * Math.PI;
    return { ...d, start, end };
  });
  const r = 70, R = 90, cx = 110, cy = 110;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
      <svg width="220" height="220" viewBox="0 0 220 220">
        {arcs.map((a, i) => {
          const x1 = cx + R * Math.sin(a.start), y1 = cy - R * Math.cos(a.start);
          const x2 = cx + R * Math.sin(a.end),   y2 = cy - R * Math.cos(a.end);
          const x3 = cx + r * Math.sin(a.end),   y3 = cy - r * Math.cos(a.end);
          const x4 = cx + r * Math.sin(a.start), y4 = cy - r * Math.cos(a.start);
          const large = (a.end - a.start) > Math.PI ? 1 : 0;
          return (
            <path key={i} d={`M ${x1} ${y1} A ${R} ${R} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${r} ${r} 0 ${large} 0 ${x4} ${y4} Z`}
              fill={a.color}/>
          );
        })}
        <text x={cx} y={cy-4} textAnchor="middle" fontFamily="var(--display)" fontSize="32" fill="var(--paper)">{data[0].val}%</text>
        <text x={cx} y={cy+18} textAnchor="middle" fontSize="11" fill="rgba(255,244,226,0.5)">{data[0].label}</text>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
        {arcs.map((a, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 12, height: 12, borderRadius: 4, background: a.color }}/>
            <span style={{ fontSize: 13, flex: 1 }}>{a.label}</span>
            <span style={{ fontSize: 13, fontWeight: 700 }} className="tnum">{lang==="fa"?toFa(a.val):a.val}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeatmapChart({ accent }) {
  const { lang } = useLang();
  const days = lang==="fa" ? ["ش","ی","د","س","چ","پ","ج"] : ["S","M","T","W","T","F","S"];
  const hours = ["11","12","13","14","15","16","17","18","19","20","21","22","23"];
  // weighted matrix: lunch peak 13, dinner peak 20-21
  const matrix = days.map((_,di)=> hours.map((_,hi)=>{
    const lunch = Math.exp(-Math.pow(hi-2, 2)/2);
    const dinner = Math.exp(-Math.pow(hi-9, 2)/3);
    const weekend = di>=5 ? 1.3 : 1;
    return Math.min(1, (lunch*0.7 + dinner*1)*weekend);
  }));
  return (
    <div style={{ display: "grid", gridTemplateColumns: "30px repeat(13, 1fr)", gap: 4 }}>
      <div/>
      {hours.map(h => <div key={h} style={{ fontSize: 10, textAlign: "center", color: "rgba(255,244,226,0.4)", fontFamily: "var(--display)" }}>{lang==="fa"?toFa(h):h}</div>)}
      {days.map((d, di) => (
        <React.Fragment key={d+di}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,244,226,0.5)", display: "grid", placeItems: "center" }}>{d}</div>
          {matrix[di].map((v, hi) => (
            <div key={hi} title={`${d} ${hours[hi]}: ${(v*100).toFixed(0)}%`} style={{
              aspectRatio: "1.4 / 1", borderRadius: 4,
              background: `rgba(217,70,30,${0.08 + v*0.92})`,
              border: v > 0.85 ? "1px solid " + accent : "none",
            }}/>
          ))}
        </React.Fragment>
      ))}
    </div>
  );
}

window.RevenueChart = RevenueChart;
window.MonthChart = MonthChart;
window.DonutChart = DonutChart;
window.HeatmapChart = HeatmapChart;