"use client";

import { useParams, useRouter } from "next/navigation";
import Image from "next/image";
import DonationForm from "../components/DonationForm";
import { useDonations } from "@/context/DonationContext";
import { useEffect } from "react";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function DonationDetailPage() {
  const { language } = useLanguage();
  const t = getTranslation(language).donationDetailPage;
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const { donations } = useDonations();

  const data = donations.find((d: any) => String(d.donation_id) === String(id));
  useEffect(() => {
    if (!data) {
      router.replace("/donate");
    }
  }, [data, router]);

  if (!data) return null;

  const target = Number(data.total_amount) || 0;
  const raised = Number(data.total_raised) || 0;
  const remaining =
    Number(data.remaining_amount) || Math.max(target - raised, 0);

  const percent = target > 0 ? Math.min((raised / target) * 100, 100) : 0;

  // Format number in Indian numbering system
  const formatINR = (value: number) => {
    return new Intl.NumberFormat("en-IN").format(value);
  };

  return (
    <div className="min-h-screen bg-[#FFF8F0] px-4 py-10 mt-20">
      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10">
        <div>
          <Image
            src={data?.thumbnail}
            alt={data.title}
            width={900}
            height={400}
            className="w-full h-[400px] rounded-3xl mb-6 object-fill"
          />

          <h1 className="text-3xl font-bold mb-6 text-gray-900">
            {language === "hindi" ? data.title_hi : data.title}
          </h1>

          {/* Progress Indicator */}
          <div className="bg-gray-100 rounded-lg px-4 py-3 mb-4">
            <p className="text-sm text-gray-700">
              <span className="font-semibold text-gray-900">₹{formatINR(raised)}</span>
              <span className="text-gray-500"> {t.of} </span>
              <span className="font-semibold text-gray-900">₹{formatINR(target)}</span>
              <span className="text-gray-500"> {t.collected}</span>
            </p>
          </div>

          {/* Progress Bar */}
          <div className="w-full bg-gray-200 rounded-full h-2.5 mb-6">
            <div
              className="bg-gradient-to-r from-[#FAA631] to-[#E6952B] h-2.5 rounded-full transition-all duration-300"
              style={{ width: `${percent}%` }}
            />
          </div>

          {/* Stats */}
          <div className="mb-6 p-4 bg-white rounded-lg border border-gray-100">
            <p className="text-sm text-gray-600 mb-1">{t.progress}</p>
            <p className="text-lg font-semibold text-gray-900">
              {percent.toFixed(1)}% {t.targetReached}
            </p>
            {remaining > 0 && (
              <p className="text-sm text-gray-500 mt-2">
                ₹{formatINR(remaining)} {t.remainingToGoal}
              </p>
            )}
          </div>

          {/* Description */}
          <div className="prose prose-lg max-w-none">
            <p className="text-gray-700 leading-relaxed">
              {language === "hindi" ? data.description_hi : data.description}
            </p>
          </div>
        </div>

        <div className="lg:sticky lg:top-24 h-fit">
          <DonationForm />
        </div>
      </div>
    </div>
  );
}