// src/pages/Settings.js
import React, { useState, useEffect } from "react";
import toast from "react-hot-toast";
import { getAllSettings, updateAllSettings } from "../../components/adminApi"; 
import Layout from "../../components/academy/Layout";
import { FaSave, FaPercent, FaGem, FaSpinner, FaExclamationTriangle } from "react-icons/fa";

const Settings = () => {
  const [settings, setSettings] = useState({
    tax: 8,
    proPrice: "60000",
    legendPrice: "199000",
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [errors, setErrors] = useState({});

  const fetchSettings = async () => {
    setLoading(true);
    try {
      const response = await getAllSettings();
      console.log("Settings response:", response.data);
      
      if (response.data.success) {
        setSettings({
          tax: response.data.data.tax || 8,
          proPrice: response.data.data.prices?.pro || "60000",
          legendPrice: response.data.data.prices?.legend || "199000",
        });
      } else {
        toast.error(response.data.message || "خطا در دریافت تنظیمات");
      }
    } catch (error) {
      console.error("Error fetching settings:", error);
      toast.error("خطا در دریافت تنظیمات");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchSettings();
  }, []);

  const validateSettings = () => {
    const newErrors = {};
    
    // اعتبارسنجی مالیات
    const taxNum = parseFloat(settings.tax);
    if (isNaN(taxNum)) {
      newErrors.tax = "مقدار مالیات باید عدد باشد";
    } else if (taxNum < 0) {
      newErrors.tax = "مالیات نمی‌تواند منفی باشد";
    } else if (taxNum > 100) {
      newErrors.tax = "مالیات نمی‌تواند بیشتر از 100 درصد باشد";
    }
    
    // اعتبارسنجی قیمت پرو
    const proPriceNum = parseInt(settings.proPrice);
    if (isNaN(proPriceNum)) {
      newErrors.proPrice = "قیمت پرو باید عدد باشد";
    } else if (proPriceNum < 0) {
      newErrors.proPrice = "قیمت نمی‌تواند منفی باشد";
    }
    
    // اعتبارسنجی قیمت لجند
    const legendPriceNum = parseInt(settings.legendPrice);
    if (isNaN(legendPriceNum)) {
      newErrors.legendPrice = "قیمت لجند باید عدد باشد";
    } else if (legendPriceNum < 0) {
      newErrors.legendPrice = "قیمت نمی‌تواند منفی باشد";
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setSettings({
      ...settings,
      [name]: value,
    });
    // پاک کردن خطای مربوط به این فیلد
    if (errors[name]) {
      setErrors({ ...errors, [name]: "" });
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // اعتبارسنجی
    if (!validateSettings()) {
      toast.error("لطفاً مقادیر را به درستی وارد کنید");
      return;
    }
    
    setSaving(true);
    try {
      const response = await updateAllSettings({
        tax: parseFloat(settings.tax),
        proPrice: parseInt(settings.proPrice) || 0,
        legendPrice: parseInt(settings.legendPrice) || 0,
      });
      
      console.log("Save response:", response.data);
      
      if (response.data.success) {
        toast.success("تنظیمات با موفقیت ذخیره شد");
        fetchSettings(); // رفرش کردن مقادیر از سرور
      } else {
        toast.error(response.data.message || "خطا در ذخیره تنظیمات");
      }
    } catch (error) {
      console.error("Error saving settings:", error);
      toast.error(error.response?.data?.message || "خطا در ذخیره تنظیمات");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <Layout>
        <div className="flex justify-center items-center h-96">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-pink-500"></div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="p-6">
        <div className="mb-6">
          <h1 className="text-2xl font-bold">تنظیمات سیستم</h1>
          <p className="text-gray-500 mt-1">مدیریت مالیات و قیمت دوره‌های ویژه</p>
        </div>

        <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
          {/* درصد مالیات */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                <FaPercent className="text-orange-500" />
              </div>
              <h2 className="text-lg font-semibold">درصد مالیات (تکس)</h2>
            </div>
            <div className="flex items-center gap-4 flex-wrap">
              <div className="flex-1 max-w-[200px]">
                <input
                  type="number"
                  name="tax"
                  value={settings.tax}
                  onChange={handleChange}
                  className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 ${
                    errors.tax ? "border-red-500" : "border-gray-300"
                  }`}
                  min="0"
                  max="100"
                  step="0.5"
                />
                {errors.tax && (
                  <p className="text-red-500 text-xs mt-1 flex items-center gap-1">
                    <FaExclamationTriangle className="text-xs" />
                    {errors.tax}
                  </p>
                )}
              </div>
              <span>درصد</span>
            </div>
            <p className="text-sm text-gray-500 mt-2">
              این درصد به مبلغ هر فروش اضافه خواهد شد (محدوده: 0 تا 100)
            </p>
          </div>

          {/* قیمت دوره‌های ویژه */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <FaGem className="text-purple-500" />
              </div>
              <h2 className="text-lg font-semibold">قیمت دوره‌های ویژه</h2>
            </div>
            <div className="space-y-4">
              <div className="flex items-center gap-4 flex-wrap">
                <span className="w-32">دوره پرو:</span>
                <div className="flex-1 max-w-[200px]">
                  <input
                    type="number"
                    name="proPrice"
                    value={settings.proPrice}
                    onChange={handleChange}
                    className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 ${
                      errors.proPrice ? "border-red-500" : "border-gray-300"
                    }`}
                    min="0"
                  />
                  {errors.proPrice && (
                    <p className="text-red-500 text-xs mt-1 flex items-center gap-1">
                      <FaExclamationTriangle className="text-xs" />
                      {errors.proPrice}
                    </p>
                  )}
                </div>
                <span>تومان</span>
              </div>
              <div className="flex items-center gap-4 flex-wrap">
                <span className="w-32">دوره لجند:</span>
                <div className="flex-1 max-w-[200px]">
                  <input
                    type="number"
                    name="legendPrice"
                    value={settings.legendPrice}
                    onChange={handleChange}
                    className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 ${
                      errors.legendPrice ? "border-red-500" : "border-gray-300"
                    }`}
                    min="0"
                  />
                  {errors.legendPrice && (
                    <p className="text-red-500 text-xs mt-1 flex items-center gap-1">
                      <FaExclamationTriangle className="text-xs" />
                      {errors.legendPrice}
                    </p>
                  )}
                </div>
                <span>تومان</span>
              </div>
            </div>
            <p className="text-sm text-gray-500 mt-2">
              قیمت دوره معمولی از قیمت تعیین شده توسط آکادمی محاسبه می‌شود
            </p>
          </div>

          {/* دکمه ذخیره */}
          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={fetchSettings}
              disabled={saving}
              className="flex items-center gap-2 px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition disabled:opacity-50"
            >
              بازیابی
            </button>
            <button
              type="submit"
              disabled={saving}
              className="flex items-center gap-2 px-6 py-3 bg-pink-500 text-white rounded-xl hover:bg-pink-600 transition disabled:opacity-50"
            >
              {saving ? (
                <>
                  <FaSpinner className="animate-spin" />
                  در حال ذخیره...
                </>
              ) : (
                <>
                  <FaSave />
                  ذخیره تنظیمات
                </>
              )}
            </button>
          </div>
        </form>

        {/* توضیحات پایین صفحه */}
        <div className="mt-8 p-4 bg-gray-50 rounded-lg text-sm text-gray-500">
          <p className="font-semibold mb-2">ℹ️ نکات مهم:</p>
          <ul className="space-y-1 list-disc list-inside">
            <li>تغییر مالیات بر روی تمام فروش‌های جدید تأثیر می‌گذارد</li>
            <li>قیمت دوره‌های پرو و لجند برای ساخت دوره‌های جدید اعمال می‌شود</li>
            <li>دوره‌های موجود با قیمت قبلی خود باقی می‌مانند</li>
          </ul>
        </div>
      </div>
    </Layout>
  );
};

export default Settings;