veza/apps/web/src/components/settings/data/DataExportModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Database } from 'lucide-react';
import { useToast } from '../../../components/feedback/ToastProvider';

interface DataExportModalProps {
  onClose: () => void;
  onRequest: (data: any) => void;
}

export const DataExportModal: React.FC<DataExportModalProps> = ({
  onClose,
  onRequest,
}) => {
  const { addToast } = useToast();
  const [format, setFormat] = useState('JSON');
  const [options, setOptions] = useState({
    profile: true,
    tracks: true,
    activity: false,
    billing: false,
  });

  const toggleOption = (key: keyof typeof options) => {
    setOptions((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const handleSubmit = () => {
    addToast('Export request submitted. Check your email shortly.', 'success');
    onRequest({ format, options });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Database className="w-4 h-4 text-kodo-steel" /> Request Data Export
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          <p className="text-sm text-kodo-content-dim">
            In compliance with GDPR/CCPA, you can request a copy of your
            personal data. Generating this report usually takes{' '}
            <span className="text-white font-bold">24-48 hours</span>.
          </p>

          <div>
            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
              Export Format
            </label>
            <select
              className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel"
              value={format}
              onChange={(e) => setFormat(e.target.value)}
            >
              <option>JSON (Machine Readable)</option>
              <option>CSV (Spreadsheet)</option>
              <option>HTML (Readable)</option>
            </select>
          </div>

          <div>
            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
              Include Data
            </label>
            <div className="space-y-2">
              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                <input
                  type="checkbox"
                  checked={options.profile}
                  onChange={() => toggleOption('profile')}
                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                />
                <span className="text-sm text-kodo-text-main">
                  Profile & Identity
                </span>
              </label>
              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                <input
                  type="checkbox"
                  checked={options.tracks}
                  onChange={() => toggleOption('tracks')}
                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                />
                <span className="text-sm text-kodo-text-main">
                  Uploaded Content Metadata
                </span>
              </label>
              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                <input
                  type="checkbox"
                  checked={options.activity}
                  onChange={() => toggleOption('activity')}
                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                />
                <span className="text-sm text-kodo-text-main">
                  Activity Logs & History
                </span>
              </label>
              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                <input
                  type="checkbox"
                  checked={options.billing}
                  onChange={() => toggleOption('billing')}
                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                />
                <span className="text-sm text-kodo-text-main">
                  Billing & Transactions
                </span>
              </label>
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSubmit}>
            Request Export
          </Button>
        </div>
      </div>
    </div>
  );
};