import React, { useState } from 'react';
import { Save, RefreshCw, Key } from 'lucide-react';
import { ISystemSettings } from '../../../types';
import Input from '../../../components/common/Input';

interface VCOMAPISettingsProps {
  settings: ISystemSettings;
  onSettingsChange: (settings: ISystemSettings) => void;
  onSave: () => void;
  saving: boolean;
}

const VCOMAPISettings: React.FC<VCOMAPISettingsProps> = ({
  settings,
  onSettingsChange,
  onSave,
  saving
}) => {
  const [errors, setErrors] = useState<Record<string, string>>({});

  const vcomApi = settings.vcomApi || {
    username: '',
    password: '',
    apiKey: ''
  };

  const handleSave = () => {
    const newErrors: Record<string, string> = {};

    if (!vcomApi.username.trim()) {
      newErrors.username = 'Vui lòng nhập Username';
    }
    if (!vcomApi.password.trim()) {
      newErrors.password = 'Vui lòng nhập Password';
    }
    if (!vcomApi.apiKey.trim()) {
      newErrors.apiKey = 'Vui lòng nhập API Key';
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    setErrors({});
    onSave();
  };

  const handleChange = (field: 'username' | 'password' | 'apiKey', value: string) => {
    const updatedVcomApi = {
      ...vcomApi,
      [field]: value
    };
    onSettingsChange({
      ...settings,
      vcomApi: updatedVcomApi
    });
    if (errors[field]) {
      setErrors({ ...errors, [field]: '' });
    }
  };

  return (
    <div className="space-y-6">
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <div className="flex items-center gap-3 mb-4 border-b border-slate-200 dark:border-slate-700 pb-3">
          <Key className="text-blue-600 dark:text-blue-400" size={20} />
          <h2 className="text-lg font-bold text-slate-800 dark:text-white">
            Cấu hình Meteocontrol VCOM API
          </h2>
        </div>

        <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
          <p className="text-sm text-blue-800 dark:text-blue-200">
            <strong>Lưu ý:</strong> Thông tin này được sử dụng để kết nối với Meteocontrol V2 API 
            để thu thập dữ liệu KPI (Production, PR, Availability). 
            API Key này khác với Widget API key được cấu hình ở cấp Project.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6">
          <div>
            <Input
              label="Username"
              value={vcomApi.username}
              onChange={(e) => handleChange('username', e.target.value)}
              placeholder="user login VCOM"
              error={errors.username}
            />
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
              Tên đăng nhập VCOM (Meteocontrol)
            </p>
          </div>

          <div>
            <Input
              label="Password"
              type="password"
              value={vcomApi.password}
              onChange={(e) => handleChange('password', e.target.value)}
              placeholder="••••••••"
              error={errors.password}
            />
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
              Mật khẩu VCOM (Meteocontrol)
            </p>
          </div>

          <div>
            <Input
              label="V2 API Key"
              type="password"
              value={vcomApi.apiKey}
              onChange={(e) => handleChange('apiKey', e.target.value)}
              placeholder="17c*****************"
              error={errors.apiKey}
            />
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
              V2 API Key từ VCOM Administration → VCOM API (khác với Widget API key)
            </p>
          </div>
        </div>

        <div className="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700">
          <div className="flex items-center justify-between">
            <div className="text-sm text-slate-600 dark:text-slate-400">
              <p className="font-medium mb-1">Rate Limits:</p>
              <ul className="list-disc list-inside space-y-1 text-xs">
                <li>90 requests per minute</li>
                <li>10,000 requests per day</li>
              </ul>
            </div>
            <button
              onClick={handleSave}
              disabled={saving}
              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {saving ? <RefreshCw size={18} className="animate-spin" /> : <Save size={18} />}
              Lưu cấu hình
            </button>
          </div>
        </div>
      </div>

      {/* Info Section */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <h3 className="text-md font-semibold text-slate-800 dark:text-white mb-3">
          Thông tin API
        </h3>
        <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
          <p>
            <strong>API Base URL:</strong> <code className="bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded">https://api.meteocontrol.de/v2/</code>
          </p>
          <p>
            <strong>Widget API Base URL:</strong> <code className="bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded">http://ws.meteocontrol.de/api/</code>
          </p>
          <p className="mt-3">
            <strong>Lưu ý:</strong> Credentials này được lưu trữ an toàn trong MongoDB và chỉ được sử dụng 
            bởi Data Collector Service để thu thập dữ liệu KPI tự động.
          </p>
        </div>
      </div>
    </div>
  );
};

export default VCOMAPISettings;
export { VCOMAPISettings };