// ui-shell.jsx — Reusable UI components matching the Kanzleientlastung product

const C = {
  blue600: '#1A365D',
  blue700: '#142A4A',
  blue50:  '#EEF2F8',
  blue100: '#D6DEEC',
  green500: '#2E8B57',
  green50: '#ECF5F0',
  n0:  '#FFFFFF',
  n25: '#FBFAF7',
  n50: '#F7F6F3',
  n100:'#EFEDE7',
  n200:'#E8E6E0',
  n300:'#D4D1C9',
  n400:'#A8A49B',
  n500:'#6B6862',
  n600:'#4C4943',
  n700:'#34322E',
  n800:'#1F1D1A',
  danger:'#A23B2C',
  warning:'#B6862C',
};

// ── Sidebar mimicking screenshots ───────────────────────────────────────
function AppSidebar({ active = 'uebersicht', collapsed = false }) {
  const items = [
    { id: 'uebersicht', label: 'Übersicht', icon: 'grid' },
    { id: 'standardfragen', label: 'Standardfragen-Bot', icon: 'msg', count: 3 },
    { id: 'mailtriage', label: 'Mandanten-Mail-Triage', icon: 'mail', count: 6 },
    { id: 'belege', label: 'Belegerfassung', icon: 'file', count: 1 },
  ];
  const allgemein = [
    { id: 'audit', label: 'Audit-Trail' },
    { id: 'dsgvo', label: 'DSGVO & GoBD' },
    { id: 'mandanten', label: 'Mandantenstamm' },
  ];

  const w = collapsed ? 56 : 220;

  return (
    <aside style={{
      width: w, flexShrink: 0,
      background: C.n50,
      borderRight: `1px solid ${C.n200}`,
      padding: collapsed ? '20px 8px' : '20px 16px',
      display: 'flex', flexDirection: 'column',
      fontSize: 13,
      color: C.n700,
      transition: 'width 240ms cubic-bezier(0.2,0,0,1), padding 240ms',
      overflow: 'hidden',
    }}>
      {!collapsed && (
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontWeight: 600, fontSize: 14, color: C.blue600, letterSpacing: '-0.01em' }}>
            Kanzleientlastung
          </div>
          <div style={{ fontSize: 11, color: C.n500, marginTop: 2 }}>KI-Triage · v1.4</div>
        </div>
      )}
      {collapsed && (
        <div style={{ marginBottom: 28, display:'flex', justifyContent:'center' }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6, background: C.blue600,
            display:'flex', alignItems:'center', justifyContent:'center',
            color: 'white', fontWeight: 700, fontSize: 14,
          }}>K</div>
        </div>
      )}

      {!collapsed && (
        <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
          color: C.n500, textTransform: 'uppercase', marginBottom: 8 }}>Module</div>
      )}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 24 }}>
        {items.map(it => (
          <SidebarItem key={it.id} item={it} active={active === it.id} collapsed={collapsed}/>
        ))}
      </nav>

      {!collapsed && (
        <>
          <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
            color: C.n500, textTransform: 'uppercase', marginBottom: 8 }}>Allgemein · Phase II</div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 'auto' }}>
            {allgemein.map(it => (
              <div key={it.id} style={{ padding: '6px 8px', color: C.n500, fontSize: 13 }}>
                {it.label}
              </div>
            ))}
          </nav>
        </>
      )}
      {collapsed && <div style={{ flex: 1 }}/>}

      {!collapsed && (
        <div style={{
          marginTop: 16, padding: '10px 12px',
          background: C.n0, border: `1px solid ${C.n200}`, borderRadius: 8,
          display:'flex', gap: 8, alignItems:'flex-start',
        }}>
          <div style={{ width: 14, height: 14, borderRadius: 3, background: C.danger,
            display:'flex', alignItems:'center', justifyContent:'center', color:'white',
            fontSize: 9, fontWeight: 700, flexShrink: 0, marginTop: 2,
          }}>✓</div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: C.n800 }}>DSGVO-konform</div>
            <div style={{ fontSize: 11, color: C.n500, marginTop: 2 }}>Pseudonymisiert · GoBD</div>
          </div>
        </div>
      )}
    </aside>
  );
}

function SidebarItem({ item, active, collapsed }) {
  const bg = active ? C.blue50 : 'transparent';
  const fg = active ? C.blue600 : C.n700;
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 10,
      padding: collapsed ? '8px' : '7px 10px',
      borderRadius: 6, background: bg, color: fg,
      fontWeight: active ? 600 : 500, fontSize: 13,
      justifyContent: collapsed ? 'center' : 'flex-start',
    }}>
      <SidebarIcon kind={item.icon} color={fg}/>
      {!collapsed && <span style={{ flex: 1 }}>{item.label}</span>}
      {!collapsed && item.count != null && (
        <span style={{ fontSize: 11, color: active ? C.blue600 : C.n500 }}>· {item.count}</span>
      )}
    </div>
  );
}

function SidebarIcon({ kind, color }) {
  const s = { width: 14, height: 14, stroke: color, strokeWidth: 1.5, fill: 'none' };
  if (kind === 'grid') return (
    <svg viewBox="0 0 14 14" style={s}>
      <rect x="1.5" y="1.5" width="4" height="4"/><rect x="8.5" y="1.5" width="4" height="4"/>
      <rect x="1.5" y="8.5" width="4" height="4"/><rect x="8.5" y="8.5" width="4" height="4"/>
    </svg>);
  if (kind === 'msg') return (
    <svg viewBox="0 0 14 14" style={s}>
      <path d="M2 3h10v6H6l-3 3V9H2V3z"/>
    </svg>);
  if (kind === 'mail') return (
    <svg viewBox="0 0 14 14" style={s}>
      <rect x="1.5" y="3" width="11" height="8"/>
      <path d="M1.5 4l5.5 4 5.5-4"/>
    </svg>);
  if (kind === 'file') return (
    <svg viewBox="0 0 14 14" style={s}>
      <path d="M3 1.5h6l3 3v8H3z"/>
      <path d="M9 1.5v3h3"/>
    </svg>);
  return null;
}

// ── Top breadcrumb + page title ─────────────────────────────────────────
function PageHeader({ crumbs, title, subtitle, user = 'Sabine Mustermann' }) {
  return (
    <div style={{ padding: '24px 32px 0 32px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div>
          <div style={{ fontSize: 12, color: C.n500, marginBottom: 12 }}>
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span style={{ margin: '0 6px', color: C.n400 }}>›</span>}
                <span>{c}</span>
              </React.Fragment>
            ))}
          </div>
          <h1 style={{
            margin: 0, fontSize: 30, lineHeight: 1.2, fontWeight: 600,
            color: C.n800, letterSpacing: '-0.01em',
          }}>
            {title}
            {subtitle && (
              <span style={{ fontSize: 14, fontWeight: 400, color: C.n500, marginLeft: 12 }}>
                {subtitle}
              </span>
            )}
          </h1>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap: 10,
          padding: '8px 14px 8px 8px', border: `1px solid ${C.n200}`, borderRadius: 999,
          background: C.n0,
        }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: C.blue600,
            color:'white', display:'flex', alignItems:'center', justifyContent:'center',
            fontSize: 11, fontWeight: 600 }}>SM</div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: C.n800 }}>{user}</div>
            <div style={{ fontSize: 10, color: C.n500 }}>Kanzleiinhaberin</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── KPI card row ────────────────────────────────────────────────────────
function KPICard({ label, value, sub, accent, highlight }) {
  return (
    <div style={{
      flex: 1,
      background: C.n0,
      border: `1px solid ${highlight ? C.blue600 : C.n200}`,
      borderRadius: 8,
      padding: '14px 18px',
      transition: 'border-color 240ms, box-shadow 240ms',
      boxShadow: highlight ? '0 4px 16px rgba(26,54,93,0.08)' : 'none',
    }}>
      <div style={{ fontSize: 11, color: C.n500, fontWeight: 500 }}>{label}</div>
      <div style={{
        fontSize: 28, fontWeight: 600, color: accent || C.n800,
        marginTop: 6, fontVariantNumeric: 'tabular-nums',
        letterSpacing: '-0.02em',
      }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: C.n500, marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

// ── Buttons ─────────────────────────────────────────────────────────────
function PrimaryButton({ children, style }) {
  return (
    <button style={{
      background: C.green500, color: 'white', border: 'none',
      padding: '10px 20px', borderRadius: 6, fontSize: 13,
      fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
      ...style,
    }}>{children}</button>
  );
}

function SecondaryButton({ children, style }) {
  return (
    <button style={{
      background: 'transparent', color: C.blue600,
      border: `1.5px solid ${C.blue600}`,
      padding: '8px 18px', borderRadius: 6, fontSize: 13,
      fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
      ...style,
    }}>{children}</button>
  );
}

// ── Highlight ring around an element to draw the eye ────────────────────
function FocusRing({ x, y, width, height, color = C.blue600, dashed = false }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      border: `2px ${dashed ? 'dashed' : 'solid'} ${color}`,
      borderRadius: 10,
      pointerEvents: 'none',
      boxShadow: `0 0 0 4px ${color}1A`,
      transition: 'all 320ms cubic-bezier(0.2,0,0,1)',
    }}/>
  );
}

Object.assign(window, { C, AppSidebar, PageHeader, KPICard, PrimaryButton, SecondaryButton, FocusRing });