// KPI Kartları + Grafik bileşenleri — NEXOR · İzmir Ana Tesis · Tri-Utility

// ── KPI Kartları ──────────────────────────────────────────────────────────

const KPI_DATA = [
  // Elektrik
  { id: 'elec',     label: 'Elektrik Tüketimi',     value: '38.240', unit: 'kWh',   trend: 'Düne göre +%8,2', trendUp: true,  icon: 'zap',      color: 'var(--accent)' },
  { id: 'demand',   label: 'Anlık Talep',            value: '1.682',  unit: 'kW',    trend: 'Normal aralık',   trendUp: null,  icon: 'activity', color: 'var(--signal-ok)' },
  { id: 'pf',       label: 'Güç Faktörü (Cos φ)',   value: '0,89',   unit: '',      trend: 'İzlenmeli',       trendUp: null,  icon: 'activity', color: 'var(--signal-warn)' },
  // Doğal Gaz
  { id: 'gas',      label: 'Doğal Gaz Tüketimi',    value: '4.210',  unit: 'Sm³',   trend: 'Stabil',          trendUp: null,  icon: 'energy',   color: '#D97706' },
  { id: 'gasflow',  label: 'Anlık Gaz Debisi',      value: '185',    unit: 'Sm³/h', trend: 'Normal',          trendUp: null,  icon: 'activity', color: '#D97706' },
  // Su
  { id: 'water',    label: 'Su Tüketimi',            value: '525',    unit: 'm³',    trend: 'Normal',          trendUp: null,  icon: 'activity', color: '#0EA5E9' },
  // Genel
  { id: 'cost',     label: 'Toplam Enerji Maliyeti', value: '214.800',unit: 'TL',    trend: 'Eşik üstü',      trendUp: true,  icon: 'activity', color: 'var(--signal-warn)' },
  { id: 'alarms',   label: 'Aktif Alarm',            value: '5',      unit: '',      trend: '2 kritik',        trendUp: true,  icon: 'alarm',    color: 'var(--signal-err)' },
  { id: 'co2',      label: 'CO₂ Tahmini',            value: '14,2',   unit: 'ton',   trend: 'Normal aralık',   trendUp: null,  icon: 'energy',   color: '#10B981' },
];

const KPICard = ({ kpi, tweaks }) => {
  const [hovered, setHovered] = React.useState(false);
  const isAlarm = kpi.id === 'alarms';

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: 'var(--bg-elevated)',
        border: `1px solid ${isAlarm && hovered ? 'var(--signal-err)' : 'var(--border)'}`,
        borderRadius: tweaks.radius === 'round' ? 14 : tweaks.radius === 'medium' ? 8 : 4,
        padding: '18px 20px',
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
        boxShadow: hovered ? 'var(--shadow-2)' : 'var(--shadow-1)',
        transition: 'box-shadow 160ms, border-color 160ms',
        cursor: 'default',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{kpi.label}</span>
        <DashIcon name={kpi.icon} size={14} color={kpi.color} />
      </div>
      <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.03em', color: 'var(--text)', fontFeatureSettings: "'tnum'", lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 4 }}>
        {kpi.value}
        {kpi.unit && <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--text-muted)', letterSpacing: 0 }}> {kpi.unit}</span>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, fontFamily: 'var(--font-mono)',
        color: kpi.trendUp === null ? 'var(--text-muted)' :
               kpi.trendUp ? (kpi.id === 'alarms' || kpi.id === 'cost' ? 'var(--signal-err)' : 'var(--signal-ok)') :
               'var(--signal-ok)',
      }}>
        {kpi.trendUp !== null && (
          <DashIcon name={kpi.trendUp ? 'trend-up' : 'trend-down'} size={12}
            color={kpi.trendUp === null ? 'var(--text-muted)' :
                   kpi.trendUp ? (kpi.id === 'alarms' || kpi.id === 'cost' ? '#8E3A3A' : '#4A7B4E') : '#4A7B4E'}
          />
        )}
        <span>{kpi.trend}</span>
      </div>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: hovered ? kpi.color : 'transparent', transition: 'background 200ms', opacity: 0.6, borderRadius: '4px 4px 0 0' }} />
    </div>
  );
};

const KPIGrid = ({ tweaks }) => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
    {KPI_DATA.map(kpi => <KPICard key={kpi.id} kpi={kpi} tweaks={tweaks} />)}
  </div>
);

// ── Çoklu Enerji Trend Grafiği (Elektrik + Gaz + Su) ─────────────────────

const ENERGY_HOURS = ['00','02','04','06','08','10','12','14','16','18','20','22'];
const ELEC_VALS  = [980, 1050, 940, 1420, 2480, 3640, 4020, 4280, 3960, 4180, 3520, 2710];
const GAS_VALS   = [120, 130, 125, 180, 210, 240, 260, 250, 245, 230, 200, 160]; // Sm³/h eşdeğeri
const WATER_VALS = [18, 20, 19, 28, 35, 42, 48, 45, 44, 40, 32, 25]; // m³/h eşdeğeri

const EnergyTrendChart = ({ tweaks }) => {
  const W = 560, H = 180, PL = 46, PR = 16, PT = 12, PB = 28;
  const cW = W - PL - PR, cH = H - PT - PB;
  const maxV = 4800;

  function makeLine(vals, max) {
    return vals.map((v, i) => ({
      x: PL + (i / (vals.length - 1)) * cW,
      y: PT + cH - (v / max) * cH,
    }));
  }

  const elecPts = makeLine(ELEC_VALS, maxV);
  const gasPts  = makeLine(GAS_VALS, 300);
  const waterPts = makeLine(WATER_VALS, 55);

  const elecPath = elecPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
  const gasPath  = gasPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
  const waterPath = waterPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
  const areaPath = `${elecPath} L${elecPts[elecPts.length-1].x},${PT+cH} L${elecPts[0].x},${PT+cH} Z`;
  const gridYs = [0, 0.25, 0.5, 0.75, 1].map(t => PT + cH - t * cH);

  return (
    <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: tweaks.radius === 'round' ? 14 : tweaks.radius === 'medium' ? 8 : 4, boxShadow: 'var(--shadow-1)', overflow: 'hidden' }}>
      <div style={{ padding: '14px 18px 10px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '-0.01em' }}>Enerji Tüketim Trendi (3 Kaynak)</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>Bugünkü saatlik tüketim · Elektrik / Doğal Gaz / Su</div>
        </div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: 'var(--text-secondary)' }}>
            <div style={{ width: 10, height: 3, background: 'var(--accent)', borderRadius: 2 }} />
            <span>Elektrik</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: 'var(--text-secondary)' }}>
            <div style={{ width: 10, height: 3, background: '#D97706', borderRadius: 2 }} />
            <span>Doğal Gaz</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: 'var(--text-secondary)' }}>
            <div style={{ width: 10, height: 3, background: '#0EA5E9', borderRadius: 2 }} />
            <span>Su</span>
          </div>
        </div>
      </div>
      <div style={{ padding: '12px 0 0' }}>
        <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', overflow: 'visible' }}>
          <defs>
            <linearGradient id="energyFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.12" />
              <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
            </linearGradient>
          </defs>
          {gridYs.map((y, i) => (
            <g key={i}>
              <line x1={PL} y1={y} x2={W-PR} y2={y} stroke="var(--border)" strokeWidth="0.5" strokeDasharray="2 3" />
              <text x={PL-6} y={y+4} fontSize="9" fill="var(--text-muted)" textAnchor="end" fontFamily="var(--font-mono)">{Math.round((1 - i/4) * maxV / 1000)}k</text>
            </g>
          ))}
          <path d={areaPath} fill="url(#energyFill)" />
          <path d={elecPath} fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          <path d={gasPath} fill="none" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" opacity="0.85" />
          <path d={waterPath} fill="none" stroke="#0EA5E9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 2" opacity="0.8" />
          {ENERGY_HOURS.map((h, i) => (
            <text key={i} x={PL + (i / (ENERGY_HOURS.length - 1)) * cW} y={H - 6} fontSize="9" fill="var(--text-muted)" textAnchor="middle" fontFamily="var(--font-mono)">{h}:00</text>
          ))}
        </svg>
      </div>
    </div>
  );
};

// ── 3 Kaynak Maliyet Dağılımı ─────────────────────────────────────────────

const COST_DIST = [
  { name: 'Elektrik (Aktif + Reaktif)', pct: 77, cost: '166.400', color: 'var(--accent)' },
  { name: 'Doğal Gaz',                  pct: 17, cost: '36.850',  color: '#D97706' },
  { name: 'Su (Şebeke + Arıtma)',       pct: 6,  cost: '11.550',  color: '#0EA5E9' },
];

const MachineEnergyChart = ({ tweaks }) => {
  return (
    <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: tweaks.radius === 'round' ? 14 : tweaks.radius === 'medium' ? 8 : 4, boxShadow: 'var(--shadow-1)', overflow: 'hidden' }}>
      <div style={{ padding: '14px 18px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '-0.01em' }}>Kaynak Bazlı Maliyet Dağılımı</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>Elektrik · Doğal Gaz · Su — Günlük maliyet oranları</div>
        </div>
      </div>
      
      {/* Maliyet Özet Metrikleri */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 10, padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Elektrik</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--accent)' }}>₺166.400</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Doğal Gaz</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: '#D97706' }}>₺36.850</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Su</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: '#0EA5E9' }}>₺11.550</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Toplam</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--signal-warn)' }}>₺214.800</div>
        </div>
      </div>

      <div style={{ padding: '14px 18px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {COST_DIST.map((m, i) => {
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 160, fontSize: 11.5, color: 'var(--text-secondary)', flexShrink: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.name}</div>
              <div style={{ flex: 1, position: 'relative', height: 8 }}>
                <div style={{ position: 'absolute', left: 0, top: 0, height: 8, width: '100%', background: 'var(--surface-2)', borderRadius: 4 }} />
                <div style={{ position: 'absolute', left: 0, top: 0, height: 8, width: `${m.pct}%`, background: m.color, opacity: 0.85, borderRadius: 4, transition: 'width 600ms ease' }} />
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', flexShrink: 0, width: 70, textAlign: 'right' }}>₺{m.cost}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 6px', borderRadius: 3, background: `${m.color}14`, color: m.color, border: `1px solid ${m.color}22`, flexShrink: 0, width: 40, textAlign: 'center' }}>{m.pct}%</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ── Güç Kalitesi ──────────────────────────────────────────────────────────

const POWER_QUALITY = [
  { label: 'Gerilim Kararlılığı', value: 'Normal',    status: 'ok' },
  { label: 'Frekans',             value: '50,01 Hz',  status: 'ok' },
  { label: 'THD',                 value: '%4,2',      status: 'warn' },
  { label: 'Faz Dengesizliği',    value: '%2,1',      status: 'ok' },
  { label: 'Güç Faktörü',         value: '0,89',      status: 'warn' },
  { label: 'Reaktif Risk',        value: 'İzlenmeli', status: 'warn' },
  { label: 'Harmonik Durumu',     value: 'Normal',    status: 'ok' },
  { label: 'Kesinti Riski',       value: 'Düşük',     status: 'ok' },
];

const ProductionEnergyChart = ({ tweaks }) => {
  return (
    <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: tweaks.radius === 'round' ? 14 : tweaks.radius === 'medium' ? 8 : 4, boxShadow: 'var(--shadow-1)', overflow: 'hidden' }}>
      <div style={{ padding: '14px 18px 10px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '-0.01em' }}>Güç Kalitesi</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>Anlık ağ kalitesi parametreleri</div>
        </div>
        <button style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', border: '1px solid var(--border)', borderRadius: 4, background: 'var(--bg-elevated)', cursor: 'pointer', fontSize: 12, color: 'var(--text-secondary)', fontFamily: 'var(--font-sans)' }}>
          <DashIcon name="external" size={12} />
          Rapor Oluştur
        </button>
      </div>
      <div style={{ padding: '16px 18px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px' }}>
        {POWER_QUALITY.map((pq, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--surface-2)', paddingBottom: 6 }}>
            <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{pq.label}</span>
            <span style={{ 
              fontFamily: 'var(--font-mono)', 
              fontSize: 11, 
              fontWeight: 500,
              color: pq.status === 'ok' ? 'var(--signal-ok)' : pq.status === 'warn' ? 'var(--signal-warn)' : 'var(--signal-err)' 
            }}>{pq.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { KPIGrid, EnergyTrendChart, MachineEnergyChart, ProductionEnergyChart });