VibeFinance/frontend/src/components/InstellingenModal.jsx

import { useApp } from "../context/AppContext.jsx";

const TEAL = "linear-gradient(135deg, #7c3aed, #a855f7)";

const BACKUP_ICON = (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <path d="M12 15V5M8 11l4-4 4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </svg>
);

const RESTORE_ICON = (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
    <path d="M4 8a8 8 0 1 1 0 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    <polyline points="4,4 4,8 8,8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

function ActionRow({ icon, title, description, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "12px 0", cursor: "pointer",
      }}
    >
      <div style={{ color: "#94a3b8", flexShrink: 0 }}>{icon}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 14, color: "inherit", marginBottom: 2 }}>{title}</div>
        <div style={{ fontSize: 12, color: "#64748b" }}>{description}</div>
      </div>
    </div>
  );
}

export default function InstellingenModal({ onClose }) {
  const { T, darkMode, setDarkMode, doBackup, doRestore } = useApp();

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 400,
        background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: T.popupBg, border: `1px solid ${T.border}`,
          borderRadius: 16, padding: "22px 22px 8px",
          width: 360, boxShadow: "0 16px 48px rgba(0,0,0,0.4)",
          color: T.text,
        }}
      >
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
          <span style={{ fontWeight: 700, fontSize: 16 }}>Instellingen</span>
          <button onClick={onClose} style={{
            background: "transparent", border: "none", cursor: "pointer",
            color: T.muted, fontSize: 20, lineHeight: 1, padding: "0 4px",
          }}>×</button>
        </div>

        {/* Dark mode rij */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "4px 0 16px",
        }}>
          <span style={{ fontWeight: 600, fontSize: 14 }}>Dark mode</span>
          <div
            onClick={() => setDarkMode((d) => !d)}
            style={{
              width: 44, height: 24, borderRadius: 12, cursor: "pointer",
              background: darkMode ? TEAL : "#334155",
              position: "relative", transition: "background 0.2s", flexShrink: 0,
            }}
          >
            <div style={{
              position: "absolute", top: 3, borderRadius: "50%",
              width: 18, height: 18, background: "#fff",
              left: darkMode ? 23 : 3,
              transition: "left 0.2s",
              boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
            }} />
          </div>
        </div>

        <div style={{ height: 1, background: T.border, margin: "0 -22px" }} />

        {/* Acties */}
        <div style={{ padding: "4px 0 10px" }}>
          <ActionRow
            icon={BACKUP_ICON}
            title="Backup maken"
            description="Download een volledige backup als ZIP"
            onClick={() => { doBackup(); onClose(); }}
          />
          <div style={{ height: 1, background: T.border }} />
          <ActionRow
            icon={RESTORE_ICON}
            title="Backup herstellen"
            description="Herstel data vanuit een backup-bestand"
            onClick={() => { doRestore(); onClose(); }}
          />
        </div>
      </div>
    </div>
  );
}