import React, { useState } from 'react';
import { CreditCard, TestTube, Edit, X, RefreshCw, Eye, EyeOff } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const Payments = () => {
  const [editingPayment, setEditingPayment] = useState<string | null>(null);
  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
  const {
    paymentConfigs,
    loading,
    updatePaymentConfig,
    testPaymentConnection,
  } = useSystemConfig();

  const handlePaymentEdit = (id: string, field: string, value: string | boolean) => {
    const config = paymentConfigs.find(c => c.id === id);
    if (config) {
      if (field === 'enabled' || field === 'testMode') {
        updatePaymentConfig({ ...config, [field]: value });
      } else {
        updatePaymentConfig({
          ...config,
          credentials: { ...config.credentials, [field]: value as string }
        });
      }
      setEditingPayment(null);
    }
  };

  const toggleSecretVisibility = (key: string) => {
    setShowSecrets(prev => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-gray-900">Configuración de Medios de Pago</h2>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CreditCard className="w-5 h-5" />
            Proveedores de Pago
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center justify-center p-8">
              <RefreshCw className="w-6 h-6 animate-spin" />
            </div>
          ) : paymentConfigs.length === 0 ? (
            <div className="text-center p-8 bg-gray-50 rounded-lg">
              <CreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-gray-900 mb-2">
                No hay configuraciones de pago
              </h3>
              <p className="text-gray-600">
                Configure los proveedores de pago para comenzar a procesar transacciones
              </p>
            </div>
          ) : (
            <div className="space-y-6">
              {paymentConfigs.map((config) => (
                <div key={config.id} className="border rounded-lg p-6">
                  <div className="flex items-center justify-between mb-4">
                    <div>
                      <h4 className="text-lg font-semibold">{config.name}</h4>
                      <p className="text-sm text-gray-600">{config.provider.toUpperCase()}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant={config.status === 'active' ? 'default' : 'secondary'}>
                        {config.status}
                      </Badge>
                      <Badge variant={config.testMode ? 'outline' : 'default'}>
                        {config.testMode ? 'Test' : 'Producción'}
                      </Badge>
                      <Switch
                        checked={config.enabled}
                        onCheckedChange={(checked) => 
                          handlePaymentEdit(config.id, 'enabled', checked)
                        }
                      />
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => testPaymentConnection(config.id)}
                      >
                        <TestTube className="w-4 h-4 mr-1" />
                        Probar
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-4">
                    {config.provider === 'stripe' && (
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <label className="text-sm font-medium">Publishable Key:</label>
                          <div className="flex items-center gap-2 mt-1">
                            <span className="text-sm text-gray-600 truncate">
                              {config.credentials.publishableKey || 'No configurado'}
                            </span>
                          </div>
                        </div>

                        <div>
                          <label className="text-sm font-medium">Secret Key:</label>
                          <div className="flex items-center gap-2 mt-1">
                            <span className="text-sm text-gray-600">
                              {config.credentials.secretKey ? '••••••••••••' : 'No configurado'}
                            </span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

export default Payments;
