/* ============================================
   ERP Nutzfahrzeuge - React SPA v4
   ============================================ */

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

// ============ ICON COMPONENT ============
const Icon = ({
  name,
  size = 20,
  className = ''
}) => {
  const icons = {
    dashboard: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
    truck: 'M1 3h15v13H1V3zm15 5h4l3 3v5h-7V8zM5 18a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
    car: 'M5 11l1.5-4.5h11L19 11M3 11h18v6H3v-6zm2 6a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm12 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z',
    forklift: 'M2 20V4h2v14h8v2H2zm2-14h6v8H4V6zm6 0h4v12h-4V6zm4 0h2v12h-2V6zM14 2h6v2h-6V2z',
    contacts: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM2 18c0-3 3-5 6-5s6 2 6 5v1H2v-1zm14-5c2 0 4 2 4 4v1h-4v-5z',
    sale: 'M2 4h20v4H2V4zm0 6h12v10H2V10zm14 0h6v6h-6v-6zm0 8h6v2h-6v-2z',
    ai: 'M12 2l2 7h7l-5.5 4 2 7L12 16l-5.5 4 2-7L3 9h7l2-7z',
    settings: 'M12 8a4 4 0 100 8 4 4 0 000-8z',
    users: 'M9 11a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5zm6-2a3 3 0 100-6 3 3 0 000 6z',
    search: 'M11 4a7 7 0 100 14 7 7 0 000-14zm10 17l-5-5',
    bell: 'M12 2a6 6 0 016 6v4l2 4H4l2-4V8a6 6 0 016-6z',
    menu: 'M3 6h18M3 12h18M3 18h18',
    close: 'M6 6l12 12M18 6L6 18',
    plus: 'M12 5v14M5 12h14',
    edit: 'M3 17v4h4l11-11-4-4L3 17z',
    trash: 'M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14',
    check: 'M5 12l5 5L20 7',
    alert: 'M12 2L2 20h20L12 2zm0 7v6m0 4v.01',
    info: 'M12 2a10 10 0 100 20 10 10 0 000-20z',
    chevronLeft: 'M15 6l-6 6 6 6',
    chevronRight: 'M9 6l6 6-6 6',
    chevronDown: 'M6 9l6 6 6-6',
    arrowUp: 'M12 5v14M5 12l7-7 7 7',
    arrowDown: 'M12 5v14M5 12l7 7 7-7',
    upload: 'M12 4v12M5 11l7-7 7 7M4 20h16',
    download: 'M12 4v12M5 11l7 7 7-7M4 20h16',
    camera: 'M3 7h4l2-3h6l2 3h4v12H3V7zm9 3a4 4 0 100 8 4 4 0 000-8z',
    mic: 'M12 2a3 3 0 013 3v6a3 3 0 01-6 0V5a3 3 0 013-3z',
    send: 'M2 12l20-9-9 20-2-9-9-2z',
    sync: 'M4 12a8 8 0 0114-5l2-2v6h-6l2-2a6 6 0 00-10 5H4z',
    image: 'M3 4h18v16H3V4zm3 12l4-4 3 3 5-5 3 6H6z',
    doc: 'M6 2h10l4 4v16H6V2zm10 0v4h4M9 12h6M9 16h6',
    filter: 'M3 6h18l-7 8v6l-4-2v-4L3 6z',
    sort: 'M7 4v16M4 7l3-3 3 3M17 20V4M14 17l3 3 3-3',
    logout: 'M9 4H5v16h4M16 8l4 4-4 4M9 12h11',
    sun: 'M12 8a4 4 0 100 8 4 4 0 000-8z',
    moon: 'M21 12a9 9 0 11-9-9 7 7 0 009 9z',
    tag: 'M2 12l8-8h12v12l-8 8L2 12zm12-4a2 2 0 100 4 2 2 0 000-4z',
    euro: 'M16 8a5 5 0 00-5-3 5 5 0 00-5 7 5 5 0 005 7 5 5 0 005-3M4 11h8M4 13h8',
    clock: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 6v6l4 2',
    eye: 'M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 3a4 4 0 100 8 4 4 0 000-8z',
    location: 'M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7z',
    calendar: 'M3 6h18v15H3V6zm0-2h4V2h2v2h6V2h2v2h4',
    trending: 'M3 17l6-6 4 4 8-8M16 7h5v5',
    package: 'M12 2L2 7v10l10 5 10-5V7L12 2z',
    building: 'M4 4h16v16H4V4z',
    shield: 'M12 2L4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6l-8-4z',
    star: 'M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7l3-7z',
    list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
    grid: 'M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z',
    external: 'M14 3h7v7M21 3l-9 9',
    refresh: 'M4 12a8 8 0 0114-5l2-2v6h-6l2-2a6 6 0 00-10 5H4z',
    globe: 'M12 2a10 10 0 100 20 10 10 0 000-20z',
    briefcase: 'M3 7h18v13H3V7zM8 7V4h8v3',
    phone: 'M6 2h12v20H6V2z',
    mail: 'M3 5h18v14H3V5z',
    chart: 'M3 3v18h18M7 14l4-4 3 3 5-6',
    layers: 'M12 2L2 7l10 5 10-5-10-5z',
    wrench: 'M14 6a4 4 0 11-5 5L3 17l4 4 6-6a4 4 0 015-5z',
    pdf: 'M6 2h10l4 4v16H6V2z',
    sparkles: 'M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z',
    shopping: 'M3 3h2l2 14h12l2-10H6',
    gas: 'M3 7v10a2 2 0 002 2h8a2 2 0 002-2V7M3 7h12',
    road: 'M5 22V2l4 20M19 22V2l-4 20',
    certificate: 'M12 2L4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6l-8-4z',
    percentage: 'M19 5L5 19',
    currency: 'M3 8h18M3 16h18',
    truck_type: 'M1 3h15v13H1V3z',
    clipboard: 'M9 2h6v4H9V2zM4 6h16v16H4V6z',
    save: 'M5 3h12l4 4v14H5V3z',
    drag: 'M8 6h2v2H8V6zm6 0h2v2h-2V6zM8 11h2v2H8v-2zm6 0h2v2h-2v-2z',
    config: 'M12 4a8 8 0 100 16 8 8 0 000-16z'
  };
  const path = icons[name] || icons.dashboard;
  return /*#__PURE__*/React.createElement("svg", {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    className: className
  }, /*#__PURE__*/React.createElement("path", {
    d: path
  }));
};

// ============ SHARED COMPONENTS ============
const Badge = ({
  variant = 'neutral',
  children
}) => /*#__PURE__*/React.createElement("span", {
  className: `badge badge-${variant}`
}, children);
const Button = ({
  variant = 'primary',
  size = 'md',
  icon,
  children,
  onClick,
  disabled,
  type = 'button',
  className = '',
  title
}) => {
  const cls = `btn btn-${variant} ${size === 'sm' ? 'btn-sm' : ''} ${size === 'lg' ? 'btn-lg' : ''} ${className}`;
  return /*#__PURE__*/React.createElement("button", {
    type: type,
    className: cls,
    onClick: onClick,
    disabled: disabled,
    title: title
  }, icon && /*#__PURE__*/React.createElement(Icon, {
    name: icon,
    size: size === 'sm' ? 14 : 16
  }), children);
};
const Card = ({
  title,
  action,
  children,
  className = ''
}) => /*#__PURE__*/React.createElement("div", {
  className: `card ${className}`
}, (title || action) && /*#__PURE__*/React.createElement("div", {
  className: "card-header"
}, title && /*#__PURE__*/React.createElement("h3", {
  className: "card-title"
}, title), action && /*#__PURE__*/React.createElement("div", null, action)), /*#__PURE__*/React.createElement("div", {
  className: "card-body"
}, children));
const KpiCard = ({
  label,
  value,
  trend,
  trendDir,
  icon,
  color = 'primary'
}) => /*#__PURE__*/React.createElement("div", {
  className: "kpi-card"
}, /*#__PURE__*/React.createElement("div", {
  style: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  }
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  className: "kpi-label"
}, t(label)), /*#__PURE__*/React.createElement("div", {
  className: "kpi-value"
}, value), trend && /*#__PURE__*/React.createElement("div", {
  className: "kpi-trend",
  style: {
    color: trendDir === 'up' ? 'var(--color-success)' : 'var(--color-error)'
  }
}, /*#__PURE__*/React.createElement(Icon, {
  name: trendDir === 'up' ? 'arrowUp' : 'arrowDown',
  size: 14
}), /*#__PURE__*/React.createElement("span", null, trend))), icon && /*#__PURE__*/React.createElement("div", {
  style: {
    width: 40,
    height: 40,
    borderRadius: 'var(--radius-md)',
    background: `var(--color-${color}-light)`,
    color: `var(--color-${color})`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
}, /*#__PURE__*/React.createElement(Icon, {
  name: icon,
  size: 20
}))));
const Spinner = ({
  size = 'md'
}) => /*#__PURE__*/React.createElement("div", {
  style: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 'var(--space-12)'
  }
}, /*#__PURE__*/React.createElement("div", {
  className: `spinner ${size === 'lg' ? 'spinner-lg' : ''}`
}));
const EmptyState = ({
  icon = 'package',
  title,
  text,
  action
}) => /*#__PURE__*/React.createElement("div", {
  className: "empty-state"
}, /*#__PURE__*/React.createElement(Icon, {
  name: icon,
  size: 64,
  className: "empty-state-icon"
}), /*#__PURE__*/React.createElement("h3", {
  className: "empty-state-title"
}, title), /*#__PURE__*/React.createElement("p", {
  className: "empty-state-text"
}, text), action);
const ErrorState = ({
  title,
  text,
  onRetry
}) => /*#__PURE__*/React.createElement("div", {
  className: "error-state"
}, /*#__PURE__*/React.createElement(Icon, {
  name: "alert",
  size: 48,
  className: "error-state-icon"
}), /*#__PURE__*/React.createElement("h3", {
  className: "empty-state-title"
}, title || t('common.fehler_aufgetreten')), /*#__PURE__*/React.createElement("p", {
  className: "empty-state-text"
}, text || 'Fehler.'), onRetry && /*#__PURE__*/React.createElement(Button, {
  variant: "primary",
  icon: "refresh",
  onClick: onRetry
}, t('common.erneut_versuchen')));
const Avatar = ({
  name,
  size = 'md'
}) => {
  const i = name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();
  return /*#__PURE__*/React.createElement("div", {
    className: `avatar ${size === 'lg' ? 'avatar-lg' : ''}`
  }, i);
};
const ViewToggle = ({
  view,
  onChange
}) => /*#__PURE__*/React.createElement("div", {
  className: "view-toggle"
}, /*#__PURE__*/React.createElement("button", {
  className: `view-toggle-btn ${view === 'table' ? 'active' : ''}`,
  onClick: () => onChange('table')
}, /*#__PURE__*/React.createElement(Icon, {
  name: "list",
  size: 16
}), " Tabelle"), /*#__PURE__*/React.createElement("button", {
  className: `view-toggle-btn ${view === 'grid' ? 'active' : ''}`,
  onClick: () => onChange('grid')
}, /*#__PURE__*/React.createElement(Icon, {
  name: "grid",
  size: 16
}), " Kacheln"));
const useRouter = () => {
  const [route, setRoute] = useState(window.location.hash.slice(1) || '/dashboard');
  useEffect(() => {
    const h = () => setRoute(window.location.hash.slice(1) || '/dashboard');
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);
  const navigate = useCallback(p => {
    window.location.hash = p;
  }, []);
  return {
    route,
    navigate
  };
};
const ZBRef = ({
  field
}) => /*#__PURE__*/React.createElement("span", {
  className: "zb-field-ref"
}, field);

// ============ IMAGE MANAGER (v4 with file button) ============
const photoCategories = [{
  id: 'aussen_front',
  label: 'Aussen - Front'
}, {
  id: 'aussen_seite',
  label: 'Aussen - Seite'
}, {
  id: 'aussen_heck',
  label: 'Aussen - Heck'
}, {
  id: 'innen_armaturen',
  label: 'Innen - Armaturen'
}, {
  id: 'innen_sitze',
  label: 'Innen - Sitze'
}, {
  id: 'motorraum',
  label: 'Motorraum'
}, {
  id: 'schaeden',
  label: 'Schaeden'
}, {
  id: 'unterboden',
  label: 'Unterboden'
}, {
  id: 'dokumente',
  label: 'Dokumente'
}, {
  id: 'sonstiges',
  label: 'Sonstiges'
}];
const ImageManager = ({
  photos,
  setPhotos,
  role
}) => {
  const [uploading, setUploading] = useState(false);
  const [lightbox, setLightbox] = useState(null);
  const [showRetusche, setShowRetusche] = useState(null);
  const [retuscheOption, setRetuscheOption] = useState(null);
  const [retuscheLoading, setRetuscheLoading] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const fileInputRef = useRef(null);
  const handleUpload = () => {
    setUploading(true);
    setTimeout(() => {
      setPhotos([...photos, {
        id: Date.now() + Math.random(),
        category: 'sonstiges',
        isMain: photos.length === 0
      }]);
      setUploading(false);
    }, 1500);
  };
  const handleFileSelect = e => {
    e.stopPropagation();
    handleUpload();
  };
  const setMainPhoto = id => setPhotos(photos.map(p => ({
    ...p,
    isMain: p.id === id
  })));
  const deletePhoto = id => {
    setPhotos(photos.filter(p => p.id !== id));
    setDeleteConfirm(null);
  };
  const setPhotoCategory = (id, category) => setPhotos(photos.map(p => p.id === id ? {
    ...p,
    category
  } : p));
  const movePhoto = (id, dir) => {
    const idx = photos.findIndex(p => p.id === id);
    if (idx < 0) return;
    const ni = dir === 'left' ? idx - 1 : idx + 1;
    if (ni < 0 || ni >= photos.length) return;
    const arr = [...photos];
    [arr[idx], arr[ni]] = [arr[ni], arr[idx]];
    setPhotos(arr);
  };
  const handleRetusche = () => {
    setRetuscheLoading(true);
    setTimeout(() => {
      setRetuscheLoading(false);
      setShowRetusche(null);
      setRetuscheOption(null);
    }, 2000);
  };
  const catLabel = catId => photoCategories.find(c => c.id === catId)?.label || 'Sonstiges';
  return /*#__PURE__*/React.createElement("div", {
    className: "image-manager"
  }, role !== 'buchhaltung' && /*#__PURE__*/React.createElement("div", {
    className: `image-upload-zone ${uploading ? 'uploading' : ''}`,
    onClick: handleUpload
  }, uploading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "spinner spinner-lg"
  }), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-sm)',
      color: 'var(--color-text-secondary)'
    }
  }, "Fotos werden hochgeladen...")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
    name: "upload",
    size: 48,
    className: "image-upload-icon"
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-medium)'
    }
  }, "Fotos hochladen (Drag & Drop)"), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, "JPG, PNG, WEBP · max 50 MB · Mehrfachauswahl"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 'var(--space-3)',
      display: 'flex',
      gap: 'var(--space-2)',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "file-input-wrapper"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "sm",
    icon: "image"
  }, "Datei auswaehlen"), /*#__PURE__*/React.createElement("input", {
    type: "file",
    multiple: true,
    accept: "image/*",
    ref: fileInputRef,
    onChange: handleFileSelect
  }))))), photos.length === 0 ? /*#__PURE__*/React.createElement(EmptyState, {
    icon: "image",
    title: "Keine Fotos vorhanden",
    text: "Laden Sie Fotos hoch. Kategorisieren Sie nach Perspektiven und markieren Sie ein Hauptfoto."
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 'var(--space-2)'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 'var(--font-size-sm)',
      color: 'var(--color-text-secondary)'
    }
  }, photos.length, " Foto", photos.length !== 1 ? 's' : ''), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "drag",
    size: 12
  }), " Sortieren · ", /*#__PURE__*/React.createElement(Icon, {
    name: "star",
    size: 12
  }), " Hauptfoto")), /*#__PURE__*/React.createElement("div", {
    className: "image-gallery"
  }, photos.map((photo, idx) => /*#__PURE__*/React.createElement("div", {
    key: photo.id,
    className: `image-thumb ${photo.isMain ? 'main-photo' : ''}`,
    onClick: () => setLightbox(idx)
  }, /*#__PURE__*/React.createElement("div", {
    className: "image-thumb-placeholder"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "image",
    size: 32
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 'var(--font-size-xs)'
    }
  }, "Foto ", idx + 1)), /*#__PURE__*/React.createElement("div", {
    className: "image-thumb-category"
  }, catLabel(photo.category)), photo.isMain && /*#__PURE__*/React.createElement("div", {
    className: "image-thumb-main-badge"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "star",
    size: 14
  })), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("div", {
    className: "image-thumb-overlay",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement("div", {
    className: "image-thumb-actions"
  }, /*#__PURE__*/React.createElement("button", {
    className: `image-thumb-action star ${photo.isMain ? 'active' : ''}`,
    title: "Hauptfoto",
    onClick: () => setMainPhoto(photo.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "star",
    size: 14
  })), /*#__PURE__*/React.createElement("button", {
    className: "image-thumb-action",
    title: "Nach links",
    onClick: () => movePhoto(photo.id, 'left')
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevronLeft",
    size: 14
  })), /*#__PURE__*/React.createElement("button", {
    className: "image-thumb-action",
    title: "Nach rechts",
    onClick: () => movePhoto(photo.id, 'right')
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevronRight",
    size: 14
  })), /*#__PURE__*/React.createElement("button", {
    className: "image-thumb-action",
    title: "KI-Retusche",
    onClick: () => setShowRetusche(photo.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "sparkles",
    size: 14
  })), /*#__PURE__*/React.createElement("button", {
    className: "image-thumb-action danger",
    title: "Loeschen",
    onClick: () => setDeleteConfirm(photo.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "trash",
    size: 14
  })))))))), lightbox !== null && photos[lightbox] && /*#__PURE__*/React.createElement("div", {
    className: "lightbox",
    onClick: () => setLightbox(null)
  }, /*#__PURE__*/React.createElement("button", {
    className: "lightbox-close",
    onClick: () => setLightbox(null)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "close",
    size: 24
  })), photos.length > 1 && /*#__PURE__*/React.createElement("button", {
    className: "lightbox-nav prev",
    onClick: e => {
      e.stopPropagation();
      setLightbox(lightbox === 0 ? photos.length - 1 : lightbox - 1);
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevronLeft",
    size: 24
  })), /*#__PURE__*/React.createElement("div", {
    className: "lightbox-image",
    style: {
      width: '70vw',
      height: '60vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "image",
    size: 120,
    style: {
      color: 'var(--color-text-muted)'
    }
  })), photos.length > 1 && /*#__PURE__*/React.createElement("button", {
    className: "lightbox-nav next",
    onClick: e => {
      e.stopPropagation();
      setLightbox(lightbox === photos.length - 1 ? 0 : lightbox + 1);
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevronRight",
    size: 24
  })), /*#__PURE__*/React.createElement("div", {
    className: "lightbox-info",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-lg)',
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, "Foto ", lightbox + 1, " von ", photos.length), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-sm)',
      opacity: 0.7
    }
  }, catLabel(photos[lightbox].category), photos[lightbox].isMain ? ' · Hauptfoto' : ''))), showRetusche && /*#__PURE__*/React.createElement("div", {
    className: "modal-overlay",
    onClick: () => setShowRetusche(null)
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/React.createElement("h3", {
    style: {
      fontSize: 'var(--font-size-lg)',
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "sparkles",
    size: 20
  }), " KI-Bildretusche"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm",
    onClick: () => setShowRetusche(null)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "close",
    size: 20
  }))), /*#__PURE__*/React.createElement("div", {
    className: "modal-body"
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-sm)',
      color: 'var(--color-text-secondary)',
      marginBottom: 'var(--space-4)'
    }
  }, "Waehlen Sie eine Retusche-Option. Verarbeitung via OpenRouter Flux.1-Pro."), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 'var(--space-3)'
    }
  }, [{
    id: 'bg',
    icon: 'image',
    label: 'Hintergrund entfernen',
    desc: 'Ersetzt Hintergrund durch neutrale Farbe'
  }, {
    id: 'reflections',
    icon: 'sparkles',
    label: 'Spiegelungen retuschieren',
    desc: 'Reduziert Reflexionen auf der Fahrzeugoberflaeche'
  }, {
    id: 'brightness',
    icon: 'sun',
    label: 'Helligkeit optimieren',
    desc: 'Passt Belichtung und Kontrast an'
  }].map(opt => /*#__PURE__*/React.createElement("div", {
    key: opt.id,
    className: `retusche-option ${retuscheOption === opt.id ? 'selected' : ''}`,
    onClick: () => setRetuscheOption(opt.id)
  }, /*#__PURE__*/React.createElement("div", {
    className: "retusche-option-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: opt.icon,
    size: 20
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-medium)'
    }
  }, opt.label), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, opt.desc)))))), /*#__PURE__*/React.createElement("div", {
    className: "modal-footer"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    onClick: () => setShowRetusche(null)
  }, "Abbrechen"), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "sparkles",
    disabled: !retuscheOption || retuscheLoading,
    onClick: handleRetusche
  }, retuscheLoading ? 'Verarbeite...' : 'Retusche starten')))), deleteConfirm && /*#__PURE__*/React.createElement("div", {
    className: "modal-overlay",
    onClick: () => setDeleteConfirm(null)
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal",
    onClick: e => e.stopPropagation(),
    style: {
      maxWidth: 400
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/React.createElement("h3", {
    style: {
      fontSize: 'var(--font-size-lg)'
    }
  }, "Foto loeschen?")), /*#__PURE__*/React.createElement("div", {
    className: "modal-body"
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-sm)'
    }
  }, "Foto wirklich loeschen? Nicht rueckgaengig machbar.")), /*#__PURE__*/React.createElement("div", {
    className: "modal-footer"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    onClick: () => setDeleteConfirm(null)
  }, "Abbrechen"), /*#__PURE__*/React.createElement(Button, {
    variant: "danger",
    icon: "trash",
    onClick: () => deletePhoto(deleteConfirm)
  }, "Loeschen")))));
};

// ============ SIDEBAR + TOPBAR ============
const Sidebar = ({
  route,
  navigate,
  role
}) => {
  const navItems = [{
    section: 'nav.main',
    items: [{
      id: '/dashboard',
      icon: 'dashboard',
      label: 'nav.dashboard',
      roles: ['admin', 'verkaeufer', 'buchhaltung']
    }, {
      id: '/fahrzeuge',
      icon: 'truck',
      label: 'nav.fahrzeuge',
      roles: ['admin', 'verkaeufer', 'buchhaltung']
    }, {
      id: '/kontakte',
      icon: 'contacts',
      label: 'nav.kontakte',
      roles: ['admin', 'verkaeufer', 'buchhaltung']
    }, {
      id: '/verkauf',
      icon: 'sale',
      label: 'nav.verkauf',
      roles: ['admin', 'verkaeufer', 'buchhaltung']
    }]
  }, {
    section: 'nav.ki',
    items: [{
      id: '/ki-copilot',
      icon: 'ai',
      label: 'nav.ki-copilot',
      roles: ['admin', 'verkaeufer', 'buchhaltung']
    }]
  }, {
    section: 'nav.verwaltung',
    items: [{
      id: '/einstellungen',
      icon: 'settings',
      label: 'nav.einstellungen',
      roles: ['admin']
    }]
  }];
  const isActive = id => route === id || id !== '/dashboard' && route.startsWith(id);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-overlay",
    onClick: () => closeSidebar()
  }), /*#__PURE__*/React.createElement("aside", {
    className: "sidebar",
    role: "navigation"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-logo"
  }, "NF"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-title"
  }, "Nutzfahrzeug-ERP"), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-subtitle"
  }, "Handelsverwaltung"))), /*#__PURE__*/React.createElement("nav", {
    className: "sidebar-nav"
  }, navItems.map((section, si) => /*#__PURE__*/React.createElement("div", {
    key: si,
    className: "sidebar-nav-section"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-nav-label"
  }, t(section.section)), section.items.map(item => item.roles.includes(role) ? /*#__PURE__*/React.createElement("a", {
    key: item.id,
    href: `#${item.id}`,
    className: `sidebar-nav-item ${isActive(item.id) ? 'active' : ''}`,
    onClick: () => closeSidebar()
  }, /*#__PURE__*/React.createElement(Icon, {
    name: item.icon,
    size: 18
  }), /*#__PURE__*/React.createElement("span", null, t(item.label))) : null)))), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-footer"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-3)',
      padding: 'var(--space-2) var(--space-3)'
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    name: "Max Mustermann"
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-sm)',
      fontWeight: 'var(--font-weight-medium)'
    }
  }, "Max Mustermann"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, role === 'admin' ? 'Administrator' : role === 'verkaeufer' ? 'Verkaeufer' : 'Buchhaltung'))))));
};
const Topbar = ({
  route,
  role,
  setRole,
  navigate
}) => {
  const [showProfile, setShowProfile] = useState(false);
  const routeLabels = {
    '/dashboard': 'nav.dashboard',
    '/fahrzeuge': 'nav.fahrzeuge',
    '/fahrzeuge/neu': 'nav.fahrzeuge.neu',
    '/kontakte': 'nav.kontakte',
    '/verkauf': 'nav.verkauf',
    '/ki-copilot': 'nav.ki-copilot',
    '/einstellungen': 'nav.einstellungen'
  };
  const currentLabel = routeLabels[route] || routeLabels[route.split('/').slice(0, 2).join('/')] || 'nav.dashboard';
  return /*#__PURE__*/React.createElement("header", {
    className: "topbar"
  }, /*#__PURE__*/React.createElement("button", {
    className: "mobile-menu-btn",
    onClick: toggleSidebar
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "menu",
    size: 24
  })), /*#__PURE__*/React.createElement("div", {
    className: "topbar-breadcrumb"
  }, /*#__PURE__*/React.createElement("span", null, t('nav.main')), /*#__PURE__*/React.createElement(Icon, {
    name: "chevronRight",
    size: 14
  }), /*#__PURE__*/React.createElement("span", {
    className: "current"
  }, t(currentLabel))), /*#__PURE__*/React.createElement("div", {
    className: "topbar-actions"
  }, /*#__PURE__*/React.createElement("div", {
    className: "lang-switcher",
    style: {
      display: 'flex',
      gap: 'var(--space-1)'
    }
  }, /*#__PURE__*/React.createElement("button", {
    className: `btn btn-ghost btn-sm ${currentLang === 'de' ? 'active' : ''}`,
    onClick: () => setLang('de'),
    style: {
      fontWeight: currentLang === 'de' ? 'bold' : 'normal'
    }
  }, "DE"), /*#__PURE__*/React.createElement("button", {
    className: `btn btn-ghost btn-sm ${currentLang === 'en' ? 'active' : ''}`,
    onClick: () => setLang('en'),
    style: {
      fontWeight: currentLang === 'en' ? 'bold' : 'normal'
    }
  }, "EN")), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm",
    onClick: toggleDarkMode
  }, /*#__PURE__*/React.createElement(Icon, {
    name: darkMode ? 'sun' : 'moon',
    size: 18
  })), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "bell",
    size: 18
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm",
    onClick: () => setShowProfile(!showProfile),
    style: {
      gap: 'var(--space-2)'
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    name: "Max Mustermann"
  }), /*#__PURE__*/React.createElement(Icon, {
    name: "chevronDown",
    size: 14
  })), showProfile && /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      right: 0,
      top: '100%',
      marginTop: 'var(--space-2)',
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-lg)',
      boxShadow: 'var(--shadow-lg)',
      minWidth: 200,
      zIndex: 'var(--z-dropdown)',
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 'var(--space-3) var(--space-4)',
      borderBottom: '1px solid var(--color-border)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-semibold)',
      fontSize: 'var(--font-size-sm)'
    }
  }, "Max Mustermann"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, "max@nf-handel.de")), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 'var(--space-3) var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "label"
  }, "Rolle"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-1)',
      marginTop: 'var(--space-2)'
    }
  }, ['admin', 'verkaeufer', 'buchhaltung'].map(r => /*#__PURE__*/React.createElement("button", {
    key: r,
    className: `btn btn-sm ${role === r ? 'btn-primary' : 'btn-secondary'}`,
    onClick: () => {
      setRole(r);
      setShowProfile(false);
    },
    style: {
      fontSize: 'var(--font-size-xs)'
    }
  }, r === 'admin' ? 'Admin' : r === 'verkaeufer' ? 'Verkaeufer' : 'Buchhaltung')))), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost",
    style: {
      width: '100%',
      justifyContent: 'flex-start',
      borderRadius: 0
    },
    onClick: () => navigate('/einstellungen')
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "settings",
    size: 16
  }), " ", t('nav.einstellungen'))))));
};

// ============ MOCK DATA ============
const mockVehicles = [{
  id: 1,
  marke: 'Mercedes-Benz',
  modell: 'Actros 1845 LS',
  fin: 'WDB9066351L123456',
  baujahr: 2019,
  erstzulassung: '2019-03-15',
  kmStand: 150000,
  betriebsstunden: null,
  leistungKw: 330,
  leistungPs: 449,
  kraftstoff: 'Diesel',
  getriebe: 'Automatik',
  farbe: 'Weiss',
  zustand: 'Gebraucht',
  standort: 'Muenchen',
  preis: 45000,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'gelistet',
  typ: 'lkw',
  hsn: '0911',
  tsn: 'AAM',
  egTyp: 'e1*2007/46*0514*12',
  lkwTyp: 'Sattelzugmaschine',
  aufbau: '3-Achs Sattelzug',
  abgasnorm: 'Euro 6',
  bereifung: '315/70 R22.5',
  achsen: '3',
  laenge: 6150,
  breite: 2500,
  hoehe: 3950,
  leergewicht: 8500,
  Gesamtgewicht: 19000,
  hubraum: 14801,
  vorbesitzer: 1,
  unfallschaeden: false,
  tuev: '03.2027',
  serviceIntervall: 150000,
  letzterService: '01.2026',
  beschreibung: 'Top gepflegter Actros, Euro 6, 1. Hand',
  lkwBordgeraet: true,
  lkwHubwerk: false,
  lkwLadebordwand: false,
  lkwKlima: true,
  lkwSchlafplatz: true,
  lkwHydraulik: false,
  anhaengelast: 40000,
  kuppellast: 15000
}, {
  id: 2,
  marke: 'MAN',
  modell: 'TGL 12.180',
  fin: 'WMAUYYT1XPA123456',
  baujahr: 2018,
  erstzulassung: '2018-06-20',
  kmStand: 120000,
  betriebsstunden: null,
  leistungKw: 132,
  leistungPs: 180,
  kraftstoff: 'Diesel',
  getriebe: 'Manuell',
  farbe: 'Blau',
  zustand: 'Gebraucht',
  standort: 'Muenchen',
  preis: 29500,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'gelistet',
  typ: 'lkw',
  hsn: '0846',
  tsn: 'ABJ',
  lkwTyp: 'Kastenwagen',
  aufbau: 'Kuehlkoffer',
  abgasnorm: 'Euro 6',
  bereifung: '265/70 R19.5',
  achsen: '2',
  laenge: 7200,
  breite: 2100,
  hoehe: 2900,
  leergewicht: 4500,
  Gesamtgewicht: 12000,
  hubraum: 4880,
  vorbesitzer: 2,
  unfallschaeden: false,
  tuev: '06.2026',
  serviceIntervall: 100000,
  letzterService: '10.2025',
  beschreibung: 'MAN TGL mit Kuehlkoffer, tempiert bis +2°C',
  lkwBordgeraet: false,
  lkwHubwerk: false,
  lkwLadebordwand: true,
  lkwKlima: true,
  lkwSchlafplatz: false,
  lkwHydraulik: false,
  anhaengelast: 8000,
  kuppellast: 750
}, {
  id: 3,
  marke: 'BMW',
  modell: 'X5 xDrive30d',
  fin: 'WBAJA9C50K8123456',
  baujahr: 2023,
  erstzulassung: '2023-05-20',
  kmStand: 25000,
  betriebsstunden: null,
  leistungKw: 195,
  leistungPs: 265,
  kraftstoff: 'Diesel',
  getriebe: 'Automatik',
  farbe: 'Schwarz Metallic',
  zustand: 'Jahreswagen',
  standort: 'Muenchen',
  preis: 52000,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'gelistet',
  typ: 'pkw',
  hsn: '0511',
  tsn: 'CZ1',
  egTyp: 'e1*2007/46*1812*18',
  pkwKlasse: 'Oberklasse',
  pkwKarosserie: 'SUV',
  pkwTueren: '5',
  pkwSitze: '5',
  pkwHubraum: 2993,
  pkwAntrieb: 'Allrad',
  pkwVerbrauch: '7.2',
  pkwCo2: 189,
  pkwUmwelt: 'gruen',
  pkwReifen: '275/45 R20',
  pkwAusstattung: ['Klimaautomatik', 'Navigation', 'Tempomat', 'Sitzheizung', 'LED-Matrix', 'Head-Up-Display'],
  abgasnorm: 'Euro 6',
  vorbesitzer: 1,
  unfallschaeden: false,
  tuev: '05.2025',
  serviceIntervall: 30000,
  letzterService: '03.2026',
  laenge: 4922,
  breite: 2004,
  hoehe: 1776,
  leergewicht: 2095,
  Gesamtgewicht: 2670,
  beschreibung: 'BMW X5 xDrive30d, Jahreswagen, M-Sportpaket'
}, {
  id: 4,
  marke: 'Volkswagen',
  modell: 'Golf 8 2.0 TDI',
  fin: 'WVWZZZ1KZ8W123456',
  baujahr: 2022,
  erstzulassung: '2022-03-10',
  kmStand: 45000,
  betriebsstunden: null,
  leistungKw: 147,
  leistungPs: 200,
  kraftstoff: 'Diesel',
  getriebe: 'DSG',
  farbe: 'Grau',
  zustand: 'Gebraucht',
  standort: 'Muenchen',
  preis: 28000,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'gelistet',
  typ: 'pkw',
  hsn: '0600',
  tsn: 'BMR',
  pkwKlasse: 'Kompaktklasse',
  pkwKarosserie: 'Hatchback',
  pkwTueren: '5',
  pkwSitze: '5',
  pkwHubraum: 1968,
  pkwAntrieb: 'Front',
  pkwVerbrauch: '5.1',
  pkwCo2: 134,
  pkwUmwelt: 'gruen',
  pkwReifen: '225/45 R17',
  pkwAusstattung: ['Klimaautomatik', 'Navigation', 'Tempomat', 'Spurhalteassistent'],
  abgasnorm: 'Euro 6',
  vorbesitzer: 1,
  unfallschaeden: false,
  tuev: '03.2024',
  serviceIntervall: 30000,
  letzterService: '01.2026',
  laenge: 4284,
  breite: 1789,
  hoehe: 1456,
  leergewicht: 1420,
  Gesamtgewicht: 1910,
  beschreibung: 'VW Golf 8 2.0 TDI DSG, Style'
}, {
  id: 5,
  marke: 'Liebherr',
  modell: 'R 926 Crawler',
  fin: 'LIR92620201234567',
  baujahr: 2020,
  erstzulassung: null,
  kmStand: null,
  betriebsstunden: 3200,
  leistungKw: 150,
  leistungPs: 204,
  kraftstoff: 'Diesel',
  getriebe: 'Hydrostat',
  farbe: 'Gelb',
  zustand: 'Gebraucht',
  standort: 'Berlin',
  preis: 89000,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'nicht_gelistet',
  typ: 'baumaschine',
  art: 'Bagger',
  aufbau: 'Hydraulikbagger 26t',
  bsEinheit: 'h',
  abgasnorm: 'Euro 5',
  vorbesitzer: 1,
  unfallschaeden: false,
  beschreibung: 'Liebherr R 926, 26t Raupenbagger'
}, {
  id: 6,
  marke: 'Toyota',
  modell: '8FBE20 Elektrostapler',
  fin: 'TOY8FBE20220123456',
  baujahr: 2022,
  erstzulassung: null,
  kmStand: null,
  betriebsstunden: 1850,
  leistungKw: 4.5,
  leistungPs: 6,
  kraftstoff: 'Elektro',
  getriebe: 'Stufenlos',
  farbe: 'Orange',
  zustand: 'Gebraucht',
  standort: 'Berlin',
  preis: 18500,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'nicht_gelistet',
  typ: 'stapler',
  abgasnorm: 'Keine',
  staplerTrag: 2000,
  staplerHubhoehe: 4500,
  staplerBauhoehe: 2230,
  staplerMast: 'Dreisteg',
  staplerAntrieb: 'Elektro',
  staplerBatterieKwh: 12.5,
  staplerBatterieTyp: 'Lithium-Ion',
  staplerReifen: 'Superelastik',
  staplerLastschwerpunkt: 500,
  staplerFahrkomponente: 'Stapler',
  beschreibung: 'Toyota 8FBE20 Elektro-Gabelstapler, 2t'
}, {
  id: 7,
  marke: 'Scania',
  modell: 'R 500 Highline',
  fin: 'SCNR5002019123456',
  baujahr: 2019,
  erstzulassung: '2019-08-05',
  kmStand: 210000,
  betriebsstunden: null,
  leistungKw: 368,
  leistungPs: 500,
  kraftstoff: 'Diesel',
  getriebe: 'Automatik',
  farbe: 'Rot',
  zustand: 'Gebraucht',
  standort: 'Muenchen',
  preis: 38000,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'fehler',
  typ: 'lkw',
  hsn: '0856',
  tsn: 'CKL',
  lkwTyp: 'Sattelzugmaschine',
  aufbau: '2-Achs Sattelzug',
  abgasnorm: 'Euro 6',
  bereifung: '315/70 R22.5',
  achsen: '2',
  laenge: 5800,
  breite: 2500,
  hoehe: 3800,
  leergewicht: 7500,
  Gesamtgewicht: 18000,
  hubraum: 16400,
  vorbesitzer: 2,
  unfallschaeden: true,
  tuev: '08.2026',
  lkwBordgeraet: true,
  lkwKlima: true,
  lkwSchlafplatz: true,
  anhaengelast: 40000,
  kuppellast: 15000,
  beschreibung: 'Scania R 500 Highline, V8, G410 Retarder'
}, {
  id: 8,
  marke: 'Linde',
  modell: 'H25D Dieselsappler',
  fin: 'LINH25D20211234567',
  baujahr: 2021,
  erstzulassung: null,
  kmStand: null,
  betriebsstunden: 3200,
  leistungKw: 36,
  leistungPs: 49,
  kraftstoff: 'Diesel',
  getriebe: 'Stufenlos',
  farbe: 'Gelb',
  zustand: 'Gebraucht',
  standort: 'Koeln',
  preis: 28000,
  verfuegbarkeit: 'verfuegbar',
  mobiledeStatus: 'nicht_gelistet',
  typ: 'stapler',
  abgasnorm: 'Euro 5',
  staplerTrag: 2500,
  staplerHubhoehe: 3000,
  staplerBauhoehe: 1990,
  staplerMast: 'Zweisteg',
  staplerAntrieb: 'Diesel',
  staplerBatterieKwh: null,
  staplerBatterieTyp: null,
  staplerReifen: 'Vollgummi',
  staplerLastschwerpunkt: 500,
  staplerFahrkomponente: 'Stapler',
  beschreibung: 'Linde H25D Dieselstapler, 2.5t'
}];
const mockContactsKaeufer = [{
  id: 1,
  firmenname: 'Mueller Transport GmbH',
  ansprechpartner: 'Thomas Mueller',
  email: 't.mueller@mueller-transport.de',
  telefon: '+49 89 1234567',
  land: 'Deutschland',
  ustId: 'DE123456789',
  ustStatus: 'geprueft',
  rolle: 'kaeufer',
  adresse: 'Ludwigstrasse 45, 80336 Muenchen'
}, {
  id: 2,
  firmenname: 'Bauer Bauunternehmen GmbH',
  ansprechpartner: 'Klaus Bauer',
  email: 'k.bauer@bauer-bau.de',
  telefon: '+49 30 9876543',
  land: 'Deutschland',
  ustId: 'DE987654321',
  ustStatus: 'geprueft',
  rolle: 'kaeufer',
  adresse: 'Alexanderplatz 5, 10178 Berlin'
}, {
  id: 4,
  firmenname: 'Van den Berg Logistics B.V.',
  ansprechpartner: 'Jan van den Berg',
  email: 'j.vandenberg@vdberg.nl',
  telefon: '+31 20 123 4567',
  land: 'Niederlande',
  ustId: 'NL123456789B01',
  ustStatus: 'manuell_best',
  rolle: 'kaeufer',
  adresse: 'Keizersgracht 100, 1015 Amsterdam'
}];
const mockContactsVerkaeufer = [{
  id: 3,
  firmenname: 'TransLog AG',
  ansprechpartner: 'Peter Schneider',
  email: 'p.schneider@translog.ch',
  telefon: '+41 44 555 1234',
  land: 'Schweiz',
  ustId: '',
  ustStatus: 'ungeprueft',
  rolle: 'verkaeufer',
  adresse: 'Bahnhofstrasse 12, 8001 Zuerich'
}, {
  id: 5,
  firmenname: 'Schmidt Baumaschinen GmbH',
  ansprechpartner: 'Andrea Schmidt',
  email: 'a.schmidt@schmidt-baumaschinen.de',
  telefon: '+49 221 555 7890',
  land: 'Deutschland',
  ustId: 'DE555444333',
  ustStatus: 'geprueft',
  rolle: 'beides',
  adresse: 'Hohe Strasse 30, 50667 Koeln'
}];
const statusBadge = s => {
  const m = {
    verfuegbar: {
      v: 'success',
      l: t('fb.verfuegbar')
    },
    reserviert: {
      v: 'warning',
      l: t('fb.reserviert')
    },
    verkauft: {
      v: 'neutral',
      l: t('fb.verkauft')
    }
  };
  const c = m[s] || m.verfuegbar;
  return /*#__PURE__*/React.createElement(Badge, {
    variant: c.v
  }, c.l);
};
const mobiledeBadge = s => {
  const m = {
    gelistet: {
      v: 'success',
      l: t('fb.gelistet')
    },
    nicht_gelistet: {
      v: 'neutral',
      l: t('fb.nicht_gelistet')
    },
    fehler: {
      v: 'error',
      l: t('fb.fehler')
    },
    entfernt: {
      v: 'neutral',
      l: 'Entfernt'
    }
  };
  const c = m[s] || m.nicht_gelistet;
  return /*#__PURE__*/React.createElement(Badge, {
    variant: c.v
  }, c.l);
};
const typIcon = typ => typ === 'baumaschine' ? 'wrench' : typ === 'pkw' ? 'car' : typ === 'stapler' ? 'forklift' : 'truck';
const typLabel = typ => typ === 'lkw' ? 'LKW' : typ === 'baumaschine' ? 'Baumaschine' : typ === 'pkw' ? 'PKW' : typ === 'stapler' ? 'Stapler' : 'Transporter';

// ============ DASHBOARD (v4 configurable) ============
const DashboardView = ({
  navigate,
  role
}) => {
  const [widgets, setWidgets] = useState(() => {
    const saved = localStorage.getItem('erp-dashboard-widgets');
    if (saved) try {
      return JSON.parse(saved);
    } catch (e) {}
    return {
      kpis: true,
      quickActions: true,
      activities: true,
      tasks: true,
      topVehicles: true
    };
  });
  const [showConfig, setShowConfig] = useState(false);
  const saveWidgets = w => {
    setWidgets(w);
    localStorage.setItem('erp-dashboard-widgets', JSON.stringify(w));
  };
  const toggleWidget = key => saveWidgets({
    ...widgets,
    [key]: !widgets[key]
  });
  const kpis = [{
    label: 'dash.fahrzeuge_im_bestand',
    value: '52',
    trend: '+5 diesen Monat',
    trendDir: 'up',
    icon: 'truck',
    color: 'primary'
  }, {
    label: 'dash.verkaufe_diesen_monat',
    value: '14',
    trend: '+20% vs. Vormonat',
    trendDir: 'up',
    icon: 'sale',
    color: 'success'
  }, {
    label: 'dash.offene_tasks',
    value: '8',
    trend: '3 ueberfaellig',
    trendDir: 'down',
    icon: 'clock',
    color: 'warning'
  }, {
    label: 'dash.mobilede_sync',
    value: '35/52',
    trend: '17 nicht gelistet',
    trendDir: 'down',
    icon: 'sync',
    color: 'info'
  }];
  const recentActivities = [{
    type: 'sale',
    text: 'Mercedes Actros an Mueller GmbH verkauft',
    time: 'vor 2 Std'
  }, {
    type: 'add',
    text: 'Neues Fahrzeug: BMW X5 xDrive30d (PKW)',
    time: 'vor 4 Std'
  }, {
    type: 'add',
    text: 'Neuer Stapler: Toyota 8FBE20 Elektrostapler',
    time: 'vor 5 Std'
  }, {
    type: 'sync',
    text: 'mobile.de Sync: 5 Fahrzeuge aktualisiert',
    time: 'vor 6 Std'
  }, {
    type: 'edit',
    text: 'Preis aktualisiert: MAN TGL - 32.000 -> 29.500',
    time: 'vor 1 Tag'
  }];
  const upcomingTasks = [{
    task: 'USt-IdNr.-Pruefung fuer Mueller GmbH (EU-Ausland)',
    due: '15.07.2026',
    priority: 'high'
  }, {
    task: 'Kaufvertrag: Volvo FH16 an Bauer GmbH',
    due: '16.07.2026',
    priority: 'high'
  }, {
    task: 'DATEV-Export fuer Juni 2026',
    due: '20.07.2026',
    priority: 'medium'
  }, {
    task: 'Fahrzeugfotos nachretuschieren (3 Fahrzeuge)',
    due: '22.07.2026',
    priority: 'low'
  }];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 'var(--space-6)',
      flexWrap: 'wrap',
      gap: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t('dash.title')), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)',
      marginTop: 'var(--space-1)'
    }
  }, "Willkommen zurueck, Max!")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-2)'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    icon: "config",
    onClick: () => setShowConfig(true),
    title: "Dashboard konfigurieren"
  }), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "plus",
    onClick: () => navigate('/fahrzeuge/neu'),
    className: "hide-mobile"
  }, t('dash.neues_fahrzeug')))), widgets.kpis && /*#__PURE__*/React.createElement("div", {
    className: "kpi-grid",
    style: {
      marginBottom: 'var(--space-6)'
    }
  }, kpis.map((k, i) => /*#__PURE__*/React.createElement(KpiCard, {
    key: i,
    ...k
  }))), widgets.quickActions && /*#__PURE__*/React.createElement(Card, {
    title: t('dash.schnellzugriffe'),
    className: "hide-mobile",
    style: {
      marginBottom: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-4)',
      flexWrap: 'wrap'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "plus",
    onClick: () => navigate('/fahrzeuge/neu')
  }, t('dash.neues_fahrzeug')), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    icon: "sale",
    onClick: () => navigate('/verkauf')
  }, t('dash.neuer_verkauf')), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    icon: "ai",
    onClick: () => navigate('/ki-copilot')
  }, t('dash.ki_copilot')), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    icon: "calendar",
    onClick: () => navigate('/verkauf')
  }, "Verkaufskalender"))), /*#__PURE__*/React.createElement("div", {
    className: "two-col",
    style: {
      marginBottom: 'var(--space-6)'
    }
  }, widgets.activities && /*#__PURE__*/React.createElement(Card, {
    title: t('dash.letzte_aktivitaeten')
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 'var(--space-4)'
    }
  }, recentActivities.map((act, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      display: 'flex',
      gap: 'var(--space-3)',
      alignItems: 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 32,
      height: 32,
      borderRadius: 'var(--radius-md)',
      flexShrink: 0,
      background: act.type === 'sale' ? 'var(--color-success-light)' : act.type === 'add' ? 'var(--color-primary-light)' : act.type === 'sync' ? 'var(--color-info-light)' : 'var(--color-warning-light)',
      color: act.type === 'sale' ? 'var(--color-success)' : act.type === 'add' ? 'var(--color-primary)' : act.type === 'sync' ? 'var(--color-info)' : 'var(--color-warning)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: act.type === 'sale' ? 'sale' : act.type === 'add' ? 'plus' : act.type === 'sync' ? 'sync' : 'edit',
    size: 16
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-sm)',
      fontWeight: 'var(--font-weight-medium)'
    }
  }, act.text), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, act.time)))))), widgets.tasks && /*#__PURE__*/React.createElement(Card, {
    title: t('dash.bevorstehende_tasks')
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 'var(--space-3)'
    }
  }, upcomingTasks.map((task, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-3)',
      padding: 'var(--space-3)',
      borderRadius: 'var(--radius-md)',
      border: '1px solid var(--color-border)'
    }
  }, /*#__PURE__*/React.createElement(Badge, {
    variant: task.priority === 'high' ? 'error' : task.priority === 'medium' ? 'warning' : 'neutral'
  }, task.priority === 'high' ? 'Hoch' : task.priority === 'medium' ? 'Mittel' : 'Niedrig'), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      fontSize: 'var(--font-size-sm)'
    }
  }, task.task), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)',
      whiteSpace: 'nowrap'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "calendar",
    size: 14
  }), " ", task.due)))))), widgets.topVehicles && /*#__PURE__*/React.createElement(Card, {
    title: t('dash.top_fahrzeuge')
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Marke"), /*#__PURE__*/React.createElement("th", null, "FIN"), /*#__PURE__*/React.createElement("th", null, "Anfragen"), /*#__PURE__*/React.createElement("th", null, "Preis"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
    onClick: () => navigate('/fahrzeug/1'),
    style: {
      cursor: 'pointer'
    }
  }, /*#__PURE__*/React.createElement("td", null, "Mercedes Actros 2019"), /*#__PURE__*/React.createElement("td", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  }, "WDB9066351L123456"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "24")), /*#__PURE__*/React.createElement("td", null, "45.000")), /*#__PURE__*/React.createElement("tr", {
    onClick: () => navigate('/fahrzeug/3'),
    style: {
      cursor: 'pointer'
    }
  }, /*#__PURE__*/React.createElement("td", null, "BMW X5 xDrive30d"), /*#__PURE__*/React.createElement("td", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  }, "WBAJA9C50K8123456"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "18")), /*#__PURE__*/React.createElement("td", null, "52.000")), /*#__PURE__*/React.createElement("tr", {
    onClick: () => navigate('/fahrzeug/5'),
    style: {
      cursor: 'pointer'
    }
  }, /*#__PURE__*/React.createElement("td", null, "Liebherr R 926"), /*#__PURE__*/React.createElement("td", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  }, "LIR92620201234567"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "12")), /*#__PURE__*/React.createElement("td", null, "89.000"))))), showConfig && /*#__PURE__*/React.createElement("div", {
    className: "modal-overlay",
    onClick: () => setShowConfig(false)
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal-header"
  }, /*#__PURE__*/React.createElement("h3", {
    style: {
      fontSize: 'var(--font-size-lg)',
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "config",
    size: 20
  }), " Dashboard konfigurieren"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm",
    onClick: () => setShowConfig(false)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "close",
    size: 20
  }))), /*#__PURE__*/React.createElement("div", {
    className: "modal-body"
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-sm)',
      color: 'var(--color-text-secondary)',
      marginBottom: 'var(--space-4)'
    }
  }, "Widgets ein-/ausblenden. Konfiguration wird pro Benutzer gespeichert."), [{
    key: 'kpis',
    label: 'KPI-Kennzahlen'
  }, {
    key: 'quickActions',
    label: 'Schnellzugriffe'
  }, {
    key: 'activities',
    label: 'Letzte Aktivitaeten'
  }, {
    key: 'tasks',
    label: 'Bevorstehende Tasks'
  }, {
    key: 'topVehicles',
    label: 'Top-Fahrzeuge'
  }].map(item => /*#__PURE__*/React.createElement("div", {
    key: item.key,
    className: "config-item"
  }, /*#__PURE__*/React.createElement("span", {
    className: "config-item-label"
  }, item.label), /*#__PURE__*/React.createElement("div", {
    className: `toggle ${widgets[item.key] ? 'active' : ''}`,
    onClick: () => toggleWidget(item.key)
  })))), /*#__PURE__*/React.createElement("div", {
    className: "modal-footer"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    onClick: () => setShowConfig(false)
  }, "Fertig")))));
};

// ============ FAHRZEUG LISTE ============
const FahrzeugListe = ({
  navigate,
  role
}) => {
  const [search, setSearch] = useState('');
  const [filterType, setFilterType] = useState('alle');
  const [filterStatus, setFilterStatus] = useState('alle');
  const [sortBy, setSortBy] = useState('marke');
  const [sortDir, setSortDir] = useState('asc');
  const [view, setView] = useState('table');
  const [page, setPage] = useState(1);
  const perPage = 10;
  const filtered = useMemo(() => {
    let r = mockVehicles.filter(v => {
      const ms = !search || v.marke.toLowerCase().includes(search.toLowerCase()) || v.modell.toLowerCase().includes(search.toLowerCase()) || v.fin.toLowerCase().includes(search.toLowerCase()) || (v.hsn || '').includes(search);
      const mt = filterType === 'alle' || v.typ === filterType;
      const mst = filterStatus === 'alle' || v.verfuegbarkeit === filterStatus;
      return ms && mt && mst;
    });
    r.sort((a, b) => {
      const av = a[sortBy] || '',
        bv = b[sortBy] || '';
      if (typeof av === 'number') return sortDir === 'asc' ? av - bv : bv - av;
      return sortDir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
    });
    return r;
  }, [search, filterType, filterStatus, sortBy, sortDir]);
  const totalPages = Math.ceil(filtered.length / perPage);
  const pageData = filtered.slice((page - 1) * perPage, page * perPage);
  const handleSort = col => {
    if (sortBy === col) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');else {
      setSortBy(col);
      setSortDir('asc');
    }
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 'var(--space-6)',
      flexWrap: 'wrap',
      gap: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t('fb.title')), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)'
    }
  }, filtered.length, " ", t('common.eintraege'))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-2)',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(ViewToggle, {
    view: view,
    onChange: setView
  }), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    icon: "download",
    className: "hide-mobile"
  }, "Export"), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "plus",
    onClick: () => navigate('/fahrzeuge/neu')
  }, t('fb.add_new')))), /*#__PURE__*/React.createElement(Card, {
    style: {
      marginBottom: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-4)',
      flexWrap: 'wrap',
      alignItems: 'flex-end'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: '1 1 300px'
    }
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Suche (Marke, Modell, FIN, HSN)"), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "search",
    size: 16,
    style: {
      position: 'absolute',
      left: 'var(--space-3)',
      top: '50%',
      transform: 'translateY(-50%)',
      color: 'var(--color-text-muted)'
    }
  }), /*#__PURE__*/React.createElement("input", {
    className: "input",
    style: {
      paddingLeft: 'var(--space-8)'
    },
    placeholder: t('fb.suche'),
    value: search,
    onChange: e => {
      setSearch(e.target.value);
      setPage(1);
    }
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Typ"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: filterType,
    onChange: e => {
      setFilterType(e.target.value);
      setPage(1);
    }
  }, /*#__PURE__*/React.createElement("option", {
    value: "alle"
  }, "Alle"), /*#__PURE__*/React.createElement("option", {
    value: "lkw"
  }, "LKW"), /*#__PURE__*/React.createElement("option", {
    value: "baumaschine"
  }, "Baumaschine"), /*#__PURE__*/React.createElement("option", {
    value: "pkw"
  }, "PKW"), /*#__PURE__*/React.createElement("option", {
    value: "stapler"
  }, "Stapler"), /*#__PURE__*/React.createElement("option", {
    value: "transporter"
  }, "Transporter"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Status"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: filterStatus,
    onChange: e => {
      setFilterStatus(e.target.value);
      setPage(1);
    }
  }, /*#__PURE__*/React.createElement("option", {
    value: "alle"
  }, "Alle"), /*#__PURE__*/React.createElement("option", {
    value: "verfuegbar"
  }, "Verfuegbar"), /*#__PURE__*/React.createElement("option", {
    value: "reserviert"
  }, "Reserviert"), /*#__PURE__*/React.createElement("option", {
    value: "verkauft"
  }, "Verkauft"))), /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    icon: "close",
    onClick: () => {
      setSearch('');
      setFilterType('alle');
      setFilterStatus('alle');
    }
  }, "Reset"))), pageData.length === 0 ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(EmptyState, {
    icon: "truck",
    title: "Keine Fahrzeuge",
    text: "Legen Sie Ihr erstes Fahrzeug an.",
    action: role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
      variant: "primary",
      icon: "plus",
      onClick: () => navigate('/fahrzeuge/neu')
    }, "Fahrzeug hinzufuegen")
  })) : view === 'table' ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
    style: {
      overflowX: 'auto'
    }
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
    className: sortBy === 'marke' ? 'sorted' : '',
    onClick: () => handleSort('marke')
  }, "Marke"), /*#__PURE__*/React.createElement("th", null, "Modell"), /*#__PURE__*/React.createElement("th", null, "FIN"), /*#__PURE__*/React.createElement("th", null, "Baujahr"), /*#__PURE__*/React.createElement("th", {
    className: "hide-mobile"
  }, "KM/h"), /*#__PURE__*/React.createElement("th", {
    className: sortBy === 'preis' ? 'sorted' : '',
    onClick: () => handleSort('preis')
  }, "Preis"), /*#__PURE__*/React.createElement("th", null, "Typ"), /*#__PURE__*/React.createElement("th", null, "Status"), /*#__PURE__*/React.createElement("th", {
    className: "hide-mobile"
  }, "mobile.de"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, pageData.map(v => /*#__PURE__*/React.createElement("tr", {
    key: v.id,
    onClick: () => navigate('/fahrzeug/' + v.id),
    style: {
      cursor: 'pointer'
    }
  }, /*#__PURE__*/React.createElement("td", {
    style: {
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, v.marke), /*#__PURE__*/React.createElement("td", null, v.modell), /*#__PURE__*/React.createElement("td", {
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  }, v.fin), /*#__PURE__*/React.createElement("td", null, v.baujahr), /*#__PURE__*/React.createElement("td", {
    className: "hide-mobile"
  }, v.kmStand ? formatNumber(v.kmStand) + ' km' : v.betriebsstunden ? formatNumber(v.betriebsstunden) + ' h' : '-'), /*#__PURE__*/React.createElement("td", {
    style: {
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, formatPrice(v.preis)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, typLabel(v.typ))), /*#__PURE__*/React.createElement("td", null, statusBadge(v.verfuegbarkeit)), /*#__PURE__*/React.createElement("td", {
    className: "hide-mobile"
  }, mobiledeBadge(v.mobiledeStatus)), /*#__PURE__*/React.createElement("td", {
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-1)'
    }
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm",
    onClick: () => navigate('/fahrzeug/' + v.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "eye",
    size: 16
  })), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm",
    onClick: () => navigate('/fahrzeuge/neu?id=' + v.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "edit",
    size: 16
  }))))))))), /*#__PURE__*/React.createElement("div", {
    className: "pagination"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pagination-info"
  }, (page - 1) * perPage + 1, "-", Math.min(page * perPage, filtered.length), " von ", filtered.length), /*#__PURE__*/React.createElement("div", {
    className: "pagination-controls"
  }, /*#__PURE__*/React.createElement("button", {
    className: "pagination-btn",
    disabled: page === 1,
    onClick: () => setPage(page - 1)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevronLeft",
    size: 16
  })), Array.from({
    length: totalPages
  }, (_, i) => i + 1).map(p => /*#__PURE__*/React.createElement("button", {
    key: p,
    className: `pagination-btn ${page === p ? 'active' : ''}`,
    onClick: () => setPage(p)
  }, p)), /*#__PURE__*/React.createElement("button", {
    className: "pagination-btn",
    disabled: page === totalPages,
    onClick: () => setPage(page + 1)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chevronRight",
    size: 16
  }))))) : /*#__PURE__*/React.createElement("div", {
    className: "card-grid"
  }, filtered.map(v => /*#__PURE__*/React.createElement("div", {
    key: v.id,
    className: "vehicle-card",
    onClick: () => navigate('/fahrzeug/' + v.id)
  }, /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-image"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: typIcon(v.typ),
    size: 48,
    style: {
      color: 'var(--color-text-muted)'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "card-status-badge"
  }, statusBadge(v.verfuegbarkeit))), /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-body"
  }, /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-title"
  }, v.marke, " ", v.modell), /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-subtitle"
  }, "FIN: ", v.fin), /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-info"
  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
    name: "calendar",
    size: 12
  }), " ", v.baujahr), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, typLabel(v.typ)))), /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-meta"
  }, /*#__PURE__*/React.createElement("div", {
    className: "vehicle-card-price"
  }, formatPrice(v.preis)), mobiledeBadge(v.mobiledeStatus)))))));
};

// ============ FAHRZEUG DETAIL ============
const FahrzeugDetail = ({
  id,
  navigate,
  role
}) => {
  const [activeTab, setActiveTab] = useState('allgemein');
  const [photos, setPhotos] = useState([{
    id: 1,
    category: 'aussen_front',
    isMain: true
  }, {
    id: 2,
    category: 'aussen_seite',
    isMain: false
  }, {
    id: 3,
    category: 'aussen_heck',
    isMain: false
  }, {
    id: 4,
    category: 'innen_armaturen',
    isMain: false
  }]);
  const vehicle = mockVehicles.find(v => v.id === parseInt(id));
  if (!vehicle) return /*#__PURE__*/React.createElement(ErrorState, {
    title: "Nicht gefunden",
    text: "Fahrzeug existiert nicht.",
    onRetry: () => navigate('/fahrzeuge')
  });
  const tabs = [{
    id: 'allgemein',
    label: 'Allgemein'
  }, {
    id: 'technisch',
    label: 'Technisch'
  }, {
    id: 'abmessungen',
    label: 'Abmessungen'
  }, ...(vehicle.typ === 'baumaschine' ? [{
    id: 'baumaschine',
    label: 'Baumaschine'
  }] : []), ...(vehicle.typ === 'pkw' ? [{
    id: 'pkw',
    label: 'PKW-Daten'
  }] : []), ...(vehicle.typ === 'stapler' ? [{
    id: 'stapler',
    label: 'Stapler-Daten'
  }] : []), ...(vehicle.typ === 'lkw' ? [{
    id: 'lkw',
    label: 'LKW-Daten'
  }] : []), {
    id: 'verkaufsinfo',
    label: 'Verkaufsinfo'
  }, {
    id: 'dokumente',
    label: 'Dokumente'
  }, {
    id: 'fotos',
    label: 'Fotos'
  }, {
    id: 'mobilede',
    label: 'mobile.de'
  }];
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-4)',
      marginBottom: 'var(--space-6)',
      flexWrap: 'wrap'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    icon: "chevronLeft",
    onClick: () => navigate('/fahrzeuge')
  }, t('fd.zurueck')), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, vehicle.marke, " ", vehicle.modell), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)',
      fontFamily: 'var(--font-mono)'
    }
  }, "FIN: ", vehicle.fin, " · HSN: ", vehicle.hsn || '-', " · TSN: ", vehicle.tsn || '-')), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    icon: "edit",
    onClick: () => navigate('/fahrzeuge/neu?id=' + vehicle.id)
  }, "Bearbeiten"), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "sale",
    onClick: () => navigate('/verkauf?vehicle=' + vehicle.id)
  }, "Verkaufen")), /*#__PURE__*/React.createElement("div", {
    className: "tabs"
  }, tabs.map(tab => /*#__PURE__*/React.createElement("div", {
    key: tab.id,
    className: `tab ${activeTab === tab.id ? 'active' : ''}`,
    onClick: () => setActiveTab(tab.id)
  }, tab.label))), activeTab === 'allgemein' && /*#__PURE__*/React.createElement(Card, {
    title: "Allgemein"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Marke"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.marke)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Modell"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.modell)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "FIN"), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  }, vehicle.fin)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Baujahr"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.baujahr)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Erstzulassung"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.erstzulassung ? formatDate(vehicle.erstzulassung) : '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Farbe"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.farbe)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Zustand"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.zustand)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Standort"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.standort)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "HSN ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(2.1)"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  }, vehicle.hsn || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "TSN ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(2.2)"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  }, vehicle.tsn || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "EG-Typgenehmigung ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "K"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  }, vehicle.egTyp || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Vorbesitzer"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.vorbesitzer || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Unfallschaeden"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.unfallschaeden ? /*#__PURE__*/React.createElement(Badge, {
    variant: "error"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "TUeV/AU"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.tuev || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Letzter Service"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.letzterService || '-'))), vehicle.beschreibung && /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 'var(--space-4)',
      paddingTop: 'var(--space-4)',
      borderTop: '1px solid var(--color-border)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Beschreibung"), /*#__PURE__*/React.createElement("p", {
    style: {
      marginTop: 'var(--space-2)',
      fontSize: 'var(--font-size-sm)'
    }
  }, vehicle.beschreibung))), activeTab === 'technisch' && /*#__PURE__*/React.createElement(Card, {
    title: "Technische Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Leistung (kW) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "P.2"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.leistungKw, " kW")), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Leistung (PS)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.leistungPs, " PS")), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Kraftstoff ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "P.3"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.kraftstoff)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Getriebe"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.getriebe)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Hubraum (ccm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "P.1"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.hubraum || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Abgasnorm"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.abgasnorm || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "KM-Stand"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.kmStand ? formatNumber(vehicle.kmStand) + ' km' : '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Betriebsstunden"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.betriebsstunden ? formatNumber(vehicle.betriebsstunden) + ' h' : '-')))), activeTab === 'abmessungen' && /*#__PURE__*/React.createElement(Card, {
    title: "Abmessungen & Gewichte"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Laenge (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(18)"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.laenge || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Breite (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(19)"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.breite || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Hoehe (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(20)"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.hoehe || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Leergewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "G"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.leergewicht || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Gesamtgewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "F.1"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.Gesamtgewicht || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Achsen ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "L"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.achsen || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Bereifung ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(15)"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.bereifung || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Anhaengelast ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "O.1"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.anhaengelast ? formatNumber(vehicle.anhaengelast) + ' kg' : '-')))), activeTab === 'pkw' && vehicle.typ === 'pkw' && /*#__PURE__*/React.createElement(Card, {
    title: "PKW-Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Fahrzeugklasse"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwKlasse)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Karosserie"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwKarosserie)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Tueren"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwTueren)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Sitzplaetze ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "S.1"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwSitze)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Antriebsart"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwAntrieb)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Verbrauch (l/100km)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwVerbrauch)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "CO2 (g/km) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "V.7"
  })), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.pkwCo2)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Umweltplakette"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, /*#__PURE__*/React.createElement(Badge, {
    variant: vehicle.pkwUmwelt === 'gruen' ? 'success' : 'warning'
  }, vehicle.pkwUmwelt)))), vehicle.pkwAusstattung && /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 'var(--space-4)',
      paddingTop: 'var(--space-4)',
      borderTop: '1px solid var(--color-border)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Ausstattung"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: 'var(--space-2)',
      marginTop: 'var(--space-2)'
    }
  }, vehicle.pkwAusstattung.map((a, i) => /*#__PURE__*/React.createElement(Badge, {
    key: i,
    variant: "primary"
  }, a))))), activeTab === 'lkw' && vehicle.typ === 'lkw' && /*#__PURE__*/React.createElement(Card, {
    title: "LKW-Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "LKW-Typ"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwTyp)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Aufbau"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.aufbau || '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Bordgeraet"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwBordgeraet ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Hubwerk"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwHubwerk ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Ladebordwand"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwLadebordwand ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Klimaanlage"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwKlima ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Schlafplatz"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwSchlafplatz ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Hydraulik"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.lkwHydraulik ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Ja") : /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Nein"))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Anhaengelast (kg)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.anhaengelast ? formatNumber(vehicle.anhaengelast) : '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Kuppelast (kg)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.kuppellast ? formatNumber(vehicle.kuppellast) : '-')))), activeTab === 'baumaschine' && vehicle.typ === 'baumaschine' && /*#__PURE__*/React.createElement(Card, {
    title: "Baumaschinen-Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Art"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.art)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Betriebsstunden"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.betriebsstunden ? formatNumber(vehicle.betriebsstunden) + ' h' : '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Aufbau"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.aufbau || '-')))), activeTab === 'stapler' && vehicle.typ === 'stapler' && /*#__PURE__*/React.createElement(Card, {
    title: "Stapler-Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Tragfaehigkeit (kg)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerTrag)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Hubhoehe (mm)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerHubhoehe)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Bauhoehe (mm)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerBauhoehe)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Masttyp"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerMast)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Antrieb"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerAntrieb)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Batterie"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerBatterieKwh ? vehicle.staplerBatterieKwh + ' kWh' : '-')), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Reifenart"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.staplerReifen)))), activeTab === 'verkaufsinfo' && /*#__PURE__*/React.createElement(Card, {
    title: "Verkaufsinfo"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Preis"), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontSize: 'var(--font-size-xl)',
      color: 'var(--color-primary)'
    }
  }, formatPrice(vehicle.preis))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Status"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, statusBadge(vehicle.verfuegbarkeit))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Standort"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, vehicle.standort)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Typ"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, typLabel(vehicle.typ))))), activeTab === 'dokumente' && /*#__PURE__*/React.createElement(Card, {
    title: "Dokumente"
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Dateiname"), /*#__PURE__*/React.createElement("th", null, "Kategorie"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "ZB_I_Fahrzeugschein.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, "ZB I")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 16
  })))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "ZB_II_Fahrzeugbrief.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, "ZB II")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 16
  })))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "Vertrag")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 16
  }))))))), activeTab === 'fotos' && /*#__PURE__*/React.createElement(Card, {
    title: "Fotos"
  }, /*#__PURE__*/React.createElement(ImageManager, {
    photos: photos,
    setPhotos: setPhotos,
    role: role
  })), activeTab === 'mobilede' && /*#__PURE__*/React.createElement(Card, {
    title: "mobile.de Status"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 'var(--space-4)'
    }
  }, mobiledeBadge(vehicle.mobiledeStatus)), vehicle.mobiledeStatus === 'fehler' && /*#__PURE__*/React.createElement("div", {
    className: "warning-banner"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "alert",
    size: 20,
    className: "warning-banner-icon"
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "API Fehler:"), " Pflichtfeld fehlt.")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-2)',
      flexWrap: 'wrap'
    }
  }, role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "sync"
  }, "Sync"), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    icon: "chart"
  }, "Preisvergleich"))));
};

// ============ FAHRZEUG FORM (v4 tabbed) ============
const FahrzeugForm = ({
  navigate,
  editId
}) => {
  const [typ, setTyp] = useState('lkw');
  const [errors, setErrors] = useState({});
  const [ocrLoading, setOcrLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [photos, setPhotos] = useState([]);
  const [activeFormTab, setActiveFormTab] = useState('allgemein');
  const editVehicle = editId ? mockVehicles.find(v => v.id === parseInt(editId)) : null;
  const [form, setForm] = useState(editVehicle || {
    marke: '',
    modell: '',
    fin: '',
    baujahr: '',
    erstzulassung: '',
    kmStand: '',
    betriebsstunden: '',
    leistungKw: '',
    leistungPs: '',
    kraftstoff: 'Diesel',
    getriebe: 'Manuell',
    farbe: '',
    zustand: 'Gebraucht',
    standort: 'Muenchen',
    preis: '',
    hsn: '',
    tsn: '',
    egTyp: '',
    hubraum: '',
    abgasnorm: 'Euro 6',
    vorbesitzer: '',
    unfallschaeden: false,
    tuev: '',
    letzterService: '',
    serviceIntervall: '',
    laenge: '',
    breite: '',
    hoehe: '',
    leergewicht: '',
    Gesamtgewicht: '',
    achsen: '',
    bereifung: '',
    anhaengelast: '',
    kuppellast: '',
    antriebsart: '',
    verbrauch: '',
    co2: '',
    umweltplakette: 'gruen',
    lkwTyp: '',
    aufbau: '',
    lkwBordgeraet: false,
    lkwHubwerk: false,
    lkwLadebordwand: false,
    lkwKlima: false,
    lkwSchlafplatz: false,
    lkwHydraulik: false,
    art: '',
    bsEinheit: 'h',
    pkwKlasse: '',
    pkwKarosserie: '',
    pkwTueren: '',
    pkwSitze: '',
    pkwHubraum: '',
    pkwAntrieb: '',
    pkwVerbrauch: '',
    pkwCo2: '',
    pkwUmwelt: 'gruen',
    pkwReifen: '',
    pkwAusstattung: [],
    staplerTrag: '',
    staplerHubhoehe: '',
    staplerBauhoehe: '',
    staplerMast: '',
    staplerAntrieb: 'Elektro',
    staplerBatterieKwh: '',
    staplerBatterieTyp: '',
    staplerReifen: 'Superelastik',
    staplerLastschwerpunkt: '500',
    staplerFahrkomponente: 'Stapler',
    kaufpreis: '',
    mwst: '19',
    provision: '',
    lagerkosten: '',
    transportkosten: '',
    beschreibung: ''
  });
  const update = (f, v) => setForm({
    ...form,
    [f]: v
  });
  const validate = () => {
    const e = {};
    if (!form.marke) e.marke = 'Pflicht';
    if (!form.modell) e.modell = 'Pflicht';
    if (!form.fin) e.fin = 'Pflicht';else if (form.fin.length !== 17) e.fin = '17 Zeichen';
    if (!form.baujahr) e.baujahr = 'Pflicht';
    if (!form.preis) e.preis = 'Pflicht';
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const handleSubmit = e => {
    e.preventDefault();
    if (!validate()) return;
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      navigate('/fahrzeuge');
    }, 1000);
  };
  const handleOcr = () => {
    setOcrLoading(true);
    setTimeout(() => {
      setOcrLoading(false);
      setForm({
        ...form,
        marke: 'Mercedes-Benz',
        modell: 'Actros 1845 LS',
        fin: 'WDB9066351L123456',
        baujahr: '2019',
        erstzulassung: '2019-03-15',
        leistungKw: '330',
        kraftstoff: 'Diesel',
        farbe: 'Weiss',
        abgasnorm: 'Euro 6',
        hsn: '0911',
        tsn: 'AAM'
      });
    }, 2000);
  };
  const formTabs = [{
    id: 'allgemein',
    label: 'Allgemein',
    icon: 'tag'
  }, {
    id: 'technisch',
    label: 'Technische Daten',
    icon: 'wrench'
  }, {
    id: 'abmessungen',
    label: 'Abmessungen',
    icon: 'package'
  }, ...(typ === 'pkw' ? [{
    id: 'pkw',
    label: 'PKW',
    icon: 'car'
  }] : []), ...(typ === 'lkw' ? [{
    id: 'lkw',
    label: 'LKW',
    icon: 'truck'
  }] : []), ...(typ === 'baumaschine' ? [{
    id: 'baumaschine',
    label: 'Baumaschine',
    icon: 'wrench'
  }] : []), ...(typ === 'stapler' ? [{
    id: 'stapler',
    label: 'Stapler',
    icon: 'forklift'
  }] : []), {
    id: 'preise',
    label: 'Preise & Kosten',
    icon: 'euro'
  }, {
    id: 'bilder',
    label: 'Bilder',
    icon: 'image'
  }, {
    id: 'dokumente',
    label: 'Dokumente',
    icon: 'doc'
  }, {
    id: 'mobilede',
    label: 'mobile.de',
    icon: 'external'
  }];
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-4)',
      marginBottom: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    icon: "chevronLeft",
    onClick: () => navigate('/fahrzeuge')
  }, t('fd.zurueck')), /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t(editId ? 'ff.titel_bearbeiten' : 'ff.titel_neu'))), /*#__PURE__*/React.createElement(Card, {
    title: "Fahrzeugtyp",
    style: {
      marginBottom: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-2)',
      flexWrap: 'wrap'
    }
  }, ['lkw', 'baumaschine', 'pkw', 'stapler', 'transporter'].map(o => /*#__PURE__*/React.createElement("button", {
    key: o,
    type: "button",
    className: `btn ${typ === o ? 'btn-primary' : 'btn-secondary'}`,
    onClick: () => setTyp(o)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: typIcon(o),
    size: 16
  }), " ", typLabel(o))))), /*#__PURE__*/React.createElement(Card, {
    title: t('ff.ocr_upload'),
    style: {
      marginBottom: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-sm)',
      color: 'var(--color-text-secondary)',
      marginBottom: 'var(--space-4)'
    }
  }, t('ff.ocr_text')), /*#__PURE__*/React.createElement("div", {
    className: "dropzone",
    onClick: handleOcr
  }, ocrLoading ? /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: 'var(--space-3)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "spinner spinner-lg"
  }), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-sm)'
    }
  }, "OCR laeuft... Qwen2.5-VL")) : /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: 'var(--space-2)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "camera",
    size: 48,
    style: {
      color: 'var(--color-text-muted)'
    }
  }), /*#__PURE__*/React.createElement("p", {
    style: {
      fontWeight: 'var(--font-weight-medium)'
    }
  }, "ZB I / ZB II hier klicken"), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "sm",
    icon: "sparkles",
    style: {
      marginTop: 'var(--space-2)'
    }
  }, t('ff.ocr_ausloesen'))))), /*#__PURE__*/React.createElement("form", {
    onSubmit: handleSubmit
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-tabs"
  }, formTabs.map(tab => /*#__PURE__*/React.createElement("div", {
    key: tab.id,
    className: `form-tab ${activeFormTab === tab.id ? 'active' : ''}`,
    onClick: () => setActiveFormTab(tab.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: tab.icon,
    size: 16
  }), " ", tab.label))), activeFormTab === 'allgemein' && /*#__PURE__*/React.createElement(Card, {
    title: "Allgemein"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Marke * ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "D.1"
  })), /*#__PURE__*/React.createElement("input", {
    className: `input ${errors.marke ? 'input-error' : ''}`,
    value: form.marke,
    onChange: e => update('marke', e.target.value)
  }), errors.marke && /*#__PURE__*/React.createElement("div", {
    className: "form-error"
  }, errors.marke)), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Modell * ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "D.3"
  })), /*#__PURE__*/React.createElement("input", {
    className: `input ${errors.modell ? 'input-error' : ''}`,
    value: form.modell,
    onChange: e => update('modell', e.target.value)
  }), errors.modell && /*#__PURE__*/React.createElement("div", {
    className: "form-error"
  }, errors.modell)), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "FIN * ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "E"
  })), /*#__PURE__*/React.createElement("input", {
    className: `input ${errors.fin ? 'input-error' : ''}`,
    value: form.fin,
    onChange: e => update('fin', e.target.value),
    maxLength: 17,
    style: {
      fontFamily: 'var(--font-mono)'
    }
  }), errors.fin && /*#__PURE__*/React.createElement("div", {
    className: "form-error"
  }, errors.fin)), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Baujahr *"), /*#__PURE__*/React.createElement("input", {
    className: `input ${errors.baujahr ? 'input-error' : ''}`,
    type: "number",
    value: form.baujahr,
    onChange: e => update('baujahr', e.target.value)
  }), errors.baujahr && /*#__PURE__*/React.createElement("div", {
    className: "form-error"
  }, errors.baujahr)), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Erstzulassung ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "B"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "date",
    value: form.erstzulassung,
    onChange: e => update('erstzulassung', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Farbe ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "R"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.farbe,
    onChange: e => update('farbe', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Zustand"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.zustand,
    onChange: e => update('zustand', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Neu"), /*#__PURE__*/React.createElement("option", null, "Gebraucht"), /*#__PURE__*/React.createElement("option", null, "Jahreswagen"), /*#__PURE__*/React.createElement("option", null, "Unfallfahrzeug"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Standort"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.standort,
    onChange: e => update('standort', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "HSN ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(2.1)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.hsn,
    onChange: e => update('hsn', e.target.value),
    placeholder: "0911",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "TSN ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(2.2)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.tsn,
    onChange: e => update('tsn', e.target.value),
    placeholder: "AAM",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "EG-Typgenehmigung ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "K"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.egTyp,
    onChange: e => update('egTyp', e.target.value),
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Vorbesitzer"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.vorbesitzer,
    onChange: e => update('vorbesitzer', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Unfallschaeden"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.unfallschaeden,
    onChange: e => update('unfallschaeden', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "TUeV/AU gueltig bis"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.tuev,
    onChange: e => update('tuev', e.target.value),
    placeholder: "03.2027"
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Letzter Service"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.letzterService,
    onChange: e => update('letzterService', e.target.value),
    placeholder: "01.2026"
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Service-Intervall (km)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.serviceIntervall,
    onChange: e => update('serviceIntervall', e.target.value),
    placeholder: "150000"
  })))), activeFormTab === 'technisch' && /*#__PURE__*/React.createElement(Card, {
    title: "Technische Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Leistung (kW) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "P.2"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.leistungKw,
    onChange: e => update('leistungKw', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Leistung (PS)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.leistungPs,
    onChange: e => update('leistungPs', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Hubraum (ccm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "P.1"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.hubraum,
    onChange: e => update('hubraum', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Kraftstoff ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "P.3"
  })), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.kraftstoff,
    onChange: e => update('kraftstoff', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Diesel"), /*#__PURE__*/React.createElement("option", null, "Benzin"), /*#__PURE__*/React.createElement("option", null, "Elektro"), /*#__PURE__*/React.createElement("option", null, "Hybrid"), /*#__PURE__*/React.createElement("option", null, "Gas (CNG/LPG)"), /*#__PURE__*/React.createElement("option", null, "Wasserstoff"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Getriebe"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.getriebe,
    onChange: e => update('getriebe', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Manuell"), /*#__PURE__*/React.createElement("option", null, "Automatik"), /*#__PURE__*/React.createElement("option", null, "DSG"), /*#__PURE__*/React.createElement("option", null, "Hydrostat"), /*#__PURE__*/React.createElement("option", null, "Stufenlos"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Antriebsart"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.antriebsart,
    onChange: e => update('antriebsart', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Frontantrieb"), /*#__PURE__*/React.createElement("option", null, "Heckantrieb"), /*#__PURE__*/React.createElement("option", null, "Allrad"), /*#__PURE__*/React.createElement("option", null, "4x4"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Abgasnorm"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.abgasnorm,
    onChange: e => update('abgasnorm', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Euro 6"), /*#__PURE__*/React.createElement("option", null, "Euro 5"), /*#__PURE__*/React.createElement("option", null, "Euro 4"), /*#__PURE__*/React.createElement("option", null, "Euro 3"), /*#__PURE__*/React.createElement("option", null, "Euro 2"), /*#__PURE__*/React.createElement("option", null, "Euro 1"), /*#__PURE__*/React.createElement("option", null, "Keine"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Verbrauch (l/100km)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    step: "0.1",
    value: form.verbrauch,
    onChange: e => update('verbrauch', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "CO2 (g/km) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "V.7"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.co2,
    onChange: e => update('co2', e.target.value)
  })), (typ === 'lkw' || typ === 'transporter' || typ === 'pkw') && /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "KM-Stand"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.kmStand,
    onChange: e => update('kmStand', e.target.value)
  })), (typ === 'baumaschine' || typ === 'stapler') && /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Betriebsstunden"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.betriebsstunden,
    onChange: e => update('betriebsstunden', e.target.value)
  })))), activeFormTab === 'abmessungen' && /*#__PURE__*/React.createElement(Card, {
    title: "Abmessungen & Gewichte"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Laenge (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(18)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.laenge,
    onChange: e => update('laenge', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Breite (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(19)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.breite,
    onChange: e => update('breite', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Hoehe (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(20)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.hoehe,
    onChange: e => update('hoehe', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Leergewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "G"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.leergewicht,
    onChange: e => update('leergewicht', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Gesamtgewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "F.1"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.Gesamtgewicht,
    onChange: e => update('Gesamtgewicht', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Achsen ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "L"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.achsen,
    onChange: e => update('achsen', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Bereifung ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(15)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.bereifung,
    onChange: e => update('bereifung', e.target.value),
    placeholder: "315/70 R22.5"
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Anhaengelast (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "O.1"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.anhaengelast,
    onChange: e => update('anhaengelast', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Kuppelast (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "(13)"
  })), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.kuppellast,
    onChange: e => update('kuppellast', e.target.value)
  })))), activeFormTab === 'pkw' && typ === 'pkw' && /*#__PURE__*/React.createElement(Card, {
    title: "PKW-spezifische Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Fahrzeugklasse ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "J"
  })), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.pkwKlasse,
    onChange: e => update('pkwKlasse', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Kleinwagen"), /*#__PURE__*/React.createElement("option", null, "Kompaktklasse"), /*#__PURE__*/React.createElement("option", null, "Mittelklasse"), /*#__PURE__*/React.createElement("option", null, "Oberklasse"), /*#__PURE__*/React.createElement("option", null, "Luxusklasse"), /*#__PURE__*/React.createElement("option", null, "Gelaendewagen"), /*#__PURE__*/React.createElement("option", null, "Van"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Karosserieform"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.pkwKarosserie,
    onChange: e => update('pkwKarosserie', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Limousine"), /*#__PURE__*/React.createElement("option", null, "Kombi"), /*#__PURE__*/React.createElement("option", null, "Hatchback"), /*#__PURE__*/React.createElement("option", null, "Coupé"), /*#__PURE__*/React.createElement("option", null, "Cabrio"), /*#__PURE__*/React.createElement("option", null, "SUV"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Tueren"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.pkwTueren,
    onChange: e => update('pkwTueren', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "2"), /*#__PURE__*/React.createElement("option", null, "3"), /*#__PURE__*/React.createElement("option", null, "4"), /*#__PURE__*/React.createElement("option", null, "5"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Sitzplaetze ", /*#__PURE__*/React.createElement(ZBRef, {
    field: "S.1"
  })), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.pkwSitze,
    onChange: e => update('pkwSitze', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "2"), /*#__PURE__*/React.createElement("option", null, "4"), /*#__PURE__*/React.createElement("option", null, "5"), /*#__PURE__*/React.createElement("option", null, "7"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Hubraum (ccm)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.pkwHubraum,
    onChange: e => update('pkwHubraum', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Antriebsart"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.pkwAntrieb,
    onChange: e => update('pkwAntrieb', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Frontantrieb"), /*#__PURE__*/React.createElement("option", null, "Heckantrieb"), /*#__PURE__*/React.createElement("option", null, "Allrad"), /*#__PURE__*/React.createElement("option", null, "4x4"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Verbrauch (l/100km)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    step: "0.1",
    value: form.pkwVerbrauch,
    onChange: e => update('pkwVerbrauch', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "CO2 (g/km)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.pkwCo2,
    onChange: e => update('pkwCo2', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Umweltplakette"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.pkwUmwelt,
    onChange: e => update('pkwUmwelt', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: "gruen"
  }, "Gruen"), /*#__PURE__*/React.createElement("option", {
    value: "gelb"
  }, "Gelb"), /*#__PURE__*/React.createElement("option", {
    value: "rot"
  }, "Rot"), /*#__PURE__*/React.createElement("option", {
    value: "keine"
  }, "Keine"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Reifengroesse"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.pkwReifen,
    onChange: e => update('pkwReifen', e.target.value),
    placeholder: "275/45 R20"
  })))), activeFormTab === 'lkw' && typ === 'lkw' && /*#__PURE__*/React.createElement(Card, {
    title: "LKW-spezifische Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "LKW-Typ"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwTyp,
    onChange: e => update('lkwTyp', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Sattelzugmaschine"), /*#__PURE__*/React.createElement("option", null, "Solo-LKW"), /*#__PURE__*/React.createElement("option", null, "Kastenwagen"), /*#__PURE__*/React.createElement("option", null, "Pritsche"), /*#__PURE__*/React.createElement("option", null, "Tieflader"), /*#__PURE__*/React.createElement("option", null, "Kipper"), /*#__PURE__*/React.createElement("option", null, "Silo"), /*#__PURE__*/React.createElement("option", null, "Kuehlwagen"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Aufbau"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    value: form.aufbau,
    onChange: e => update('aufbau', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Bordgeraet"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwBordgeraet,
    onChange: e => update('lkwBordgeraet', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Hubwerk"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwHubwerk,
    onChange: e => update('lkwHubwerk', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Ladebordwand"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwLadebordwand,
    onChange: e => update('lkwLadebordwand', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Klimaanlage"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwKlima,
    onChange: e => update('lkwKlima', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Schlafplatz"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwSchlafplatz,
    onChange: e => update('lkwSchlafplatz', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Hydraulische Anlage"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.lkwHydraulik,
    onChange: e => update('lkwHydraulik', e.target.value === 'true')
  }, /*#__PURE__*/React.createElement("option", {
    value: "false"
  }, "Nein"), /*#__PURE__*/React.createElement("option", {
    value: "true"
  }, "Ja"))))), activeFormTab === 'baumaschine' && typ === 'baumaschine' && /*#__PURE__*/React.createElement(Card, {
    title: "Baumaschinen-spezifische Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Art"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.art,
    onChange: e => update('art', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Bagger"), /*#__PURE__*/React.createElement("option", null, "Radlader"), /*#__PURE__*/React.createElement("option", null, "Kran"), /*#__PURE__*/React.createElement("option", null, "Walze"), /*#__PURE__*/React.createElement("option", null, "Bulldozer"), /*#__PURE__*/React.createElement("option", null, "Teleskoplader"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Einheit"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.bsEinheit,
    onChange: e => update('bsEinheit', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: "h"
  }, "Stunden (h)"), /*#__PURE__*/React.createElement("option", {
    value: "min"
  }, "Minuten (min)"))))), activeFormTab === 'stapler' && typ === 'stapler' && /*#__PURE__*/React.createElement(Card, {
    title: "Stapler-spezifische Daten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Tragfaehigkeit (kg)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.staplerTrag,
    onChange: e => update('staplerTrag', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Hubhoehe (mm)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.staplerHubhoehe,
    onChange: e => update('staplerHubhoehe', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Bauhoehe (mm)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.staplerBauhoehe,
    onChange: e => update('staplerBauhoehe', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Masttyp"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.staplerMast,
    onChange: e => update('staplerMast', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Dreisteg"), /*#__PURE__*/React.createElement("option", null, "Zweisteg"), /*#__PURE__*/React.createElement("option", null, "Scherenmast"), /*#__PURE__*/React.createElement("option", null, "Teleskopmast"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Antriebsart"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.staplerAntrieb,
    onChange: e => update('staplerAntrieb', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Elektro"), /*#__PURE__*/React.createElement("option", null, "Diesel"), /*#__PURE__*/React.createElement("option", null, "Gas"), /*#__PURE__*/React.createElement("option", null, "Benzin"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Batteriekapazitaet (kWh)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    step: "0.1",
    value: form.staplerBatterieKwh,
    onChange: e => update('staplerBatterieKwh', e.target.value),
    disabled: form.staplerAntrieb !== 'Elektro'
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Batterietyp"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.staplerBatterieTyp,
    onChange: e => update('staplerBatterieTyp', e.target.value),
    disabled: form.staplerAntrieb !== 'Elektro'
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "--"), /*#__PURE__*/React.createElement("option", null, "Blei-Saeure"), /*#__PURE__*/React.createElement("option", null, "Lithium-Ion"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Reifenart"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.staplerReifen,
    onChange: e => update('staplerReifen', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Superelastik"), /*#__PURE__*/React.createElement("option", null, "Vollgummi"), /*#__PURE__*/React.createElement("option", null, "Luftreifen"), /*#__PURE__*/React.createElement("option", null, "Polyurethan"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Lastschwerpunkt (mm)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.staplerLastschwerpunkt,
    onChange: e => update('staplerLastschwerpunkt', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Fahrkomponente"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.staplerFahrkomponente,
    onChange: e => update('staplerFahrkomponente', e.target.value)
  }, /*#__PURE__*/React.createElement("option", null, "Stapler"), /*#__PURE__*/React.createElement("option", null, "Radlader"), /*#__PURE__*/React.createElement("option", null, "Teleskoplader"), /*#__PURE__*/React.createElement("option", null, "Hubwagen"), /*#__PURE__*/React.createElement("option", null, "Kommissionierer"))))), activeFormTab === 'preise' && /*#__PURE__*/React.createElement(Card, {
    title: "Preise & Kosten"
  }, /*#__PURE__*/React.createElement("div", {
    className: "three-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Verkaufspreis (€) *"), /*#__PURE__*/React.createElement("input", {
    className: `input ${errors.preis ? 'input-error' : ''}`,
    type: "number",
    value: form.preis,
    onChange: e => update('preis', e.target.value)
  }), errors.preis && /*#__PURE__*/React.createElement("div", {
    className: "form-error"
  }, errors.preis)), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Kaufpreis (€)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.kaufpreis,
    onChange: e => update('kaufpreis', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "MwSt-Satz"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: form.mwst,
    onChange: e => update('mwst', e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: "19"
  }, "19%"), /*#__PURE__*/React.createElement("option", {
    value: "7"
  }, "7%"), /*#__PURE__*/React.createElement("option", {
    value: "0"
  }, "0% (steuerfrei)"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Provision (€)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.provision,
    onChange: e => update('provision', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Lagerkosten (€/Monat)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.lagerkosten,
    onChange: e => update('lagerkosten', e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Transportkosten (€)"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    type: "number",
    value: form.transportkosten,
    onChange: e => update('transportkosten', e.target.value)
  })))), activeFormTab === 'bilder' && /*#__PURE__*/React.createElement(Card, {
    title: "Fotos"
  }, /*#__PURE__*/React.createElement(ImageManager, {
    photos: photos,
    setPhotos: setPhotos,
    role: "admin"
  })), activeFormTab === 'dokumente' && /*#__PURE__*/React.createElement(Card, {
    title: "Dokumente"
  }, /*#__PURE__*/React.createElement("div", {
    className: "dropzone",
    style: {
      marginBottom: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "upload",
    size: 48,
    style: {
      color: 'var(--color-text-muted)'
    }
  }), /*#__PURE__*/React.createElement("p", {
    style: {
      fontWeight: 'var(--font-weight-medium)'
    }
  }, "Dokumente hochladen"), /*#__PURE__*/React.createElement("p", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, "ZB I, ZB II, TUeV, Vertrag, Rechnung · PDF/JPG · max 50 MB"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 'var(--space-3)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "file-input-wrapper"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    size: "sm",
    icon: "doc"
  }, "Datei auswaehlen"), /*#__PURE__*/React.createElement("input", {
    type: "file",
    multiple: true,
    accept: ".pdf,image/*"
  }))))), activeFormTab === 'mobilede' && /*#__PURE__*/React.createElement(Card, {
    title: "mobile.de Listing"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Listing-Status"), /*#__PURE__*/React.createElement("select", {
    className: "select"
  }, /*#__PURE__*/React.createElement("option", null, "Entwurf"), /*#__PURE__*/React.createElement("option", null, "Gelistet"), /*#__PURE__*/React.createElement("option", null, "Nicht gelistet"))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Beschreibung (fuer mobile.de)"), /*#__PURE__*/React.createElement("textarea", {
    className: "textarea",
    rows: 4,
    value: form.beschreibung,
    onChange: e => update('beschreibung', e.target.value),
    placeholder: "Top gepflegter LKW, 1. Hand..."
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-3)',
      justifyContent: 'flex-end',
      marginTop: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    onClick: () => navigate('/fahrzeuge')
  }, t('ff.abbrechen')), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: saving ? undefined : 'check',
    type: "submit",
    disabled: saving
  }, saving ? t('common.laden') : t('ff.speichern')))));
};

// ============ KONTAKTE ============
const KontakteListe = ({
  navigate,
  role
}) => {
  const [tab, setTab] = useState('kunden');
  const [search, setSearch] = useState('');
  const [view, setView] = useState('table');
  const data = tab === 'kunden' ? mockContactsKaeufer : mockContactsVerkaeufer;
  const filtered = data.filter(c => !search || c.firmenname.toLowerCase().includes(search.toLowerCase()) || c.ansprechpartner.toLowerCase().includes(search.toLowerCase()));
  const ustBadge = s => {
    const m = {
      geprueft: {
        v: 'success',
        l: t('kt.geprueft')
      },
      ungeprueft: {
        v: 'warning',
        l: t('kt.ungeprueft')
      },
      manuell_best: {
        v: 'info',
        l: t('kt.manuell_best')
      }
    };
    const c = m[s] || m.ungeprueft;
    return /*#__PURE__*/React.createElement(Badge, {
      variant: c.v
    }, c.l);
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 'var(--space-6)',
      flexWrap: 'wrap',
      gap: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t('kt.title')), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)'
    }
  }, filtered.length, " ", t('common.eintraege'))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-2)',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(ViewToggle, {
    view: view,
    onChange: setView
  }), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "plus"
  }, t('kt.add_new')))), /*#__PURE__*/React.createElement("div", {
    className: "subtabs"
  }, /*#__PURE__*/React.createElement("div", {
    className: `subtab ${tab === 'kunden' ? 'active' : ''}`,
    onClick: () => {
      setTab('kunden');
      setSearch('');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "shopping",
    size: 16
  }), " Kunden"), /*#__PURE__*/React.createElement("div", {
    className: `subtab ${tab === 'lieferanten' ? 'active' : ''}`,
    onClick: () => {
      setTab('lieferanten');
      setSearch('');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "briefcase",
    size: 16
  }), " Lieferanten")), /*#__PURE__*/React.createElement(Card, {
    style: {
      marginBottom: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-4)',
      flexWrap: 'wrap',
      alignItems: 'flex-end'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: '1 1 300px'
    }
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, t('common.suchen')), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "search",
    size: 16,
    style: {
      position: 'absolute',
      left: 'var(--space-3)',
      top: '50%',
      transform: 'translateY(-50%)',
      color: 'var(--color-text-muted)'
    }
  }), /*#__PURE__*/React.createElement("input", {
    className: "input",
    style: {
      paddingLeft: 'var(--space-8)'
    },
    placeholder: t('kt.suche'),
    value: search,
    onChange: e => setSearch(e.target.value)
  }))))), filtered.length === 0 ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(EmptyState, {
    icon: "contacts",
    title: "Keine Kontakte",
    text: "Noch keine Kontakte angelegt."
  })) : view === 'table' ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
    style: {
      overflowX: 'auto'
    }
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Firma"), /*#__PURE__*/React.createElement("th", null, "Ansprechpartner"), /*#__PURE__*/React.createElement("th", {
    className: "hide-mobile"
  }, "Land"), /*#__PURE__*/React.createElement("th", {
    className: "hide-mobile"
  }, "USt-IdNr."), /*#__PURE__*/React.createElement("th", {
    className: "hide-mobile"
  }, "Status"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, filtered.map(c => /*#__PURE__*/React.createElement("tr", {
    key: c.id
  }, /*#__PURE__*/React.createElement("td", {
    style: {
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, c.firmenname), /*#__PURE__*/React.createElement("td", null, c.ansprechpartner), /*#__PURE__*/React.createElement("td", {
    className: "hide-mobile"
  }, c.land), /*#__PURE__*/React.createElement("td", {
    className: "hide-mobile",
    style: {
      fontFamily: 'var(--font-mono)',
      fontSize: 'var(--font-size-xs)'
    }
  }, c.ustId || '-'), /*#__PURE__*/React.createElement("td", {
    className: "hide-mobile"
  }, ustBadge(c.ustStatus)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-1)'
    }
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "eye",
    size: 16
  })), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "edit",
    size: 16
  })))))))))) : /*#__PURE__*/React.createElement("div", {
    className: "card-grid"
  }, filtered.map(c => /*#__PURE__*/React.createElement("div", {
    key: c.id,
    className: "contact-card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "contact-card-header"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 40,
      height: 40,
      borderRadius: 'var(--radius-md)',
      background: tab === 'kunden' ? 'var(--color-primary-light)' : 'var(--color-info-light)',
      color: tab === 'kunden' ? 'var(--color-primary)' : 'var(--color-info)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: tab === 'kunden' ? 'shopping' : 'briefcase',
    size: 20
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "contact-card-name"
  }, c.firmenname), /*#__PURE__*/React.createElement("div", {
    className: "contact-card-person"
  }, c.ansprechpartner))), /*#__PURE__*/React.createElement("div", {
    className: "contact-card-info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "contact-card-info-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "location",
    size: 14
  }), " ", c.land), /*#__PURE__*/React.createElement("div", {
    className: "contact-card-info-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "mail",
    size: 14
  }), " ", c.email), /*#__PURE__*/React.createElement("div", {
    className: "contact-card-info-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "phone",
    size: 14
  }), " ", c.telefon))))));
};

// ============ VERKAUFSMODUL (v7 list first) ============
const mockVerkaeufe = [{
  id: 1,
  fahrzeug: 'Mercedes Actros 1845 LS',
  fin: 'WDB9066351L123456',
  kunde: 'Mueller Transport GmbH',
  datum: '2026-07-05',
  betrag: 45000,
  status: 'abgeschlossen',
  mwstTyp: 'inland',
  steuer: 8550,
  gesamt: 53550
}, {
  id: 2,
  fahrzeug: 'MAN TGL 12.180',
  fin: 'WMAUYYT1XPA123456',
  kunde: 'Bauer Bauunternehmen GmbH',
  datum: '2026-07-10',
  betrag: 29500,
  status: 'pruefung',
  mwstTyp: 'inland',
  steuer: 5605,
  gesamt: 35105
}, {
  id: 3,
  fahrzeug: 'BMW X5 xDrive30d',
  fin: 'WBAJA9C50K8123456',
  kunde: 'Van den Berg Logistics B.V.',
  datum: '2026-07-08',
  betrag: 52000,
  status: 'entwurf',
  mwstTyp: 'eu_ausland',
  steuer: 0,
  gesamt: 52000
}, {
  id: 4,
  fahrzeug: 'Volvo FH16 750',
  fin: 'YV2XK0DG5LA123456',
  kunde: 'Spedition Hartmann KG',
  datum: '2026-06-28',
  betrag: 55000,
  status: 'abgeschlossen',
  mwstTyp: 'inland',
  steuer: 10450,
  gesamt: 65450
}, {
  id: 5,
  fahrzeug: 'Scania R 500 Highline',
  fin: 'SCNR5002019123456',
  kunde: 'Mueller Transport GmbH',
  datum: '2026-07-12',
  betrag: 38000,
  status: 'entwurf',
  mwstTyp: 'inland',
  steuer: 7220,
  gesamt: 45220
}, {
  id: 6,
  fahrzeug: 'Liebherr R 926',
  fin: 'LIR92620201234567',
  kunde: 'Bauer Bauunternehmen GmbH',
  datum: '2026-06-20',
  betrag: 89000,
  status: 'storniert',
  mwstTyp: 'inland',
  steuer: 16910,
  gesamt: 105910
}, {
  id: 7,
  fahrzeug: 'Toyota 8FBE20',
  fin: 'TOY8FBE20220123456',
  kunde: 'Schmidt Baumaschinen GmbH',
  datum: '2026-07-01',
  betrag: 18500,
  status: 'abgeschlossen',
  mwstTyp: 'inland',
  steuer: 3515,
  gesamt: 22015
}];
const verkaufStatusBadge = s => {
  const m = {
    entwurf: {
      cls: 'verkauf-status-entwurf',
      l: 'Entwurf'
    },
    pruefung: {
      cls: 'verkauf-status-pruefung',
      l: 'Pruefung'
    },
    abgeschlossen: {
      cls: 'verkauf-status-abgeschlossen',
      l: 'Abgeschlossen'
    },
    storniert: {
      cls: 'verkauf-status-storniert',
      l: 'Storniert'
    }
  };
  const c = m[s] || m.entwurf;
  return /*#__PURE__*/React.createElement("span", {
    className: `verkauf-status-badge ${c.cls}`
  }, c.l);
};
const mwstTypLabel = t => t === 'inland' ? 'Inland' : t === 'eu_ausland' ? 'EU-Ausland' : 'Drittland';
const VerkaufsModul = ({
  navigate,
  role,
  preselectVehicle
}) => {
  const [viewMode, setViewMode] = useState('list');
  const [view, setView] = useState('table');
  const [search, setSearch] = useState('');
  const [filterStatus, setFilterStatus] = useState('alle');
  const [sortBy, setSortBy] = useState('datum');
  const [sortDir, setSortDir] = useState('desc');
  const [showWizard, setShowWizard] = useState(false);
  const [detailId, setDetailId] = useState(null);
  const filtered = useMemo(() => {
    let r = mockVerkaeufe.filter(v => {
      const ms = !search || v.fahrzeug.toLowerCase().includes(search.toLowerCase()) || v.kunde.toLowerCase().includes(search.toLowerCase()) || v.fin.toLowerCase().includes(search.toLowerCase());
      const mst = filterStatus === 'alle' || v.status === filterStatus;
      return ms && mst;
    });
    r.sort((a, b) => {
      const av = a[sortBy],
        bv = b[sortBy];
      if (typeof av === 'number') return sortDir === 'asc' ? av - bv : bv - av;
      return sortDir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
    });
    return r;
  }, [search, filterStatus, sortBy, sortDir]);
  const handleSort = col => {
    if (sortBy === col) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');else {
      setSortBy(col);
      setSortDir('asc');
    }
  };
  if (showWizard) return /*#__PURE__*/React.createElement(VerkaufWizard, {
    navigate: navigate,
    role: role,
    preselectVehicle: preselectVehicle,
    onClose: () => setShowWizard(false)
  });
  if (detailId) return /*#__PURE__*/React.createElement(VerkaufDetail, {
    verkauf: mockVerkaeufe.find(v => v.id === detailId),
    onBack: () => setDetailId(null),
    navigate: navigate
  });
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 'var(--space-6)',
      flexWrap: 'wrap',
      gap: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t('vk.title')), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)'
    }
  }, filtered.length, " Verkaeufe")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-2)',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "view-toggle"
  }, /*#__PURE__*/React.createElement("button", {
    className: `view-toggle-btn ${viewMode === 'list' ? 'active' : ''}`,
    onClick: () => setViewMode('list')
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "list",
    size: 16
  }), " Liste"), /*#__PURE__*/React.createElement("button", {
    className: `view-toggle-btn ${viewMode === 'calendar' ? 'active' : ''}`,
    onClick: () => setViewMode('calendar')
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "calendar",
    size: 16
  }), " Kalender")), viewMode === 'list' && /*#__PURE__*/React.createElement(ViewToggle, {
    view: view,
    onChange: setView
  }), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "plus",
    onClick: () => setShowWizard(true)
  }, t('vk.neuer_verkauf')))), viewMode === 'calendar' ? /*#__PURE__*/React.createElement(VerkaufKalender, {
    navigate: navigate
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
    style: {
      marginBottom: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 'var(--space-4)',
      flexWrap: 'wrap',
      alignItems: 'flex-end'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: '1 1 300px'
    }
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Suche (Fahrzeug, Kunde, FIN)"), /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "search",
    size: 16,
    style: {
      position: 'absolute',
      left: 'var(--space-3)',
      top: '50%',
      transform: 'translateY(-50%)',
      color: 'var(--color-text-muted)'
    }
  }), /*#__PURE__*/React.createElement("input", {
    className: "input",
    style: {
      paddingLeft: 'var(--space-8)'
    },
    placeholder: "Verkauf suchen...",
    value: search,
    onChange: e => setSearch(e.target.value)
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Status"), /*#__PURE__*/React.createElement("select", {
    className: "select",
    value: filterStatus,
    onChange: e => setFilterStatus(e.target.value)
  }, /*#__PURE__*/React.createElement("option", {
    value: "alle"
  }, "Alle"), /*#__PURE__*/React.createElement("option", {
    value: "entwurf"
  }, "Entwurf"), /*#__PURE__*/React.createElement("option", {
    value: "pruefung"
  }, "Pruefung"), /*#__PURE__*/React.createElement("option", {
    value: "abgeschlossen"
  }, "Abgeschlossen"), /*#__PURE__*/React.createElement("option", {
    value: "storniert"
  }, "Storniert"))))), filtered.length === 0 ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(EmptyState, {
    icon: "sale",
    title: "Keine Verkaeufe",
    text: "Noch keine Verkaeufe angelegt.",
    action: role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
      variant: "primary",
      icon: "plus",
      onClick: () => setShowWizard(true)
    }, t('vk.neuer_verkauf'))
  })) : view === 'table' ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
    style: {
      overflowX: 'auto'
    }
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
    className: sortBy === 'fahrzeug' ? 'sorted' : '',
    onClick: () => handleSort('fahrzeug')
  }, "Fahrzeug"), /*#__PURE__*/React.createElement("th", null, "Kunde"), /*#__PURE__*/React.createElement("th", {
    className: sortBy === 'datum' ? 'sorted' : '',
    onClick: () => handleSort('datum')
  }, "Datum"), /*#__PURE__*/React.createElement("th", {
    className: sortBy === 'betrag' ? 'sorted' : '',
    onClick: () => handleSort('betrag')
  }, "Betrag"), /*#__PURE__*/React.createElement("th", null, "Status"), /*#__PURE__*/React.createElement("th", null, "MwSt-Typ"))), /*#__PURE__*/React.createElement("tbody", null, filtered.map(v => /*#__PURE__*/React.createElement("tr", {
    key: v.id,
    onClick: () => setDetailId(v.id),
    style: {
      cursor: 'pointer'
    }
  }, /*#__PURE__*/React.createElement("td", {
    style: {
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, v.fahrzeug), /*#__PURE__*/React.createElement("td", null, v.kunde), /*#__PURE__*/React.createElement("td", null, formatDate(v.datum)), /*#__PURE__*/React.createElement("td", {
    style: {
      fontWeight: 'var(--font-weight-semibold)'
    }
  }, formatPrice(v.betrag)), /*#__PURE__*/React.createElement("td", null, verkaufStatusBadge(v.status)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, mwstTypLabel(v.mwstTyp))))))))) : /*#__PURE__*/React.createElement("div", {
    className: "card-grid"
  }, filtered.map(v => /*#__PURE__*/React.createElement("div", {
    key: v.id,
    className: "verkauf-card",
    onClick: () => setDetailId(v.id)
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
      marginBottom: 'var(--space-2)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-semibold)',
      fontSize: 'var(--font-size-sm)'
    }
  }, v.fahrzeug), verkaufStatusBadge(v.status)), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-secondary)',
      marginBottom: 'var(--space-2)'
    }
  }, v.kunde), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-bold)',
      color: 'var(--color-primary)'
    }
  }, formatPrice(v.betrag)), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, formatDate(v.datum), " · ", mwstTypLabel(v.mwstTyp))))))));
};
const VerkaufDetail = ({
  verkauf,
  onBack,
  navigate
}) => {
  const [activeTab, setActiveTab] = useState('uebersicht');
  if (!verkauf) return null;
  const tabs = [{
    id: 'uebersicht',
    label: 'Uebersicht'
  }, {
    id: 'dokumente',
    label: 'Dokumente'
  }, {
    id: 'zahlung',
    label: 'Zahlungsverlauf'
  }, {
    id: 'termine',
    label: 'Termine'
  }];
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-4)',
      marginBottom: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "ghost",
    icon: "chevronLeft",
    onClick: onBack
  }, "Zurueck"), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, verkauf.fahrzeug), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)'
    }
  }, "FIN: ", verkauf.fin, " · ", formatDate(verkauf.datum))), verkaufStatusBadge(verkauf.status)), /*#__PURE__*/React.createElement("div", {
    className: "tabs"
  }, tabs.map(tab => /*#__PURE__*/React.createElement("div", {
    key: tab.id,
    className: `tab ${activeTab === tab.id ? 'active' : ''}`,
    onClick: () => setActiveTab(tab.id)
  }, tab.label))), activeTab === 'uebersicht' && /*#__PURE__*/React.createElement(Card, {
    title: "Verkaufsuebersicht"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-grid"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Fahrzeug"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, verkauf.fahrzeug)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "FIN"), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  }, verkauf.fin)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Kunde"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, verkauf.kunde)), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Datum"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, formatDate(verkauf.datum))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Netto-Betrag"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, formatPrice(verkauf.betrag))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "MwSt-Typ"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, mwstTypLabel(verkauf.mwstTyp)))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Steuerbetrag"), /*#__PURE__*/React.createElement("div", {
    className: "info-value"
  }, formatPrice(verkauf.steuer))), /*#__PURE__*/React.createElement("div", {
    className: "info-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "info-label"
  }, "Gesamt (brutto)"), /*#__PURE__*/React.createElement("div", {
    className: "info-value",
    style: {
      fontSize: 'var(--font-size-lg)',
      color: 'var(--color-primary)'
    }
  }, formatPrice(verkauf.gesamt))))), activeTab === 'dokumente' && /*#__PURE__*/React.createElement(Card, {
    title: "Dokumente"
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Dokument"), /*#__PURE__*/React.createElement("th", null, "Typ"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "Vertrag")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 16
  })))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Rechnung.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, "Rechnung")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 16
  })))), verkauf.mwstTyp === 'eu_ausland' && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Lieferbescheinigung.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "warning"
  }, "Zertifikat")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "download",
    size: 16
  }))))))), activeTab === 'zahlung' && /*#__PURE__*/React.createElement(Card, {
    title: "Zahlungsverlauf"
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Datum"), /*#__PURE__*/React.createElement("th", null, "Betrag"), /*#__PURE__*/React.createElement("th", null, "Methode"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, formatDate(verkauf.datum)), /*#__PURE__*/React.createElement("td", null, formatPrice(verkauf.gesamt)), /*#__PURE__*/React.createElement("td", null, "Ueberweisung"), /*#__PURE__*/React.createElement("td", null, verkauf.status === 'abgeschlossen' ? /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Bezahlt") : /*#__PURE__*/React.createElement(Badge, {
    variant: "warning"
  }, "Offen")))))), activeTab === 'termine' && /*#__PURE__*/React.createElement(Card, {
    title: "Termine"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 'var(--space-3)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-3)',
      padding: 'var(--space-3)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-md)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "calendar",
    size: 20,
    style: {
      color: 'var(--color-info)'
    }
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-medium)'
    }
  }, "Ueberfuehrung"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, "Geplant: ", formatDate(verkauf.datum))), /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, "Geplant")), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-3)',
      padding: 'var(--space-3)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-md)'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "package",
    size: 20,
    style: {
      color: 'var(--color-warning)'
    }
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'var(--font-weight-medium)'
    }
  }, "Lieferung"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)'
    }
  }, "Geplant: ", formatDate(verkauf.datum))), /*#__PURE__*/React.createElement(Badge, {
    variant: "warning"
  }, "Geplant")))));
};

// ============ KI COPILOT (v7 ChatGPT-like) ============
const KiCopilot = ({
  navigate,
  role
}) => {
  const [messages, setMessages] = useState([{
    type: 'ai',
    text: 'Hallo Max! Ich bin Ihr KI-Assistent. Ich kann Fahrzeuge anlegen, suchen, verkaufen und Dokumente erstellen. Was kann ich fuer Sie tun?'
  }]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [listening, setListening] = useState(false);
  const [speechSupported, setSpeechSupported] = useState(true);
  const textareaRef = useRef(null);
  const messagesEnd = useRef(null);
  const recognitionRef = useRef(null);
  useEffect(() => {
    messagesEnd.current?.scrollIntoView({
      behavior: 'smooth'
    });
  }, [messages]);
  useEffect(() => {
    document.body.classList.add('copilot-active');
    return () => document.body.classList.remove('copilot-active');
  }, []);
  useEffect(() => {
    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) {
      setSpeechSupported(false);
      return;
    }
    const rec = new SR();
    rec.lang = 'de-DE';
    rec.continuous = false;
    rec.interimResults = true;
    rec.onresult = e => {
      let text = '';
      for (let i = 0; i < e.results.length; i++) text += e.results[i][0].transcript;
      setInput(text);
      autoGrow();
    };
    rec.onerror = e => {
      setListening(false);
    };
    rec.onend = () => {
      setListening(false);
    };
    recognitionRef.current = rec;
  }, []);
  const autoGrow = () => {
    const ta = textareaRef.current;
    if (ta) {
      ta.style.height = '48px';
      ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
    }
  };
  const toggleMic = () => {
    if (!speechSupported || !recognitionRef.current) return;
    if (listening) {
      recognitionRef.current.stop();
      setListening(false);
    } else {
      try {
        recognitionRef.current.start();
        setListening(true);
      } catch (e) {}
    }
  };
  const sendMessage = text => {
    const msg = text || input;
    if (!msg.trim() || loading) return;
    setMessages(prev => [...prev, {
      type: 'user',
      text: msg
    }]);
    setInput('');
    if (textareaRef.current) textareaRef.current.style.height = '48px';
    setLoading(true);
    setTimeout(() => {
      let r = 'Ich verstehe Ihren Befehl. Bitte spezifizieren Sie genauer.';
      const ml = msg.toLowerCase();
      if (ml.includes('lege') && ml.includes('fahrzeug')) r = 'Ich habe die Daten extrahiert und das Fahrzeugformular vorausgefuellt. Bitte ueberpruefen Sie die Daten und bestaetigen Sie zum Speichern. Das Formular ist jetzt geoeffnet.';else if (ml.includes('finde') || ml.includes('suche')) r = 'Ich habe 3 Fahrzeuge gefunden, die Ihren Kriterien entsprechen. Die Ergebnisse werden in der Bestandsliste angezeigt.';else if (ml.includes('verkaufe') || ml.includes('kaufvertrag')) r = 'Verkaufsprozess gestartet. Ich habe Kaeufer und Fahrzeug identifiziert. Der Verkaufs-Assistent ist jetzt geoeffnet.';else if (ml.includes('rechnung')) r = 'Rechnung RE-2026-047 wurde aus dem letzten Verkauf generiert. Die PDF steht zum Download bereit.';else if (ml.includes('kontakt') || ml.includes('kunde')) r = 'Ich habe die Kontaktverwaltung geoeffnet. Sie koennen zwischen Kunden und Lieferanten wechseln.';else if (ml.includes('preis') || ml.includes('vergleich')) r = 'Ich vergleiche Preise aehnlicher Fahrzeuge auf mobile.de. Bitte waehlen Sie ein Fahrzeug aus der Bestandsliste.';
      setMessages(prev => [...prev, {
        type: 'ai',
        text: r
      }]);
      setLoading(false);
    }, 1500);
  };
  const handleKeyDown = e => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };
  const chips = ['Fahrzeug suchen', 'Neuer Verkauf', 'Kontakte', 'Preisvergleich', 'Dokument erstellen', 'Letzte Verkaeufe'];
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 'var(--space-4)'
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t('ki.title')), /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)',
      marginTop: 'var(--space-1)'
    }
  }, "KI-Assistent via OpenRouter - Text & Spracheingabe")), /*#__PURE__*/React.createElement("div", {
    className: "copilot-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "copilot-chat"
  }, messages.map((msg, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    className: msg.type === 'user' ? 'chat-msg-user' : 'chat-msg-ai'
  }, msg.type === 'ai' && /*#__PURE__*/React.createElement("div", {
    className: "chat-ai-avatar"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ai",
    size: 20
  })), /*#__PURE__*/React.createElement("div", {
    className: "chat-bubble-full"
  }, msg.text))), loading && /*#__PURE__*/React.createElement("div", {
    className: "chat-msg-ai"
  }, /*#__PURE__*/React.createElement("div", {
    className: "chat-ai-avatar"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ai",
    size: 20
  })), /*#__PURE__*/React.createElement("div", {
    className: "chat-bubble-full"
  }, /*#__PURE__*/React.createElement("div", {
    className: "typing-indicator"
  }, /*#__PURE__*/React.createElement("div", {
    className: "typing-dot"
  }), /*#__PURE__*/React.createElement("div", {
    className: "typing-dot"
  }), /*#__PURE__*/React.createElement("div", {
    className: "typing-dot"
  })))), /*#__PURE__*/React.createElement("div", {
    ref: messagesEnd
  })), /*#__PURE__*/React.createElement("div", {
    className: "copilot-input-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "copilot-chips"
  }, chips.map((chip, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    className: "chat-chip",
    onClick: () => sendMessage(chip)
  }, chip))), /*#__PURE__*/React.createElement("div", {
    className: "copilot-input-row"
  }, /*#__PURE__*/React.createElement("button", {
    className: `chat-mic-btn ${listening ? 'recording' : ''}`,
    onClick: toggleMic,
    title: speechSupported ? 'Spracheingabe' : 'Spracheingabe nicht unterstuetzt',
    disabled: !speechSupported
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "mic",
    size: 20
  })), /*#__PURE__*/React.createElement("textarea", {
    ref: textareaRef,
    className: "copilot-textarea",
    placeholder: t('ki.placeholder'),
    value: input,
    onChange: e => {
      setInput(e.target.value);
      autoGrow();
    },
    onKeyDown: handleKeyDown,
    rows: 1
  }), /*#__PURE__*/React.createElement("button", {
    className: "chat-send-btn",
    onClick: () => sendMessage(),
    disabled: !input.trim() || loading,
    title: "Senden"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "send",
    size: 20
  })))), !speechSupported && /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      fontSize: 'var(--font-size-xs)',
      color: 'var(--color-text-muted)',
      padding: 'var(--space-2)'
    }
  }, "Spracheingabe nicht unterstuetzt - bitte Text eingeben"), "      "));
};

// ============ EINSTELLUNGEN ============
const Einstellungen = ({
  navigate
}) => {
  const [activeTab, setActiveTab] = useState('stammdaten');
  const [stammdatenSub, setStammdatenSub] = useState('steuer');
  const tabs = [{
    id: 'stammdaten',
    label: 'Stammdaten'
  }, {
    id: 'vorlagen',
    label: 'Vertragsvorlagen'
  }, {
    id: 'benutzer',
    label: 'Benutzerverwaltung'
  }, {
    id: 'firma',
    label: 'Firmenprofil'
  }];
  const stammdatenSubs = [{
    id: 'steuer',
    label: 'Steuer & MwSt',
    icon: 'percentage'
  }, {
    id: 'waehrungen',
    label: 'Waehrungen',
    icon: 'currency'
  }, {
    id: 'lieferbedingungen',
    label: 'Incoterms',
    icon: 'truck'
  }, {
    id: 'zahlungsbedingungen',
    label: 'Zahlungsbedingungen',
    icon: 'euro'
  }, {
    id: 'versicherungen',
    label: 'Versicherungen',
    icon: 'shield'
  }, {
    id: 'gewaehrleistung',
    label: 'Gewaehrleistung',
    icon: 'certificate'
  }, {
    id: 'lkw_typen',
    label: 'LKW-Typen',
    icon: 'truck_type'
  }, {
    id: 'baumaschinen_typen',
    label: 'Baumaschinen',
    icon: 'wrench'
  }, {
    id: 'fahrzeugzustaende',
    label: 'Zustaende',
    icon: 'tag'
  }, {
    id: 'kraftstoffarten',
    label: 'Kraftstoffe',
    icon: 'gas'
  }, {
    id: 'abgasnormen',
    label: 'Abgasnormen',
    icon: 'layers'
  }, {
    id: 'bereifung',
    label: 'Bereifung',
    icon: 'road'
  }, {
    id: 'zulassungsstatus',
    label: 'Zulassung',
    icon: 'certificate'
  }];
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 'var(--space-6)'
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: 'var(--font-size-2xl)',
      fontWeight: 'var(--font-weight-bold)'
    }
  }, t('set.title'))), /*#__PURE__*/React.createElement("div", {
    className: "tabs"
  }, tabs.map(tab => /*#__PURE__*/React.createElement("div", {
    key: tab.id,
    className: `tab ${activeTab === tab.id ? 'active' : ''}`,
    onClick: () => setActiveTab(tab.id)
  }, tab.label))), activeTab === 'stammdaten' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "subtabs"
  }, stammdatenSubs.map(s => /*#__PURE__*/React.createElement("div", {
    key: s.id,
    className: `subtab ${stammdatenSub === s.id ? 'active' : ''}`,
    onClick: () => setStammdatenSub(s.id)
  }, /*#__PURE__*/React.createElement(Icon, {
    name: s.icon,
    size: 14
  }), " ", s.label))), stammdatenSub === 'steuer' && /*#__PURE__*/React.createElement(Card, {
    title: "Steuerklassen"
  }, /*#__PURE__*/React.createElement("table", {
    className: "stammdaten-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Bezeichnung"), /*#__PURE__*/React.createElement("th", null, "Satz"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "EU-Inland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "19%")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "EU-Ausland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "warning"
  }, "0%")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Drittland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "warning"
  }, "0%")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv")))))), stammdatenSub === 'waehrungen' && /*#__PURE__*/React.createElement(Card, {
    title: "Waehrungen"
  }, /*#__PURE__*/React.createElement("table", {
    className: "stammdaten-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Waehrung"), /*#__PURE__*/React.createElement("th", null, "Code"), /*#__PURE__*/React.createElement("th", null, "Kurs"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Euro"), /*#__PURE__*/React.createElement("td", null, "EUR"), /*#__PURE__*/React.createElement("td", null, "1.0000")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "USD"), /*#__PURE__*/React.createElement("td", null, "USD"), /*#__PURE__*/React.createElement("td", null, "0.9234")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "CHF"), /*#__PURE__*/React.createElement("td", null, "CHF"), /*#__PURE__*/React.createElement("td", null, "1.0523"))))), stammdatenSub === 'lieferbedingungen' && /*#__PURE__*/React.createElement(Card, {
    title: "Incoterms"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: 'var(--space-2)'
    }
  }, ['EXW', 'FOB', 'CIF', 'DAP', 'DDP', 'FCA'].map(c => /*#__PURE__*/React.createElement(Badge, {
    key: c,
    variant: "primary"
  }, c)))), stammdatenSub === 'zahlungsbedingungen' && /*#__PURE__*/React.createElement(Card, {
    title: "Zahlungsbedingungen"
  }, /*#__PURE__*/React.createElement("table", {
    className: "stammdaten-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Bezeichnung"), /*#__PURE__*/React.createElement("th", null, "Frist"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Vorkasse"), /*#__PURE__*/React.createElement("td", null, "Sofort")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "30 Tage netto"), /*#__PURE__*/React.createElement("td", null, "30T")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Ratenzahlung"), /*#__PURE__*/React.createElement("td", null, "3 Raten"))))), (stammdatenSub === 'versicherungen' || stammdatenSub === 'gewaehrleistung' || stammdatenSub === 'lkw_typen' || stammdatenSub === 'baumaschinen_typen' || stammdatenSub === 'fahrzeugzustaende' || stammdatenSub === 'kraftstoffarten' || stammdatenSub === 'abgasnormen' || stammdatenSub === 'bereifung' || stammdatenSub === 'zulassungsstatus') && /*#__PURE__*/React.createElement(Card, {
    title: stammdatenSubs.find(s => s.id === stammdatenSub)?.label
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      color: 'var(--color-text-secondary)',
      fontSize: 'var(--font-size-sm)'
    }
  }, "Stammdaten verwaltet unter: ", stammdatenSubs.find(s => s.id === stammdatenSub)?.label))), activeTab === 'vorlagen' && /*#__PURE__*/React.createElement(Card, {
    title: "Vertragsvorlagen"
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Vorlage"), /*#__PURE__*/React.createElement("th", null, "Typ"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag Inland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "Inland")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag EU-Ausland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, "EU")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Rechnung"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "neutral"
  }, "Rechnung")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv")))))), activeTab === 'benutzer' && /*#__PURE__*/React.createElement(Card, {
    title: "Benutzerverwaltung"
  }, /*#__PURE__*/React.createElement("table", {
    className: "data-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Rolle"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Max Mustermann"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "primary"
  }, "Admin")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Sarah Klein"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "info"
  }, "Verkaeufer")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
    variant: "success"
  }, "Aktiv")))))), activeTab === 'firma' && /*#__PURE__*/React.createElement(Card, {
    title: "Firmenprofil"
  }, /*#__PURE__*/React.createElement("div", {
    className: "two-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "Firmenname"), /*#__PURE__*/React.createElement("input", {
    className: "input",
    defaultValue: "Nutzfahrzeug Handel GmbH"
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "label"
  }, "USt-IdNr."), /*#__PURE__*/React.createElement("input", {
    className: "input",
    defaultValue: "DE123456789",
    style: {
      fontFamily: 'var(--font-mono)'
    }
  }))), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    icon: "check",
    style: {
      marginTop: 'var(--space-4)'
    }
  }, "Speichern")));
};

// ============ MAIN APP ============
const App = () => {
  const {
    route,
    navigate
  } = useRouter();
  const [role, setRole] = useState(localStorage.getItem('erp-role') || 'admin');
  const [toasts, setToasts] = useState([]);
  const removeToast = id => setToasts(prev => prev.filter(t => t.id !== id));
  const routeParts = route.split('/').filter(Boolean);
  const view = routeParts[0] || 'dashboard';
  const param = routeParts[1];
  const queryStr = route.split('?')[1];
  const query = {};
  if (queryStr) {
    queryStr.split('&').forEach(p => {
      const [k, v] = p.split('=');
      query[k] = v;
    });
  }
  let content;
  switch (view) {
    case 'dashboard':
      content = /*#__PURE__*/React.createElement(DashboardView, {
        navigate: navigate,
        role: role
      });
      break;
    case 'fahrzeuge':
      if (param === 'neu') content = /*#__PURE__*/React.createElement(FahrzeugForm, {
        navigate: navigate,
        editId: query.id
      });else content = /*#__PURE__*/React.createElement(FahrzeugListe, {
        navigate: navigate,
        role: role
      });
      break;
    case 'fahrzeug':
      content = /*#__PURE__*/React.createElement(FahrzeugDetail, {
        id: param,
        navigate: navigate,
        role: role
      });
      break;
    case 'kontakte':
      content = /*#__PURE__*/React.createElement(KontakteListe, {
        navigate: navigate,
        role: role
      });
      break;
    case 'verkauf':
      content = /*#__PURE__*/React.createElement(VerkaufsModul, {
        navigate: navigate,
        role: role,
        preselectVehicle: query.vehicle
      });
      break;
    case 'ki-copilot':
      content = /*#__PURE__*/React.createElement(KiCopilot, {
        navigate: navigate,
        role: role
      });
      break;
    case 'einstellungen':
      content = /*#__PURE__*/React.createElement(Einstellungen, {
        navigate: navigate
      });
      break;
    default:
      content = /*#__PURE__*/React.createElement(DashboardView, {
        navigate: navigate,
        role: role
      });
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "app-layout"
  }, /*#__PURE__*/React.createElement(Sidebar, {
    route: '/' + view,
    navigate: navigate,
    role: role
  }), /*#__PURE__*/React.createElement("div", {
    className: "main-content"
  }, /*#__PURE__*/React.createElement(Topbar, {
    route: route,
    role: role,
    setRole: setRole,
    navigate: navigate
  }), /*#__PURE__*/React.createElement("main", {
    id: "main-content",
    className: "content-area"
  }, content)));
};
ReactDOM.createRoot(document.getElementById('root')).render(/*#__PURE__*/React.createElement(App, null));