"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Eye, ReceiptText } from "lucide-react";
import { getTransactionHistory } from "@/lib/api/apis";
import ReceiptModal from "../components/ReceiptModal";
import { getStoredLanguage } from "@/lib/language";
import { getTranslation } from "@/src/hooks/useTranslation";

interface Order {
  id: string;
  transaction_id: string;
  amount: string;
  currency: string;
  status: "0" | "1" | "2";
  created_at: string;
}

export default function DonationHistoryPage() {
  const router = useRouter();
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState<Order | null>(null);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const lang = getStoredLanguage();
  const t = getTranslation(lang).donationHistoryPage;

  useEffect(() => {
    const userRaw = localStorage.getItem("user_data");
    if (!userRaw) {
      router.replace("/login");
      return;
    }

    const user = JSON.parse(userRaw);
    if (!user?.id) {
      router.replace("/login");
      return;
    }

    const loadHistory = async () => {
      const fd = new FormData();
      fd.append("user_id", user.id);
      const res = await getTransactionHistory(fd);
      if (res?.status && res?.data?.orders) {
        setOrders(res.data.orders);
      }
      setLoading(false);
    };

    loadHistory();
  }, [router]);

  const totalPages = Math.ceil(orders.length / pageSize);

  const paginatedOrders = useMemo(() => {
    const start = (page - 1) * pageSize;
    return orders.slice(start, start + pageSize);
  }, [orders, page, pageSize]);

  const renderStatus = (status: Order["status"]) => {
    if (status === "1")
      return (
        <span className="px-3 py-1 text-xs rounded-full bg-green-50 text-green-600 font-semibold">
          {t.success}
        </span>
      );
    if (status === "2")
      return (
        <span className="px-3 py-1 text-xs rounded-full bg-red-50 text-red-600 font-semibold">
          {t.failed}
        </span>
      );
    return (
      <span className="px-3 py-1 text-xs rounded-full bg-yellow-50 text-yellow-600 font-semibold">
        {t.pending}
      </span>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-orange-50 to-white pt-24 pb-16">
      <div className="container mx-auto max-w-5xl px-4">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
          <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-2">
            <ReceiptText className="text-[#FAA631]" />
            {t.title}
          </h1>

          <div className="flex items-center gap-2 text-sm">
            <span className="text-gray-600">{t.rows}</span>
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value));
                setPage(1);
              }}
              className="border rounded-md px-2 py-1"
            >
              {[10, 20, 50].map((n) => (
                <option key={n} value={n}>
                  {n}
                </option>
              ))}
            </select>
          </div>
        </div>

        {loading ? (
          <div className="w-full min-h-[60vh] flex justify-center items-center">
            <p className="text-gray-500">{t.loading}</p>
          </div>
        ) : paginatedOrders.length === 0 ? (
          <div className="w-full min-h-[60vh] flex justify-center items-center">
            <p className="text-gray-500">{t.empty}</p>
          </div>
        ) : (
          <div className="space-y-4">
            {paginatedOrders.map((order) => (
              <Card key={order.id} className="border border-orange-100">
                <CardContent className="py-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                  <div>
                    <p className="font-semibold text-gray-900">
                      {t.donationLabel} #{order.id}
                    </p>
                    <p className="text-sm text-gray-500">
                      {new Date(order.created_at).toLocaleString()}
                    </p>
                    {order.transaction_id && (
                      <p className="text-xs text-gray-600 mt-1">
                        {t.txn} {order.transaction_id}
                      </p>
                    )}
                  </div>

                  <div className="flex items-center gap-4">
                    <span className="font-bold text-gray-900">
                      Rs.{order.amount}
                    </span>
                    {renderStatus(order.status)}
                    {/* {order.status === "1" && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => setSelected(order)}
                      >
                        <Eye className="w-4 h-4 mr-1" />
                        {t.receipt}
                      </Button>
                    )} */}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

        {totalPages > 1 && (
          <div className="flex justify-center items-center gap-4 mt-8">
            <Button
              variant="outline"
              disabled={page === 1}
              onClick={() => setPage((p) => p - 1)}
            >
              {t.prev}
            </Button>
            <span className="text-sm text-gray-700">
              {t.page} {page} {t.of} {totalPages}
            </span>
            <Button
              variant="outline"
              disabled={page === totalPages}
              onClick={() => setPage((p) => p + 1)}
            >
              {t.next}
            </Button>
          </div>
        )}
      </div>

      {selected && (
        <ReceiptModal order={selected} onClose={() => setSelected(null)} />
      )}
    </div>
  );
}