'use client';

import { useState, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { uploadFiel } from '@/lib/api/fiel';
import type { FielStatus } from '@horux/shared';

interface FielUploadModalProps {
  onSuccess: (status: FielStatus) => void;
  onClose: () => void;
}

export function FielUploadModal({ onSuccess, onClose }: FielUploadModalProps) {
  const [cerFile, setCerFile] = useState<File | null>(null);
  const [keyFile, setKeyFile] = useState<File | null>(null);
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const fileToBase64 = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const result = reader.result as string;
        // Remove data URL prefix (e.g., "data:application/x-x509-ca-cert;base64,")
        const base64 = result.split(',')[1];
        resolve(base64);
      };
      reader.onerror = reject;
    });
  };

  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (!cerFile || !keyFile || !password) {
      setError('Todos los campos son requeridos');
      return;
    }

    setLoading(true);

    try {
      const cerBase64 = await fileToBase64(cerFile);
      const keyBase64 = await fileToBase64(keyFile);

      const result = await uploadFiel({
        cerFile: cerBase64,
        keyFile: keyBase64,
        password,
      });

      if (result.status) {
        onSuccess(result.status);
      }
    } catch (err: any) {
      setError(err.response?.data?.error || 'Error al subir la FIEL');
    } finally {
      setLoading(false);
    }
  }, [cerFile, keyFile, password, onSuccess]);

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <Card className="w-full max-w-md mx-4">
        <CardHeader>
          <CardTitle>Configurar FIEL (e.firma)</CardTitle>
          <CardDescription>
            Sube tu certificado y llave privada para sincronizar CFDIs con el SAT
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="cer">Certificado (.cer)</Label>
              <Input
                id="cer"
                type="file"
                accept=".cer"
                onChange={(e) => setCerFile(e.target.files?.[0] || null)}
                className="cursor-pointer"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="key">Llave Privada (.key)</Label>
              <Input
                id="key"
                type="file"
                accept=".key"
                onChange={(e) => setKeyFile(e.target.files?.[0] || null)}
                className="cursor-pointer"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="password">Contrasena de la llave</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Ingresa la contrasena de tu FIEL"
              />
            </div>

            {error && (
              <p className="text-sm text-red-500">{error}</p>
            )}

            <div className="flex gap-3 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={onClose}
                className="flex-1"
              >
                Cancelar
              </Button>
              <Button
                type="submit"
                disabled={loading}
                className="flex-1"
              >
                {loading ? 'Subiendo...' : 'Configurar FIEL'}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}