// react
import React, { useState, useEffect } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { exchangeRateApi } from "~/admin/services/exchangeRateApi";
import { toast } from "react-toastify";

function ConfiguracionPage() {
  const [currentRate, setCurrentRate] = useState<number>(0);
  const [sourceType, setSourceType] = useState<"internal" | "external">(
    "external",
  );
  const [manualRate, setManualRate] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true);
  const [saving, setSaving] = useState<boolean>(false);

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

  const loadData = async () => {
    try {
      setLoading(true);
      const [rate] = await Promise.all([exchangeRateApi.getCurrentRate()]);

      setSourceType(rate.source_type);
      if (rate.rate) {
        setCurrentRate(rate.rate);
        setManualRate(rate.rate.toString());
      }
    } catch (error: any) {
      console.error("Error al cargar datos:", error);
      toast.error(error.message || "Error al cargar la configuración");
    } finally {
      setLoading(false);
    }
  };

  const handleSourceTypeChange = async (
    newSourceType: "internal" | "external",
  ) => {
    try {
      setSaving(true);
      const res = await exchangeRateApi.updateRate(newSourceType, undefined);
      setSourceType(newSourceType);
      setCurrentRate(res.data.rate);
      toast.success(
        `Fuente de tasa de cambio cambiada a ${
          newSourceType === "internal" ? "API" : "Manual"
        }`,
      );

      if (newSourceType === "internal") {
        window.location.reload();
      }
    } catch (error: any) {
      toast.error(error.message || "Error al actualizar la configuración");
    } finally {
      setSaving(false);
    }
  };

  const handleUpdateRate = async () => {
    const rateValue = parseFloat(manualRate);
    if (isNaN(rateValue) || rateValue <= 0) {
      toast.error("Por favor ingrese un valor válido para la tasa de cambio");
      return;
    }

    try {
      setSaving(true);
      await exchangeRateApi.updateRate(undefined, rateValue);
      setCurrentRate(rateValue);
      toast.success("Tasa de cambio actualizada exitosamente");
    } catch (error: any) {
      toast.error(error.message || "Error al actualizar la tasa de cambio");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <ProtectedRoute>
        <AdminLayout>
          <div className="text-center py-5">
            <div className="spinner-border" role="status">
              <span className="sr-only">Cargando...</span>
            </div>
          </div>
        </AdminLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className="page-header">
          <h1>Configuración de Tasa de Cambio</h1>
        </div>

        <div className="card">
          <div className="card-header">
            <h3>Fuente de Tasa de Cambio</h3>
          </div>
          <div className="card-body">
            <p className="text-muted mb-4">
              Seleccione de dónde desea obtener el precio del dólar:
            </p>

            <div className="form-group">
              <div className="form-check mb-3">
                <input
                  className="form-check-input"
                  type="radio"
                  name="sourceType"
                  id="sourceApi"
                  checked={sourceType === "external"}
                  onChange={() => handleSourceTypeChange("external")}
                  disabled={saving}
                />
                <label className="form-check-label" htmlFor="sourceApi">
                  <strong>API Externa</strong>
                  <br />
                  <small className="text-muted">
                    Obtener el precio del dólar automáticamente desde una API
                    externa
                  </small>
                </label>
              </div>

              <div className="form-check">
                <input
                  className="form-check-input"
                  type="radio"
                  name="sourceType"
                  id="sourceEndpoint"
                  checked={sourceType === "internal"}
                  onChange={() => handleSourceTypeChange("internal")}
                  disabled={saving}
                />
                <label className="form-check-label" htmlFor="sourceEndpoint">
                  <strong>Manual (Endpoint)</strong>
                  <br />
                  <small className="text-muted">
                    Usar el precio del dólar configurado manualmente
                  </small>
                </label>
              </div>
            </div>

            {/* <div className="alert alert-info mt-4">
              <i className="fas fa-info-circle mr-2" />
              <strong>Estado actual:</strong>{" "}
              {sourceType === "external" ? "API Externa" : "Manual (Endpoint)"}
            </div> */}
          </div>
        </div>

        <div className="card mt-4">
          <div className="card-header">
            <h3>Tasa de Cambio Actual</h3>
          </div>
          <div className="card-body">
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <label htmlFor="currentRate">
                    <strong>Precio Actual del Dólar</strong>
                  </label>
                  <div className="input-group">
                    <div className="input-group-prepend">
                      <span className="input-group-text">$</span>
                    </div>
                    <input
                      type="text"
                      className="form-control"
                      id="currentRate"
                      value={currentRate.toFixed(2)}
                      readOnly
                      style={{ backgroundColor: "#f8f9fa" }}
                    />
                  </div>
                  {currentRate > 0 && (
                    <small className="form-text text-muted">
                      Este es el precio actual que se está utilizando en el
                      sistema
                    </small>
                  )}
                </div>
              </div>
            </div>

            {sourceType === "internal" && (
              <div className="mt-4">
                <h5>Actualizar Precio Manualmente</h5>
                <div className="row">
                  <div className="col-md-6">
                    <div className="form-group">
                      {/* <label htmlFor="manualRate">
                        <strong>Nuevo Precio del Dólar</strong>
                      </label> */}
                      <div className="input-group">
                        <div className="input-group-prepend">
                          <span className="input-group-text">$</span>
                        </div>
                        <input
                          type="number"
                          className="form-control"
                          id="manualRate"
                          value={manualRate}
                          onChange={(e) => setManualRate(e.target.value)}
                          placeholder="0.00"
                          step="0.01"
                          min="0"
                          disabled={saving}
                        />
                      </div>
                      <small className="form-text text-muted">
                        Ingrese el nuevo precio del dólar en bolívares
                      </small>
                    </div>
                  </div>
                </div>

                <button
                  className="btn btn-primary"
                  onClick={handleUpdateRate}
                  disabled={
                    saving || !manualRate || parseFloat(manualRate) <= 0
                  }
                >
                  {saving ? (
                    <>
                      <span
                        className="spinner-border spinner-border-sm mr-2"
                        role="status"
                      />
                      Guardando...
                    </>
                  ) : (
                    <>
                      <i className="fas fa-save mr-2" />
                      Actualizar Precio
                    </>
                  )}
                </button>
              </div>
            )}
          </div>
        </div>
      </AdminLayout>
    </ProtectedRoute>
  );
}

export default ConfiguracionPage;