/* fraud-ui.jsx — Reusable UI components for Acme Bank Fraud Scoring */

const ACME = {
  primary: '#0D7C4A', primaryDark: '#065F3A', primaryBg: '#ECFDF5',
  bg: '#F3F4F6', card: '#FFFFFF', border: '#E5E7EB',
  text: '#111827', muted: '#6B7280', subtle: '#9CA3AF',
  success: '#059669', warning: '#D97706', danger: '#DC2626', neutral: '#6B7280',
  font: "'Plus Jakarta Sans', sans-serif",
};

const SEVERITY_STYLES = {
  critical: { bg: '#FEE2E2', color: '#991B1B', dot: '#EF4444' },
  high:     { bg: '#FEF3C7', color: '#92400E', dot: '#F59E0B' },
  medium:   { bg: '#DBEAFE', color: '#1E40AF', dot: '#3B82F6' },
  low:      { bg: '#D1FAE5', color: '#065F46', dot: '#10B981' },
};

const RISK_STYLES = {
  critical: { bg: '#FEE2E2', color: '#991B1B' },
  high:     { bg: '#FEF3C7', color: '#92400E' },
  medium:   { bg: '#DBEAFE', color: '#1E40AF' },
  low:      { bg: '#D1FAE5', color: '#065F46' },
};

const STATUS_STYLES = {
  open:          { bg: '#FEE2E2', color: '#991B1B', label: 'Open' },
  investigating: { bg: '#FEF3C7', color: '#92400E', label: 'Investigating' },
  resolved:      { bg: '#D1FAE5', color: '#065F46', label: 'Resolved' },
  cleared:       { bg: '#D1FAE5', color: '#065F46', label: 'Cleared' },
  flagged:       { bg: '#FEE2E2', color: '#991B1B', label: 'Flagged' },
};

const REGION_CONFIG = {
  NA:   { label: 'North America', flag: '🇺🇸', color: '#3B82F6', bg: '#EFF6FF', navBg: '#EFF6FF', stripe: '#3B82F6' },
  EU:   { label: 'Europe',        flag: '🇪🇺', color: '#8B5CF6', bg: '#F5F3FF', navBg: '#F5F3FF', stripe: '#8B5CF6' },
  APAC: { label: 'Asia-Pacific',  flag: '🌏', color: '#F97316', bg: '#FFF7ED', navBg: '#FFF7ED', stripe: '#F97316' },
};

/* ─── Region Stripe — accent bar at top of page ─── */
const RegionStripe = ({ region }) => {
  const cfg = REGION_CONFIG[region];
  if (!cfg) return null;
  return (
    <div style={{ height: 6, background: `linear-gradient(90deg, ${cfg.stripe}, ${cfg.stripe}dd)`, flexShrink: 0 }}></div>
  );
};

/* ─── Top Nav ─── */
const NAV_TABS = ['Dashboard', 'Alerts', 'Transactions', 'Rules', 'Settings'];

const FraudNav = ({ activeTab, onTabClick, version, mobile, demoRegion }) => {
  const regionCfg = REGION_CONFIG[demoRegion];
  const accentColor = regionCfg ? regionCfg.color : ACME.primary;
  return (
  <div style={{ background: '#fff', display: 'flex', alignItems: 'center', padding: mobile ? '0 12px' : '0 24px', height: 56, borderBottom: '1px solid ' + ACME.border, flexShrink: 0, overflow: 'hidden' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginRight: mobile ? 12 : 36, cursor: 'pointer', flexShrink: 0 }} onClick={() => onTabClick && onTabClick('Dashboard')}>
      <div style={{ width: 30, height: 30, borderRadius: 8, background: accentColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M8 2L2 14h12L8 2z" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round"/>
          <line x1="8" y1="7" x2="8" y2="10.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      </div>
      {!mobile && <span style={{ fontSize: 17, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>acme<span style={{ color: accentColor }}>bank</span></span>}
    </div>
    {(mobile ? NAV_TABS.slice(0, 3) : NAV_TABS).map((t) => {
      const active = t === activeTab;
      return (
        <div key={t} onClick={() => onTabClick && onTabClick(t)} style={{ padding: mobile ? '0 8px' : '0 14px', height: 56, display: 'flex', alignItems: 'center', fontSize: mobile ? 13 : 14, fontWeight: active ? 600 : 500, color: active ? accentColor : ACME.muted, borderBottom: active ? '2px solid ' + accentColor : '2px solid transparent', cursor: 'pointer', fontFamily: ACME.font, flexShrink: 0, whiteSpace: 'nowrap' }}>{t}</div>
      );
    })}
    <div style={{ flex: 1 }}></div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      {regionCfg && !mobile && (
        <div style={{ padding: '4px 10px', borderRadius: 6, background: regionCfg.bg, fontSize: 12, fontWeight: 600, color: regionCfg.color, fontFamily: ACME.font, letterSpacing: 0.3 }}>
          {regionCfg.label}
        </div>
      )}
      {version && !mobile && (
        <div style={{ padding: '4px 10px', borderRadius: 6, background: regionCfg ? regionCfg.bg : ACME.primaryBg, fontSize: 12, fontWeight: 600, color: regionCfg ? regionCfg.color : ACME.primary, fontFamily: 'monospace', letterSpacing: 0.5 }}>
          v{version}
        </div>
      )}
      <div style={{ position: 'relative', cursor: 'pointer' }}>
        <svg width="20" height="20" fill="none" stroke={ACME.muted} strokeWidth="1.5" viewBox="0 0 24 24"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/></svg>
        <div style={{ position: 'absolute', top: 0, right: 0, width: 8, height: 8, borderRadius: 4, background: '#EF4444', border: '2px solid #fff' }}></div>
      </div>
      {!mobile && (
        <>
          <div style={{ height: 24, width: 1, background: ACME.border }}></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: regionCfg ? regionCfg.bg : ACME.primaryBg, color: regionCfg ? regionCfg.color : ACME.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, fontFamily: ACME.font }}>PS</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, fontFamily: ACME.font }}>Priya Sharma</div>
              <div style={{ fontSize: 11, color: ACME.muted, fontFamily: ACME.font }}>Fraud Operations</div>
            </div>
          </div>
        </>
      )}
    </div>
  </div>
  );
};

/* ─── KPI Card ─── */
const KpiCard = ({ label, value, sub, subColor, icon, accent, mobile }) => (
  <div style={{ background: ACME.card, borderRadius: 12, padding: mobile ? '14px 14px' : '20px 22px', boxShadow: '0 1px 3px rgba(0,0,0,0.06)', flex: mobile ? 'none' : 1, width: mobile ? 'calc(50% - 5px)' : 'auto', minWidth: 0, borderLeft: accent ? `3px solid ${accent}` : 'none' }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
      <div>
        <div style={{ fontSize: mobile ? 10 : 12, fontWeight: 600, color: ACME.muted, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: mobile ? 4 : 8, fontFamily: ACME.font }}>{label}</div>
        <div style={{ fontSize: mobile ? 22 : 28, fontWeight: 700, color: ACME.text, fontFamily: ACME.font, lineHeight: 1 }}>{value}</div>
        {sub && !mobile && <div style={{ fontSize: 12, color: subColor || ACME.muted, marginTop: 6, fontWeight: 500, fontFamily: ACME.font }}>{sub}</div>}
      </div>
      {icon && !mobile && (
        <div style={{ width: 40, height: 40, borderRadius: 10, background: ACME.primaryBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          {icon}
        </div>
      )}
    </div>
  </div>
);

/* ─── Badge ─── */
const Badge = ({ label, styles }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 10px', borderRadius: 10, background: styles.bg, fontSize: 11, fontWeight: 600, color: styles.color, fontFamily: ACME.font }}>
    {styles.dot && <div style={{ width: 5, height: 5, borderRadius: 3, background: styles.dot }}></div>}
    {label}
  </div>
);

/* ─── Risk Score Bar ─── */
const RiskScoreBar = ({ score }) => {
  const pct = Math.round(score * 100);
  const color = score >= 0.85 ? '#EF4444' : score >= 0.65 ? '#F59E0B' : score >= 0.4 ? '#3B82F6' : '#10B981';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ width: 60, height: 6, background: '#F3F4F6', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: pct + '%', background: color, borderRadius: 3, transition: 'width 0.4s ease' }}></div>
      </div>
      <span style={{ fontSize: 12, fontWeight: 600, color: ACME.text, fontFamily: 'monospace', minWidth: 32 }}>{pct}%</span>
    </div>
  );
};

/* ─── Section Header ─── */
const SectionHeader = ({ title, subtitle, action }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
    <div>
      <div style={{ fontSize: 15, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>{title}</div>
      {subtitle && <div style={{ fontSize: 12, color: ACME.muted, marginTop: 2, fontFamily: ACME.font }}>{subtitle}</div>}
    </div>
    {action && (
      <div style={{ padding: '5px 14px', borderRadius: 8, border: '1px solid ' + ACME.border, fontSize: 13, color: ACME.muted, cursor: 'pointer', fontFamily: ACME.font }}>{action}</div>
    )}
  </div>
);

/* ─── Time Formatter ─── */
const formatTime = (ts) => {
  const d = new Date(ts);
  return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
};

const formatTimeAgo = (ts) => {
  const seconds = Math.floor((Date.now() - ts) / 1000);
  if (seconds < 60) return `${seconds}s ago`;
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
  return `${Math.floor(seconds / 3600)}h ago`;
};

// Responsive hook — detects mobile viewports (≤768px)
function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = React.useState(
    () => window.innerWidth <= breakpoint
  );
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);
    const handler = (e) => setIsMobile(e.matches);
    mql.addEventListener('change', handler);
    return () => mql.removeEventListener('change', handler);
  }, [breakpoint]);
  return isMobile;
}

window.ACME = ACME;
window.REGION_CONFIG = REGION_CONFIG;
window.RegionStripe = RegionStripe;
window.useIsMobile = useIsMobile;
window.SEVERITY_STYLES = SEVERITY_STYLES;
window.RISK_STYLES = RISK_STYLES;
window.STATUS_STYLES = STATUS_STYLES;
window.FraudNav = FraudNav;
window.KpiCard = KpiCard;
window.Badge = Badge;
window.RiskScoreBar = RiskScoreBar;
window.SectionHeader = SectionHeader;
window.formatTime = formatTime;
window.formatTimeAgo = formatTimeAgo;