import React, { useEffect, useState, useContext } from "react";
import { Link, useNavigate } from "react-router-dom";

import { langContext } from "../../context/LenguageContext";
import DateRangeFilter from "../../components/Filters/DateRangeFilter";
import SummaryCard from "../../components/SummaryCard";
import ExcelExportButton from "../../components/ExcelExportButton";
import "../../components/Filters/Filters.css";
import "./IncomeReport.css";
import Table from "../../components/Table/HotelTable";

export default function IncomeReport() {
  const navigate = useNavigate();
  const { lang } = useContext(langContext);
  const [incomeData, setIncomeData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [dateRange, setDateRange] = useState({ from: "", to: "" });
  const [accountFilter, setAccountFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    async function fetchAccounts() {
      try {
        await fetch(
          `${import.meta.env.VITE_API_BASE_URL}/incomeshrx/stripedata`
        );
        const response = await fetch(
          `${import.meta.env.VITE_API_BASE_URL}/incomeshrx/accountincome`
        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        const data = Array.isArray(result) ? result : result.data || [];
        setAccounts(data);
      } catch (err) {
        console.error("Error fetching accounts:", err);
        setAccounts([]);
      }
    }

    fetchAccounts();
  }, []);

  useEffect(() => {
    async function fetchIncomeData() {
      try {
        setLoading(true);
        setError("");

        const response = await fetch(
          `${import.meta.env.VITE_API_BASE_URL}/incomeshrx/incomehorux`
        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();

        const data = Array.isArray(result) ? result : result.data || [];

        const mappedData = data.map((item) => ({
          id_hrx_income: item.id_hrx_income,
          date: item.date_in,
          created_at: item.createddate || item.date_in,
          account: item.account_name,
          amount: item.account_name === "STRIPE" ? parseFloat(item.amountinvoice || 0).toFixed(2) : parseFloat(item.amount || 0).toFixed(2),
          invoiceAmount: item.account_name === "STRIPE" ? parseFloat(item.amount || 0).toFixed(2) : parseFloat(item.amountinvoice || 0).toFixed(2),
          invoices: item.invoice,
          status: item.status_in ? "Distributed" : "Pending",
          categories: item.categories || [],
        }));

        setIncomeData(mappedData);
        setFilteredData(mappedData);
      } catch (err) {
        console.error("Error fetching income data:", err);
        setError(
          lang === "es"
            ? "Error al cargar los datos de ingresos. Por favor, intente de nuevo."
            : "Failed to load income data. Please try again."
        );
        setIncomeData([]);
        setFilteredData([]);
      } finally {
        setLoading(false);
      }
    }

    fetchIncomeData();
  }, [lang]);

  useEffect(() => {
    let filtered = [...incomeData];

    if (dateRange.from && dateRange.to) {
      filtered = filtered.filter((item) => {
        const itemDate = item.created_at?.slice(0, 10);

        if (!itemDate) return false;

        return itemDate >= dateRange.from && itemDate <= dateRange.to;
      });
    }

    if (accountFilter) {
      filtered = filtered.filter((item) => item.account === accountFilter);
    }

    if (statusFilter) {
      filtered = filtered.filter((item) => item.status === statusFilter);
    }

    setFilteredData(filtered);
  }, [dateRange, accountFilter, statusFilter, incomeData]);

  const clearFilters = () => {
    setDateRange({ from: "", to: "" });
    setAccountFilter("");
    setStatusFilter("");
  };

  const formatDate = (dateStr) => {
    if (!dateStr) return "";

    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return "";

    const day = String(date.getDate()).padStart(2, "0");
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const year = date.getFullYear();

    return `${day}/${month}/${year}`;
  };

  const handleStatusClick = (label, row) => {
    if (label === "Pending") {
      navigate(`/app/edit-income-form/${row.id}`, {
        state: {
          incomeData: {
            id: row.id,
            date: row.created_at,
            account: row.account,
            amount: row.amount,
            invoiceAmount: row.invoiceAmount,
            invoices: row.invoices,
            status: row.status,
            categories: row.categories
          }
        }
      });
    }
  };

  const totalIncome = filteredData.reduce((sum, item) => {
    return sum + parseFloat(item.amount || 0);
  }, 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  const statusOptions = ["Distributed", "Pending"];

  const columns = [
    { header: lang === "es" ? "ID" : "ID", key: "id_hrx_income" },
    {
      header: lang === "es" ? "FECHA" : "DATE",
      key: "created_at",
      render: (value) => formatDate(value),
    },
    {
      header: lang === "es" ? "CUENTA" : "ACCOUNT",
      key: "account",
      render: (value, row) => (
        <span
          onClick={() => navigate(`/app/edit-income-form/${row.id}`, {
            state: {
              incomeData: {
                id: row.id,
                date: row.created_at,
                account: row.account,
                amount: row.amount,
                invoiceAmount: row.invoiceAmount,
                invoices: row.invoices,
                status: row.status,
                categories: row.categories
              }
            }
          })}
          style={{
            color: "#5D1A2A",
            textDecoration: "underline",
            cursor: "pointer",
            fontWeight: "500",
          }}
        >
          {value}
        </span>
      ),
    },
    {
      header: lang === "es" ? "MONTO" : "AMOUNT",
      key: "amount",
      render: (value) => {
        const num = parseFloat(value);
        return `$${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
      },
    },
    {
      header: lang === "es" ? "MONTO FACTURA" : "INVOICE AMOUNT",
      key: "invoiceAmount",
      render: (value) => {
        const num = parseFloat(value);
        return `$${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
      },
    },
    {
      header: lang === "es" ? "FACTURA" : "INVOICE",
      key: "invoices",
    },
    {
      header: lang === "es" ? "CATEGORÍAS" : "CATEGORIES",
      key: "categories",
      render: (value, row) => {
        if (!row.categories || row.categories.length === 0) {
          return "-";
        }

        return row.categories.map((category, index) => {
          const total = parseFloat(category.total || 0);
          const formattedTotal = `$${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
          return (
            <div key={index} style={{ marginBottom: index < row.categories.length - 1 ? '4px' : '0' }}>
              {category.category}: {formattedTotal}
            </div>
          );
        });
      },
    },
    {
      header: lang === "es" ? "ESTADO" : "STATUS",
      key: "status",
      headerStyle: { textAlign: "center" },
      render: (value, row) => (
        <div style={{ textAlign: "center" }}>
          <button
            onClick={() => handleStatusClick(value, row)}
            style={{
              padding: "4px 12px",
              border: "none",
              borderRadius: "4px",
              cursor: "pointer",
              fontWeight: "bold",
              backgroundColor: value === "Distributed" ? "#4CAF50" : "#FFC107",
              color: value === "Distributed" ? "white" : "black",
            }}
          >
            {lang === "es"
              ? value === "Distributed"
                ? "Distribuido"
                : "Pendiente"
              : value}
          </button>
        </div>
      ),
    },
  ];

  const exportColumns = [
    { header: lang === "es" ? "ID" : "ID", key: "id_hrx_income" },
    { header: lang === "es" ? "FECHA" : "DATE", key: "created_at" },
    { header: lang === "es" ? "CUENTA" : "ACCOUNT", key: "account" },
    { header: lang === "es" ? "MONTO" : "AMOUNT", key: "amount" },
    { header: lang === "es" ? "MONTO FACTURA" : "INVOICE AMOUNT", key: "invoiceAmount" },
    { header: lang === "es" ? "FACTURA" : "INVOICE", key: "invoices" },
    { header: lang === "es" ? "CATEGORÍAS" : "CATEGORIES", key: "categories" },
    { header: lang === "es" ? "ESTADO" : "STATUS", key: "status" },
  ];

  const dataTransform = (data) => {
    return data.map((row) => ({
      ...row,
      created_at: formatDate(row.created_at),
      amount: row.amount ? `$${parseFloat(row.amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '',
      invoiceAmount: row.invoiceAmount ? `$${parseFloat(row.invoiceAmount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '',
      categories: row.categories && row.categories.length > 0
        ? row.categories.map(cat => {
            const total = parseFloat(cat.total || 0);
            const formattedTotal = `$${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            return `${cat.category}: ${formattedTotal}`;
          }).join('; ')
        : '',
      status: lang === "es"
        ? (row.status === "Distributed" ? "Distribuido" : "Pendiente")
        : row.status,
    }));
  };

  return (
    <div className="income-report-page">
      <div className="page-header">
        <h2 className="page-title">
          {lang === "es" ? "Informe de Ingresos" : "Income Report"}
        </h2>
      </div>

      {error && <div className="error-message">{error}</div>}

      <div className="summary-actions-section">
        <div className="summary-card-wrapper">
          <SummaryCard
            title={lang === "es" ? "Total de Ingresos" : "Total Income"}
            amount={totalIncome}
            isLoading={loading}
          />
        </div>
        <Link to="/app/new-income-form" className="new-income-btn">
          {lang === "es" ? "+ Nuevo Ingreso" : "+ New Income"}
        </Link>
      </div>

      <div className="filters-section">
        <DateRangeFilter
          dateRange={dateRange}
          onDateChange={setDateRange}
          lang={lang}
        />

        <select
          value={accountFilter}
          onChange={(e) => setAccountFilter(e.target.value)}
          className="filter-select"
        >
          <option value="">
            {lang === "es" ? "Todas las cuentas" : "All Accounts"}
          </option>
          {accounts.map((account) => (
            <option key={account.id_acc_income} value={account.name_acc_income}>
              {account.name_acc_income}
            </option>
          ))}
        </select>

        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="filter-select"
        >
          <option value="">
            {lang === "es" ? "Todos los estados" : "All Status"}
          </option>
          {statusOptions.map((status, index) => (
            <option key={index} value={status}>
              {lang === "es"
                ? status === "Distributed"
                  ? "Distribuido"
                  : "Pendiente"
                : status}
            </option>
          ))}
        </select>

        <button onClick={clearFilters} className="clear-filters-btn">
          {lang === "es" ? "Limpiar filtros" : "Clear filters"}
        </button>
      </div>

      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '15px' }}>
        <ExcelExportButton
          data={filteredData}
          columns={exportColumns}
          filenamePrefix={lang === "es" ? "informe-ingresos" : "income-report"}
          sheetName={lang === "es" ? "Informe de Ingresos" : "Income Report"}
          dataTransform={dataTransform}
        />
      </div>

      <div className="table-section">
        {loading ? (
          <div className="table-loading">
            <div className="loading-spinner-large"></div>
            <p>{lang === "es" ? "Cargando..." : "Loading..."}</p>
          </div>
        ) : (
          <Table columns={columns} data={filteredData} />
        )}
      </div>
    </div>
  );
}