import React, { useState } from 'react';
import { Save, RefreshCw, Info } from 'lucide-react';
import { ISystemSettings } from '../../../types';
import { APP_CONFIG } from '../../../utils/config';
import Input from '../../../components/common/Input';
import { validateSystemSettings } from '../utils/validation';

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

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

  const handleSave = () => {
    const validation = validateSystemSettings(settings);
    if (!validation.isValid) {
      setErrors(validation.errors);
      return;
    }
    setErrors({});
    onSave();
  };

  return (
    <>
      {/* App Info Card */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <h2 className="text-lg font-bold text-slate-800 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2 flex items-center gap-2">
          <Info size={20} /> Thông tin phiên bản (System Info)
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
          <div>
            <p className="text-xs text-slate-500 uppercase">Ứng dụng</p>
            <p className="font-medium text-slate-800 dark:text-white">{APP_CONFIG.APP_NAME}</p>
          </div>
          <div>
            <p className="text-xs text-slate-500 uppercase">Phiên bản</p>
            <p className="font-medium text-slate-800 dark:text-white">{APP_CONFIG.APP_VERSION}</p>
          </div>
          <div>
            <p className="text-xs text-slate-500 uppercase">Chế độ dữ liệu</p>
            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
              {APP_CONFIG.DATA_MODE}
            </span>
          </div>
          <div>
            <p className="text-xs text-slate-500 uppercase">Environment</p>
            <p className="font-medium text-slate-800 dark:text-white capitalize">{APP_CONFIG.ENV}</p>
          </div>
          <div>
            <p className="text-xs text-slate-500 uppercase">Liên hệ hỗ trợ</p>
            <p className="font-medium text-blue-600 dark:text-blue-400">{APP_CONFIG.CONTACT_EMAIL}</p>
          </div>
        </div>
      </div>

      {/* Edit Form */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <h2 className="text-lg font-bold text-slate-800 dark:text-white mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
          Thông tin hệ thống
        </h2>
        <div className="space-y-4 max-w-2xl">
          <Input
            label="Tên hệ thống hiển thị"
            value={settings.systemName}
            onChange={(e) => {
              onSettingsChange({ ...settings, systemName: e.target.value });
              if (errors.systemName) setErrors({ ...errors, systemName: '' });
            }}
            placeholder="Nhập tên hệ thống"
            error={errors.systemName}
          />
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
              Logo URL
            </label>
            <div className="flex gap-4 items-center">
              <div className="h-12 w-12 bg-slate-100 dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded flex items-center justify-center overflow-hidden">
                {settings.logoUrl ? (
                  <img src={settings.logoUrl} alt="Logo" className="h-full w-full object-contain" />
                ) : (
                  <span className="text-xs text-slate-400">No Img</span>
                )}
              </div>
              <Input
                value={settings.logoUrl}
                onChange={(e) => {
                  onSettingsChange({ ...settings, logoUrl: e.target.value });
                  if (errors.logoUrl) setErrors({ ...errors, logoUrl: '' });
                }}
                placeholder="https://..."
                fullWidth
                error={errors.logoUrl}
              />
            </div>
          </div>
          <div className="flex items-center gap-2 mt-4">
            <input
              type="checkbox"
              id="maintenance"
              className="rounded text-blue-600 focus:ring-blue-500 h-4 w-4 bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600"
              checked={settings.maintenanceMode}
              onChange={(e) => onSettingsChange({ ...settings, maintenanceMode: e.target.checked })}
            />
            <label htmlFor="maintenance" className="text-sm font-medium text-slate-700 dark:text-slate-300">
              Chế độ bảo trì (Chỉ Admin được truy cập)
            </label>
          </div>
        </div>
        <div className="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-end">
          <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"
          >
            {saving ? <RefreshCw size={18} className="animate-spin" /> : <Save size={18} />}
            Lưu thay đổi
          </button>
        </div>
      </div>
    </>
  );
};

export default GeneralSettings;
export { GeneralSettings };