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

import React, { useState } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { AlertTriangle, ArrowLeft, Trash2 } from 'lucide-react';
import { DeleteAccountConfirmModal } from './DeleteAccountConfirmModal';
import { useToast } from '../../../components/feedback/ToastProvider';

interface DeleteAccountViewProps {
  onBack: () => void;
  onLogout: () => void;
}

export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
  onBack,
  onLogout,
}) => {
  const { addToast } = useToast();
  const [confirmText, setConfirmText] = useState('');
  const [checks, setChecks] = useState({
    dataLoss: false,
    irreversible: false,
    subscription: false,
  });
  const [showFinalModal, setShowFinalModal] = useState(false);

  const isFormValid =
    checks.dataLoss &&
    checks.irreversible &&
    checks.subscription &&
    confirmText === 'DELETE';

  const handleFinalDelete = () => {
    addToast('Account deleted. Goodbye.', 'info');
    onLogout();
  };

  return (
    <div className="animate-fadeIn max-w-2xl mx-auto space-y-6">
      <div className="flex items-center gap-4 mb-2">
        <button
          onClick={onBack}
          className="p-2 hover:bg-white/5 rounded-full text-kodo-content-dim hover:text-white transition-colors"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <h2 className="text-2xl font-bold text-kodo-red">Delete Account</h2>
      </div>

      <Card
        variant="default"
        className="border-kodo-red/30 relative overflow-hidden"
      >
        <div className="absolute top-0 left-0 w-1 h-full bg-kodo-red"></div>

        <div className="flex gap-4 mb-6">
          <div className="w-12 h-12 bg-kodo-red/10 rounded-full flex items-center justify-center text-kodo-red flex-shrink-0">
            <AlertTriangle className="w-6 h-6" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white mb-2">
              We're sorry to see you go
            </h3>
            <p className="text-kodo-content-dim text-sm leading-relaxed">
              Deleting your account is permanent and cannot be undone. Please
              read the warnings below carefully before proceeding.
            </p>
          </div>
        </div>

        <div className="space-y-4 mb-8">
          <label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
            <input
              type="checkbox"
              className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
              checked={checks.dataLoss}
              onChange={(e) =>
                setChecks({ ...checks, dataLoss: e.target.checked })
              }
            />
            <div className="text-sm">
              <span className="font-bold text-kodo-text-main block mb-1">
                I lose all my data
              </span>
              <span className="text-kodo-content-dim">
                All uploaded tracks, projects, and assets will be permanently
                removed from our servers.
              </span>
            </div>
          </label>

          <label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
            <input
              type="checkbox"
              className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
              checked={checks.irreversible}
              onChange={(e) =>
                setChecks({ ...checks, irreversible: e.target.checked })
              }
            />
            <div className="text-sm">
              <span className="font-bold text-kodo-text-main block mb-1">
                This action is irreversible
              </span>
              <span className="text-kodo-content-dim">
                I understand that Veza support cannot restore my account once
                deleted.
              </span>
            </div>
          </label>

          <label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
            <input
              type="checkbox"
              className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
              checked={checks.subscription}
              onChange={(e) =>
                setChecks({ ...checks, subscription: e.target.checked })
              }
            />
            <div className="text-sm">
              <span className="font-bold text-kodo-text-main block mb-1">
                Subscriptions will be cancelled
              </span>
              <span className="text-kodo-content-dim">
                Any active Pro or Enterprise subscriptions will be terminated
                immediately. No refunds will be issued.
              </span>
            </div>
          </label>
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-bold text-white mb-2">
              To confirm, type "
              <span className="font-mono text-kodo-red">DELETE</span>" below
            </label>
            <Input
              placeholder="DELETE"
              value={confirmText}
              onChange={(e) => setConfirmText(e.target.value)}
              className="border-kodo-red/50 focus:border-kodo-red focus:ring-kodo-red"
            />
          </div>

          <Button
            variant="primary"
            className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-kodo-steel disabled:text-kodo-content-dim"
            disabled={!isFormValid}
            onClick={() => setShowFinalModal(true)}
            icon={<Trash2 className="w-4 h-4" />}
          >
            Delete Account
          </Button>
        </div>
      </Card>

      {showFinalModal && (
        <DeleteAccountConfirmModal
          onClose={() => setShowFinalModal(false)}
          onConfirm={handleFinalDelete}
        />
      )}
    </div>
  );
};