veza/apps/web/src/components/settings/account/ChangeEmailModal.tsx

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

interface ChangeEmailModalProps {
  onClose: () => void;
  currentEmail: string;
}

export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
  onClose,
  currentEmail,
}) => {
  const { addToast } = useToast();
  const [newEmail, setNewEmail] = useState('');
  const [password, setPassword] = useState('');
  const [step, setStep] = useState(1);

  const handleSendVerify = () => {
    if (!newEmail || !password) {
      addToast('Please fill in all fields', 'error');
      return;
    }
    if (newEmail === currentEmail) {
      addToast('Please enter a different email', 'error');
      return;
    }
    setStep(2);
    // Simulate API
    addToast('Verification email sent', 'success');
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-border bg-card flex justify-between items-center">
          <h3 className="font-bold text-foreground">Change Email Address</h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
          </button>
        </div>

        <div className="p-6">
          {step === 1 ? (
            <div className="space-y-4">
              <p className="text-sm text-muted-foreground">
                Current email:{' '}
                <span className="text-foreground font-mono">{currentEmail}</span>
              </p>

              <Input
                label="New Email Address"
                placeholder="name@example.com"
                icon={<Mail className="w-4 h-4" />}
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
              />

              <Input
                type="password"
                label="Current Password"
                placeholder="Confirm with password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />

              <div className="bg-card p-4 rounded text-xs text-muted-foreground border border-border">
                We will send a verification link to your new email address. You
                must verify it before the change takes effect.
              </div>
            </div>
          ) : (
            <div className="text-center py-4">
              <div className="w-16 h-16 bg-muted/20 rounded-full flex items-center justify-center mx-auto mb-4 text-muted-foreground">
                <Mail className="w-8 h-8" />
              </div>
              <h4 className="text-lg font-bold text-foreground mb-2">
                Check your inbox
              </h4>
              <p className="text-sm text-muted-foreground mb-6">
                We've sent a verification link to{' '}
                <span className="text-foreground">{newEmail}</span>.
              </p>
              <Button variant="ghost" onClick={onClose}>
                Close
              </Button>
            </div>
          )}
        </div>

        {step === 1 && (
          <div className="p-4 border-t border-border bg-card flex justify-end gap-4">
            <Button variant="ghost" onClick={onClose}>
              Cancel
            </Button>
            <Button variant="primary" onClick={handleSendVerify}>
              Send Verification
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};