/**
 * KYCVerificationPanel Component
 * Complete KYC verification flow with document upload
 * Epic: OQI-004 Cuentas de Inversion
 */

import React, { useState, useRef } from 'react';
import {
  Shield,
  User,
  FileText,
  Upload,
  CheckCircle,
  AlertCircle,
  Camera,
  X,
  Loader2,
  Clock,
  MapPin,
  Briefcase,
} from 'lucide-react';
import { KYCStatusBadge, KYCStatus } from './KYCStatusBadge';

interface PersonalData {
  fullName: string;
  dateOfBirth: string;
  nationality: string;
  address: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  occupation: string;
  incomeSource: string;
}

interface Document {
  id: string;
  type: 'id_front' | 'id_back' | 'proof_of_address' | 'selfie';
  fileName: string;
  status: 'pending' | 'approved' | 'rejected';
  previewUrl?: string;
  rejectionReason?: string;
}

interface KYCVerificationPanelProps {
  status: KYCStatus;
  personalData?: Partial<PersonalData>;
  documents?: Document[];
  rejectionReason?: string;
  onSubmit?: (data: { personalData: PersonalData; documents: File[] }) => Promise<void>;
  onCancel?: () => void;
}

type Step = 'personal' | 'documents' | 'review';

const DOCUMENT_TYPES = [
  { id: 'id_front', label: 'ID Frontal', description: 'INE, Pasaporte o Licencia de conducir (frente)', icon: FileText },
  { id: 'id_back', label: 'ID Reverso', description: 'Parte posterior del documento', icon: FileText },
  { id: 'proof_of_address', label: 'Comprobante de Domicilio', description: 'Recibo de luz, agua o estado de cuenta (no mayor a 3 meses)', icon: MapPin },
  { id: 'selfie', label: 'Selfie con ID', description: 'Foto tuya sosteniendo tu identificación', icon: Camera },
];

const NATIONALITY_OPTIONS = [
  'Mexico', 'United States', 'Canada', 'Spain', 'Argentina',
  'Colombia', 'Chile', 'Peru', 'Brazil', 'United Kingdom', 'Germany', 'France',
];

const OCCUPATION_OPTIONS = [
  'Empleado', 'Empresario', 'Profesionista Independiente', 'Comerciante',
  'Estudiante', 'Jubilado', 'Otro',
];

const INCOME_SOURCE_OPTIONS = [
  'Salario', 'Negocio Propio', 'Inversiones', 'Herencia',
  'Ahorros', 'Pensión', 'Otro',
];

export const KYCVerificationPanel: React.FC<KYCVerificationPanelProps> = ({
  status,
  personalData: initialPersonalData,
  documents: existingDocuments = [],
  rejectionReason,
  onSubmit,
  onCancel,
}) => {
  const [currentStep, setCurrentStep] = useState<Step>(status === 'not_started' ? 'personal' : 'review');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [currentDocType, setCurrentDocType] = useState<string | null>(null);

  const [personalData, setPersonalData] = useState<PersonalData>({
    fullName: initialPersonalData?.fullName || '',
    dateOfBirth: initialPersonalData?.dateOfBirth || '',
    nationality: initialPersonalData?.nationality || '',
    address: initialPersonalData?.address || '',
    city: initialPersonalData?.city || '',
    state: initialPersonalData?.state || '',
    postalCode: initialPersonalData?.postalCode || '',
    country: initialPersonalData?.country || '',
    occupation: initialPersonalData?.occupation || '',
    incomeSource: initialPersonalData?.incomeSource || '',
  });

  const [uploadedDocuments, setUploadedDocuments] = useState<Map<string, { file: File; preview: string }>>(new Map());

  const handlePersonalDataChange = (field: keyof PersonalData, value: string) => {
    setPersonalData(prev => ({ ...prev, [field]: value }));
  };

  const isPersonalDataValid = () => {
    return (
      personalData.fullName.length >= 3 &&
      personalData.dateOfBirth !== '' &&
      personalData.nationality !== '' &&
      personalData.address.length >= 5 &&
      personalData.city.length >= 2 &&
      personalData.country !== '' &&
      personalData.occupation !== '' &&
      personalData.incomeSource !== ''
    );
  };

  const handleFileSelect = (docType: string) => {
    setCurrentDocType(docType);
    fileInputRef.current?.click();
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !currentDocType) return;

    if (!file.type.startsWith('image/') && file.type !== 'application/pdf') {
      setError('Solo se permiten imágenes o archivos PDF');
      return;
    }

    if (file.size > 10 * 1024 * 1024) {
      setError('El archivo no debe exceder 10MB');
      return;
    }

    const preview = URL.createObjectURL(file);
    setUploadedDocuments(prev => {
      const newMap = new Map(prev);
      const existing = prev.get(currentDocType);
      if (existing?.preview) {
        URL.revokeObjectURL(existing.preview);
      }
      newMap.set(currentDocType, { file, preview });
      return newMap;
    });

    setError(null);
    setCurrentDocType(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const removeDocument = (docType: string) => {
    setUploadedDocuments(prev => {
      const newMap = new Map(prev);
      const existing = prev.get(docType);
      if (existing?.preview) {
        URL.revokeObjectURL(existing.preview);
      }
      newMap.delete(docType);
      return newMap;
    });
  };

  const isDocumentsComplete = () => {
    return DOCUMENT_TYPES.every(doc => uploadedDocuments.has(doc.id) || existingDocuments.some(d => d.type === doc.id && d.status === 'approved'));
  };

  const handleSubmit = async () => {
    if (!onSubmit) return;

    setIsSubmitting(true);
    setError(null);

    try {
      const files = Array.from(uploadedDocuments.values()).map(d => d.file);
      await onSubmit({ personalData, documents: files });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Error al enviar la verificación');
    } finally {
      setIsSubmitting(false);
    }
  };

  const renderStepIndicator = () => (
    <div className="flex items-center justify-center gap-4 mb-8">
      {(['personal', 'documents', 'review'] as Step[]).map((step, index) => {
        const isActive = step === currentStep;
        const isCompleted =
          (step === 'personal' && (currentStep === 'documents' || currentStep === 'review')) ||
          (step === 'documents' && currentStep === 'review');

        return (
          <React.Fragment key={step}>
            <div className="flex flex-col items-center">
              <div
                className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors ${
                  isActive ? 'bg-blue-600 text-white' :
                  isCompleted ? 'bg-green-600 text-white' :
                  'bg-gray-200 dark:bg-gray-700 text-gray-500'
                }`}
              >
                {isCompleted ? <CheckCircle className="w-5 h-5" /> : index + 1}
              </div>
              <span className={`text-xs mt-1 ${isActive ? 'text-white' : 'text-gray-400'}`}>
                {step === 'personal' ? 'Datos' : step === 'documents' ? 'Documentos' : 'Revisión'}
              </span>
            </div>
            {index < 2 && (
              <div className={`w-16 h-0.5 ${isCompleted ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-700'}`} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );

  const renderPersonalDataStep = () => (
    <div className="space-y-4">
      <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4 mb-6">
        <div className="flex items-center gap-2">
          <Shield className="w-5 h-5 text-blue-400" />
          <span className="text-blue-400 font-medium">Información Personal</span>
        </div>
        <p className="text-slate-400 text-sm mt-2">
          Proporciona tus datos personales como aparecen en tu identificación oficial.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="col-span-2">
          <label className="block text-sm font-medium text-slate-300 mb-1">Nombre Completo</label>
          <input
            type="text"
            value={personalData.fullName}
            onChange={(e) => handlePersonalDataChange('fullName', e.target.value)}
            placeholder="Como aparece en tu identificación"
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Fecha de Nacimiento</label>
          <input
            type="date"
            value={personalData.dateOfBirth}
            onChange={(e) => handlePersonalDataChange('dateOfBirth', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Nacionalidad</label>
          <select
            value={personalData.nationality}
            onChange={(e) => handlePersonalDataChange('nationality', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Seleccionar</option>
            {NATIONALITY_OPTIONS.map(option => (
              <option key={option} value={option}>{option}</option>
            ))}
          </select>
        </div>

        <div className="col-span-2">
          <label className="block text-sm font-medium text-slate-300 mb-1">Dirección</label>
          <input
            type="text"
            value={personalData.address}
            onChange={(e) => handlePersonalDataChange('address', e.target.value)}
            placeholder="Calle y número"
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Ciudad</label>
          <input
            type="text"
            value={personalData.city}
            onChange={(e) => handlePersonalDataChange('city', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Estado/Provincia</label>
          <input
            type="text"
            value={personalData.state}
            onChange={(e) => handlePersonalDataChange('state', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Código Postal</label>
          <input
            type="text"
            value={personalData.postalCode}
            onChange={(e) => handlePersonalDataChange('postalCode', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">País</label>
          <select
            value={personalData.country}
            onChange={(e) => handlePersonalDataChange('country', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Seleccionar</option>
            {NATIONALITY_OPTIONS.map(option => (
              <option key={option} value={option}>{option}</option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Ocupación</label>
          <select
            value={personalData.occupation}
            onChange={(e) => handlePersonalDataChange('occupation', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Seleccionar</option>
            {OCCUPATION_OPTIONS.map(option => (
              <option key={option} value={option}>{option}</option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-300 mb-1">Fuente de Ingresos</label>
          <select
            value={personalData.incomeSource}
            onChange={(e) => handlePersonalDataChange('incomeSource', e.target.value)}
            className="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Seleccionar</option>
            {INCOME_SOURCE_OPTIONS.map(option => (
              <option key={option} value={option}>{option}</option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );

  const renderDocumentsStep = () => (
    <div className="space-y-4">
      <div className="bg-amber-900/20 border border-amber-800/50 rounded-lg p-4 mb-6">
        <div className="flex items-center gap-2">
          <FileText className="w-5 h-5 text-amber-400" />
          <span className="text-amber-400 font-medium">Documentos Requeridos</span>
        </div>
        <p className="text-slate-400 text-sm mt-2">
          Sube fotos claras de tus documentos. Asegúrate de que toda la información sea legible.
        </p>
      </div>

      <input
        ref={fileInputRef}
        type="file"
        accept="image/*,application/pdf"
        onChange={handleFileChange}
        className="hidden"
      />

      <div className="grid gap-4">
        {DOCUMENT_TYPES.map((docType) => {
          const uploaded = uploadedDocuments.get(docType.id);
          const existing = existingDocuments.find(d => d.type === docType.id);
          const Icon = docType.icon;

          return (
            <div
              key={docType.id}
              className={`p-4 rounded-lg border transition-colors ${
                uploaded || (existing?.status === 'approved')
                  ? 'border-green-500/50 bg-green-900/10'
                  : existing?.status === 'rejected'
                  ? 'border-red-500/50 bg-red-900/10'
                  : 'border-slate-700 bg-slate-800/50 hover:border-slate-600'
              }`}
            >
              <div className="flex items-start justify-between">
                <div className="flex items-start gap-3">
                  <div className={`p-2 rounded-lg ${
                    uploaded || (existing?.status === 'approved')
                      ? 'bg-green-900/30 text-green-400'
                      : existing?.status === 'rejected'
                      ? 'bg-red-900/30 text-red-400'
                      : 'bg-slate-700 text-slate-400'
                  }`}>
                    <Icon className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="font-medium text-white">{docType.label}</p>
                    <p className="text-sm text-slate-400">{docType.description}</p>
                    {existing?.status === 'rejected' && existing.rejectionReason && (
                      <p className="text-sm text-red-400 mt-1">
                        <AlertCircle className="w-3 h-3 inline mr-1" />
                        {existing.rejectionReason}
                      </p>
                    )}
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  {uploaded && (
                    <>
                      <img
                        src={uploaded.preview}
                        alt="Preview"
                        className="w-12 h-12 rounded object-cover"
                      />
                      <button
                        onClick={() => removeDocument(docType.id)}
                        className="p-1 text-red-400 hover:text-red-300"
                      >
                        <X className="w-4 h-4" />
                      </button>
                    </>
                  )}
                  {!uploaded && existing?.status === 'approved' && (
                    <CheckCircle className="w-5 h-5 text-green-400" />
                  )}
                  {!uploaded && (!existing || existing.status === 'rejected') && (
                    <button
                      onClick={() => handleFileSelect(docType.id)}
                      className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-500 transition-colors"
                    >
                      <Upload className="w-4 h-4" />
                      Subir
                    </button>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );

  const renderReviewStep = () => (
    <div className="space-y-6">
      <div className="text-center mb-6">
        <KYCStatusBadge status={status} rejectionReason={rejectionReason} size="lg" />
        <p className="text-slate-400 mt-3">
          {status === 'pending' && 'Tu documentación ha sido enviada y está pendiente de revisión.'}
          {status === 'in_review' && 'Nuestro equipo está revisando tu documentación.'}
          {status === 'approved' && 'Tu identidad ha sido verificada exitosamente.'}
          {status === 'rejected' && 'Por favor, corrige los documentos rechazados y vuelve a enviar.'}
        </p>
      </div>

      {status === 'approved' && (
        <div className="bg-green-900/20 border border-green-800/50 rounded-lg p-6 text-center">
          <CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-white mb-2">Verificación Completa</h3>
          <p className="text-slate-400">
            Ya puedes realizar retiros y acceder a todas las funcionalidades de inversión.
          </p>
        </div>
      )}

      {(status === 'pending' || status === 'in_review') && (
        <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-6 text-center">
          <Clock className="w-12 h-12 text-blue-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-white mb-2">En Proceso</h3>
          <p className="text-slate-400">
            La verificación puede tomar entre 24 y 48 horas. Te notificaremos cuando esté lista.
          </p>
        </div>
      )}

      {status === 'rejected' && (
        <div className="bg-red-900/20 border border-red-800/50 rounded-lg p-6">
          <AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-white mb-2 text-center">Verificación Rechazada</h3>
          {rejectionReason && (
            <p className="text-red-400 text-center mb-4">{rejectionReason}</p>
          )}
          <button
            onClick={() => setCurrentStep('personal')}
            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition-colors"
          >
            Reiniciar Verificación
          </button>
        </div>
      )}

      {personalData.fullName && (
        <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
          <h4 className="text-sm font-medium text-slate-400 mb-3">Datos Personales</h4>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div>
              <span className="text-slate-500">Nombre:</span>
              <span className="text-white ml-2">{personalData.fullName}</span>
            </div>
            <div>
              <span className="text-slate-500">Nacionalidad:</span>
              <span className="text-white ml-2">{personalData.nationality}</span>
            </div>
            <div className="col-span-2">
              <span className="text-slate-500">Dirección:</span>
              <span className="text-white ml-2">
                {personalData.address}, {personalData.city}, {personalData.country}
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div className="bg-slate-900 rounded-xl border border-slate-800 max-w-2xl mx-auto">
      <div className="p-6 border-b border-slate-800">
        <h2 className="text-white text-xl font-semibold flex items-center gap-2">
          <Shield className="w-5 h-5 text-blue-400" />
          Verificación de Identidad (KYC)
        </h2>
        <p className="text-slate-400 text-sm mt-1">
          Completa la verificación para habilitar retiros y acceder a todas las funcionalidades
        </p>
      </div>

      {status === 'not_started' || status === 'rejected' ? (
        <>
          <div className="p-6 border-b border-slate-800">
            {renderStepIndicator()}
          </div>

          <div className="p-6">
            {currentStep === 'personal' && renderPersonalDataStep()}
            {currentStep === 'documents' && renderDocumentsStep()}
            {currentStep === 'review' && renderReviewStep()}
          </div>

          {error && (
            <div className="px-6 pb-4">
              <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
                <p className="text-sm text-red-400">{error}</p>
              </div>
            </div>
          )}

          <div className="p-6 border-t border-slate-800 flex justify-between">
            <button
              onClick={currentStep === 'personal' ? onCancel : () => setCurrentStep(currentStep === 'documents' ? 'personal' : 'documents')}
              className="px-4 py-2 text-slate-300 hover:text-white transition-colors"
            >
              {currentStep === 'personal' ? 'Cancelar' : 'Atrás'}
            </button>

            {currentStep === 'review' ? (
              <button
                onClick={handleSubmit}
                disabled={isSubmitting}
                className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Enviando...
                  </>
                ) : (
                  <>
                    <CheckCircle className="w-4 h-4" />
                    Enviar Verificación
                  </>
                )}
              </button>
            ) : (
              <button
                onClick={() => setCurrentStep(currentStep === 'personal' ? 'documents' : 'review')}
                disabled={
                  (currentStep === 'personal' && !isPersonalDataValid()) ||
                  (currentStep === 'documents' && !isDocumentsComplete())
                }
                className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                Continuar
              </button>
            )}
          </div>
        </>
      ) : (
        <div className="p-6">
          {renderReviewStep()}
        </div>
      )}
    </div>
  );
};

export default KYCVerificationPanel;