import React, { useState } from 'react';
import { Settings, Edit, X, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const Parameters = () => {
  const [editingParam, setEditingParam] = useState<string | null>(null);
  const {
    systemParameters,
    loading,
    updateSystemParameter,
  } = useSystemConfig();

  const handleParamEdit = (id: string, value: string) => {
    const param = systemParameters.find(p => p.id === id);
    if (param) {
      updateSystemParameter({ ...param, value });
      setEditingParam(null);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-gray-900">Parámetros del Sistema</h2>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Settings className="w-5 h-5" />
            Configuración Global
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center justify-center p-8">
              <RefreshCw className="w-6 h-6 animate-spin" />
            </div>
          ) : (
            <div className="space-y-4">
              {systemParameters.map((param) => (
                <div key={param.id} className="border rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <div>
                      <h4 className="font-medium">{param.key}</h4>
                      <p className="text-sm text-gray-600">{param.description}</p>
                    </div>
                  </div>
                  <div className="mt-2">
                    {editingParam === param.id ? (
                      <div className="flex gap-2">
                        <Input
                          defaultValue={param.value}
                          onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                              handleParamEdit(param.id, e.currentTarget.value);
                            }
                          }}
                        />
                        <Button size="sm" onClick={() => setEditingParam(null)}>
                          <X className="w-4 h-4" />
                        </Button>
                      </div>
                    ) : (
                      <div className="flex items-center gap-2">
                        <span className="text-gray-900 font-mono bg-gray-50 px-3 py-1 rounded">
                          {param.value}
                        </span>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => setEditingParam(param.id)}
                        >
                          <Edit className="w-4 h-4" />
                        </Button>
                      </div>
                    )}
                  </div>
                  <div className="mt-2 text-xs text-gray-500">
                    Tipo: {param.type}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

export default Parameters;
