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 '../../../context/ToastContext';

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-cyan" /> Request Data Export
          </h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
        </div>

        <div className="p-6 space-y-6">
            <p className="text-sm text-gray-400">
                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-gray-400 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-cyan"
                    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-gray-400 uppercase mb-2">Include Data</label>
                <div className="space-y-2">
                    <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
                        <input type="checkbox" checked={options.profile} onChange={() => toggleOption('profile')} className="rounded border-gray-600 bg-transparent text-kodo-cyan" />
                        <span className="text-sm text-gray-300">Profile & Identity</span>
                    </label>
                    <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
                        <input type="checkbox" checked={options.tracks} onChange={() => toggleOption('tracks')} className="rounded border-gray-600 bg-transparent text-kodo-cyan" />
                        <span className="text-sm text-gray-300">Uploaded Content Metadata</span>
                    </label>
                    <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
                        <input type="checkbox" checked={options.activity} onChange={() => toggleOption('activity')} className="rounded border-gray-600 bg-transparent text-kodo-cyan" />
                        <span className="text-sm text-gray-300">Activity Logs & History</span>
                    </label>
                    <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
                        <input type="checkbox" checked={options.billing} onChange={() => toggleOption('billing')} className="rounded border-gray-600 bg-transparent text-kodo-cyan" />
                        <span className="text-sm text-gray-300">Billing & Transactions</span>
                    </label>
                </div>
            </div>
        </div>

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