/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useAuth } from '../../../context/AuthContext';
import Button from '../../../components/Button';
import Loader from '../../../components/loader';
import { FaPlus } from 'react-icons/fa';
import { fetchSavingsList, setAuthToken } from '../../../lib/api/api';
import { toast } from 'sonner';

interface AccruedEarning {
  dailyEarning: number;
  date: string;
}

interface SavingsPlan {
  id: string;
  goal: string;
  accruedEarning: AccruedEarning[];
  totalSavings: number;
  amountToSave: number;
  maturityDate: string;
  startDate: string;
  frequency: string;
  savingsCategory: string;
  projectedInterest: number;
  interestRate: number;
}

interface SavingsCategory {
  savingsCategory: string;
  totalCategoryAmount: number;
  savingsPlans: SavingsPlan[];
}

const AllSavingsPage = () => {
  const { token } = useAuth();
  setAuthToken(token)
  const [allPlans, setAllPlans] = useState<SavingsPlan[]>([]);
  const [fundModalOpen, setFundModalOpen] = useState(false);
  const [selectedSaving, setSelectedSaving] = useState<SavingsPlan | null>(null);
  const [amount, setAmount] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!token) return;
    setLoading(true);

    fetchSavingsList()
      .then((res) => {
        const categories: SavingsCategory[] = res.data.data || [];
        const plans = categories.flatMap((cat) => cat.savingsPlans);
        setAllPlans(plans);
      })
      .catch((err) => {
        console.error('Error fetching savings:', err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [token]);

  const formatAmount = (amount: number) =>
    amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  const calculateProgress = (saved: number, target: number) => {
    if (target === 0) return 0;
    return Math.min((saved / target) * 100, 100);
  };

  const calculateTargetAmount = (plan: SavingsPlan) => {
    return plan.amountToSave + plan.projectedInterest;
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  };

  const handleFund = async () => {
    if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
      toast.error("Please enter a valid amount.");
      return;
    }

    if (!selectedSaving) {
      toast.error("No savings plan selected.");
      return;
    }
  
    setLoading(true);
    try {
      const requestUrl = `https://webapidev.subacapital.co/api/savings/update?amount=${amount}&savingsPlanId=${selectedSaving.id}`;
  
      const response = await fetch(requestUrl, {
        method: "PUT",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
      });
  
      const data = await response.json();
  
      if (!response.ok) {
        // 🧠 Extract the proper error message from different possible structures
        const errorMessage =
          data?.message ||
          data?.error ||
          (data?.errors?.length > 0 ? data.errors[0].message : null) ||
          "Something went wrong, please try again.";
  
        throw new Error(errorMessage);
      }
  
      // ✅ Success
      toast.success(data.message || "Funds added successfully!");
      setFundModalOpen(false);
      setAmount("");
    } catch (error: any) {
      toast.error(error.message || "An unexpected error occurred.");
    } finally {
      setLoading(false);
    }
  };
  

  if (loading) {
    return (
      <main className="flex justify-center items-center h-screen bg-white">
        <Loader />
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-gray-50 p-4 md:p-8 text-black">
      <div className="max-w-6xl mx-auto bg-white rounded-lg shadow p-6">
        <div className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-2xl font-bold">All Savings Plans</h1>
            <p className="text-gray-500">View all your active savings plans here</p>
          </div>
          <Link href="/savings/dashboard">
            <Button className="bg-purple-600 text-white px-4 py-2 rounded-lg">
              Back to Dashboard
            </Button>
          </Link>
        </div>

        {allPlans.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {allPlans.map((plan) => (
              <div
                key={plan.id}
                className="border rounded-lg p-4 hover:shadow-md transition-all duration-200"
              >
                <div className="flex justify-between items-center mb-2">
                  <h3 className="font-bold text-lg">{plan.goal}</h3>
                  <span className="text-gray-500 text-sm">
                    ₦{formatAmount(calculateTargetAmount(plan))}
                  </span>
                </div>

                <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                  <div
                    className="bg-purple-600 h-2 rounded-full transition-all"
                    style={{
                      width: `${calculateProgress(
                        plan.totalSavings,
                        calculateTargetAmount(plan)
                      )}%`,
                    }}
                  ></div>
                </div>

                <p className="text-xs text-gray-500 mb-4">
                  ₦{formatAmount(plan.totalSavings)} of ₦
                  {formatAmount(calculateTargetAmount(plan))} saved
                </p>

                <div className="space-y-2 text-sm mb-4">
                  <div className="flex justify-between">
                    <p className="text-gray-500">End Date</p>
                    <p className="font-medium">{formatDate(plan.maturityDate)}</p>
                  </div>
                  <div className="flex justify-between">
                    <p className="text-gray-500">Frequency</p>
                    <p className="font-medium">{plan.frequency}</p>
                  </div>
                  <div className="flex justify-between">
                    <p className="text-gray-500">Category</p>
                    <p className="font-medium">{plan.savingsCategory}</p>
                  </div>
                </div>

                <Button
                    className="w-full mt-6 bg-purple-600 text-white py-3 rounded-lg flex items-center justify-center"
                    onClick={() => {
                        setSelectedSaving(plan);
                        setFundModalOpen(true);
                    }}
                    >
                    <FaPlus className="mr-2" /> Add funds
                </Button>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-12 text-gray-500">
            <p className="text-lg mb-4">No savings plans yet</p>
            <Link href="/savings/create">
              <Button className="bg-purple-600 text-white px-6 py-3 rounded-lg">
                Create Your First Plan
              </Button>
            </Link>
          </div>
              )}
              
            {fundModalOpen && selectedSaving && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                <div className="bg-white rounded-lg p-6 max-w-md w-full">
                <h2 className="text-lg font-bold mb-4">
                    Add Funds to {selectedSaving.goal}
                </h2>

                <input
                    type="number"
                    placeholder="Enter amount"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    className="w-full border border-gray-300 rounded-md px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-purple-500"
                />

                <div className="flex justify-end space-x-3">
                    <button
                    onClick={() => setFundModalOpen(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700"
                    >
                    Cancel
                    </button>
                    <button
                    onClick={handleFund}
                    disabled={loading}
                    className={`px-4 py-2 rounded-md text-white ${
                        loading
                        ? "bg-purple-400"
                        : "bg-purple-600 hover:bg-purple-700"
                    }`}
                    >
                    {loading ? "Processing..." : "Fund Plan"}
                    </button>
                </div>
                </div>
            </div>
            )}
      </div>
    </main>
  );
};

export default AllSavingsPage;