'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest } from '@/lib/api';
import { toast } from '@/context/ToastContext';
import {
  CreditCard,
  Euro,
  Search,
  Filter,
  CheckCircle,
  Clock,
  AlertTriangle,
  RefreshCw,
  Eye,
  X,
  FileCheck,
  Building2,
  Calendar,
  Plus,
  ShoppingBag,
  ShieldCheck,
} from 'lucide-react';
import CreateOrderModal from '@/components/admin/CreateOrderModal';

interface Order {
  _id: string;
  orderNumber?: string;
  studentName?: string;
  studentEmail?: string;
  student?: {
    _id: string;
    name: string;
    email: string;
    phoneNumber?: string;
  };
  courseTitle?: string;
  courseLevel?: string;
  courseId?: {
    _id: string;
    title: string;
    level?: string;
  };
  course?: {
    _id: string;
    title: string;
    level?: string;
  };
  courses?: Array<{
    _id: string;
    title: string;
    level?: string;
  }>;
  lessons?: Array<{
    _id: string;
    title: string;
    price?: number;
  }>;
  amount: number;
  currency: string;
  paymentGateway?: string;
  gateway?: string;
  status: string;
  createdAt: string;
  paymentRequired?: boolean;
  bankTransferDetails?: {
    proofOfPaymentUrl?: string;
    // paymentScreenshot?: string;
    paymentScreenShot?: string;
    senderAccountName?: string;
    senderBank?: string;
    accountHolder?: string;
    iban?: string;
    bicSwift?: string;
    bankName?: string;
    reference?: string;
    adminConfirmationStatus?: string;
    adminNotes?: string;
  };
}

export default function AdminOrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [gatewayFilter, setGatewayFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);

  // Manual Order Modal State
  const [showCreateOrderModal, setShowCreateOrderModal] = useState(false);

  const fetchOrders = async () => {
    setLoading(true);
    const params = new URLSearchParams();
    if (searchTerm.trim()) params.append('search', searchTerm.trim());
    if (gatewayFilter !== 'all') params.append('gateway', gatewayFilter);
    if (statusFilter !== 'all') params.append('status', statusFilter);
    params.append('limit', '100');

    const queryString = params.toString() ? `?${params.toString()}` : '';
    const res = await apiRequest(`/orders${queryString}`);
    if (res.success && res.orders) {
      setOrders(res.orders);
    }
    setLoading(false);
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      fetchOrders();
    }, 300);
    return () => clearTimeout(timer);
  }, [searchTerm, gatewayFilter, statusFilter]);

  const handleApproveBankTransfer = async (orderId: string, status: 'approved' | 'rejected' = 'approved') => {
    const res = await apiRequest(`/orders/${orderId}/bank-transfer`, {
      method: 'PATCH',
      body: JSON.stringify({ adminConfirmationStatus: status }),
    });

    if (res.success) {
      const newStatus = status === 'approved' ? 'succeeded' : 'failed';
      toast.success(`Bank transfer order ${status} successfully!`);
      setOrders((prev) =>
        prev.map((o) => (o._id === orderId ? { ...o, status: newStatus } : o))
      );
      if (selectedOrder && selectedOrder._id === orderId) {
        setSelectedOrder({ ...selectedOrder, status: newStatus });
      }
    } else {
      toast.error(res.error || 'Failed to update bank transfer status');
    }
  };


  const getOrderStudentName = (o: Order) => o.studentName || o.student?.name || 'Student';
  const getOrderStudentEmail = (o: Order) => o.studentEmail || o.student?.email || 'N/A';
  const getOrderCourseTitle = (o: Order) => {
    let title = o.courseTitle || o.courseId?.title || o.course?.title || o.courses?.[0]?.title || 'German Course';
    if (Array.isArray(o.lessons) && o.lessons.length > 0) {
      title += ` (${o.lessons.length} Lesson${o.lessons.length > 1 ? 's' : ''})`;
    }
    return title;
  };
  const getOrderCourseLevel = (o: Order) => o.courseLevel || o.courseId?.level || o.course?.level || o.courses?.[0]?.level || '';
  const getOrderGateway = (o: Order) => o.gateway || o.paymentGateway || 'stripe';
  const isOrderSuccess = (status: string) => status === 'succeeded' || status === 'completed';

  const totalRevenue = orders
    .filter((o) => isOrderSuccess(o.status))
    .reduce((acc, curr) => acc + (curr.amount || 0), 0);

  const completedCount = orders.filter((o) => isOrderSuccess(o.status)).length;
  const pendingBankTransfers = orders.filter(
    (o) => getOrderGateway(o) === 'bank_transfer' && o.status === 'pending'
  ).length;

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight flex items-center gap-3">
            <span>Orders & Payment Transactions</span>
          </h1>
        </div>

        <button
          onClick={() => setShowCreateOrderModal(true)}
          className="px-4 py-2 bg-[#FECE00] hover:bg-[#e5b800] text-black text-sm font-medium rounded-lg shadow-sm transition-colors flex items-center gap-2 cursor-pointer self-start md:self-auto"
        >
          <Plus className="w-4 h-4 text-black" />
          <span>Create Manual Order</span>
        </button>
      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Total Platform Revenue</p>
            <p className="text-2xl font-black text-gray-900 mt-1">€{loading ? '...' : totalRevenue.toFixed(2)}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-200 flex items-center justify-center">
            <Euro className="w-5 h-5" />
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Completed Purchases</p>
            <p className="text-2xl font-black text-emerald-600 mt-1">{loading ? '...' : completedCount}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center">
            <CheckCircle className="w-5 h-5" />
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Pending Bank Verification</p>
            <p className="text-2xl font-black text-amber-600 mt-1">{loading ? '...' : pendingBankTransfers}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-200 flex items-center justify-center">
            <Building2 className="w-5 h-5" />
          </div>
        </div>
      </div>

      {/* Filter and Search Bar */}
      <div className="bg-white rounded-2xl border border-gray-200 shadow-xs overflow-hidden">
        <div className="p-4 border-b border-gray-200 bg-gray-50/50 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="relative w-full md:w-80">
            <Search className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              placeholder="Search by student, course, or order ID..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white"
            />
          </div>

          <div className="flex flex-wrap items-center gap-3 w-full md:w-auto justify-end">
            <div className="flex items-center gap-1.5">
              <Filter className="w-3.5 h-3.5 text-gray-500" />
              <span className="text-xs font-bold text-gray-600">Gateway:</span>
              <select
                value={gatewayFilter}
                onChange={(e) => setGatewayFilter(e.target.value)}
                className="px-3 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white text-gray-800"
              >
                <option value="all">All Gateways</option>
                <option value="stripe">Stripe</option>
                <option value="paypal">PayPal</option>
                <option value="bank_transfer">Bank Transfer</option>
                <option value="admin_bypass">Admin Bypass</option>
              </select>
            </div>

            <div className="flex items-center gap-1.5">
              <span className="text-xs font-bold text-gray-600">Status:</span>
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="px-3 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white text-gray-800"
              >
                <option value="all">All Statuses</option>
                <option value="completed">Completed</option>
                <option value="pending">Pending</option>
                <option value="failed">Failed</option>
              </select>
            </div>
          </div>
        </div>

        {/* Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm text-gray-700">
            <thead className="bg-gray-50 text-xs uppercase font-bold text-gray-500 border-b border-gray-200">
              <tr>
                <th className="px-6 py-4">Student</th>
                <th className="px-6 py-4">Course Enrolled</th>
                <th className="px-6 py-4">Gateway</th>
                <th className="px-6 py-4">Amount</th>
                <th className="px-6 py-4">Status</th>
                <th className="px-6 py-4">Date</th>
                <th className="px-6 py-4 text-right">Details</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500 text-xs font-semibold">
                    Loading orders...
                  </td>
                </tr>
              ) : orders.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500 text-xs">
                    No orders match the selected filters.
                  </td>
                </tr>
              ) : (
                orders.map((order) => {
                  const studentName = getOrderStudentName(order);
                  const studentEmail = getOrderStudentEmail(order);
                  const courseTitle = getOrderCourseTitle(order);
                  const courseLevel = getOrderCourseLevel(order);
                  const gatewayKey = getOrderGateway(order);

                  return (
                    <tr key={order._id} className="hover:bg-gray-50/80 transition">
                      <td className="px-6 py-4">
                        <div>
                          <p className="font-bold text-gray-900">{studentName}</p>
                          <p className="text-[11px] text-gray-500 font-medium">{studentEmail}</p>
                        </div>
                      </td>

                      <td className="px-6 py-4 font-semibold text-gray-800">
                        <div className="flex items-center gap-1.5">
                          {/* {courseLevel && (
                            <span className="px-2 py-0.5 rounded bg-amber-100 text-amber-900 text-[10px] font-black shrink-0">
                              Level {courseLevel}
                            </span>
                          )} */}
                          <span className="truncate max-w-xs">{courseTitle}</span>
                        </div>
                      </td>

                      <td className="px-6 py-4">
                        {gatewayKey === 'admin_bypass' ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-extrabold bg-emerald-50 text-emerald-800 border border-emerald-300">
                            <ShieldCheck className="w-3.5 h-3.5 text-emerald-600" />
                            Admin Bypass
                          </span>
                        ) : gatewayKey === 'bank_transfer' ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-extrabold bg-amber-50 text-amber-800 border border-amber-300">
                            <Building2 className="w-3.5 h-3.5 text-amber-600" />
                            Bank Transfer
                          </span>
                        ) : gatewayKey === 'paypal' ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-extrabold bg-blue-50 text-blue-800 border border-blue-200">
                            <CreditCard className="w-3.5 h-3.5 text-blue-600" />
                            PayPal
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-extrabold bg-indigo-50 text-indigo-800 border border-indigo-200">
                            <CreditCard className="w-3.5 h-3.5 text-indigo-600" />
                            Stripe
                          </span>
                        )}
                      </td>

                      <td className="px-6 py-4 font-black text-gray-900">
                        €{order.amount || 0}
                      </td>

                      <td className="px-6 py-4">
                        <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold border capitalize ${order.status === 'completed'
                          ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                          : order.status === 'pending'
                            ? 'bg-amber-50 text-amber-700 border-amber-200'
                            : 'bg-red-50 text-red-700 border-red-200'
                          }`}>
                          {order.status === 'completed' && <CheckCircle className="w-3 h-3 text-emerald-600" />}
                          {order.status === 'pending' && <Clock className="w-3 h-3 text-amber-600" />}
                          {order.status === 'failed' && <AlertTriangle className="w-3 h-3 text-red-600" />}
                          <span>{order.status}</span>
                        </span>
                      </td>

                      <td className="px-6 py-4 text-xs text-gray-500 font-medium">
                        <div className="flex items-center gap-1">
                          <Calendar className="w-3.5 h-3.5 text-gray-400" />
                          <span>{order.createdAt ? new Date(order.createdAt).toLocaleDateString() : 'N/A'}</span>
                        </div>
                      </td>

                      <td className="px-6 py-4 text-right">
                        <button
                          onClick={() => setSelectedOrder(order)}
                          className="px-3 py-1.5 rounded-lg text-xs font-bold text-gray-700 hover:bg-gray-100 border border-gray-200 transition inline-flex items-center gap-1"
                        >
                          <Eye className="w-3.5 h-3.5" />
                          <span>View</span>
                        </button>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Create Manual Order Modal */}
      <CreateOrderModal
        isOpen={showCreateOrderModal}
        onClose={() => setShowCreateOrderModal(false)}
        onSuccess={fetchOrders}
      />

      {/* Order Detail Modal */}
      {selectedOrder && (
        <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 !m-0">
          <div className="bg-white max-w-lg w-full rounded-2xl shadow-2xl border border-gray-200 p-6 space-y-6">
            <div className="flex items-center justify-between border-b border-gray-200 pb-4">
              <h3 className="text-lg font-extrabold text-gray-900">Order Details</h3>
              <button
                onClick={() => setSelectedOrder(null)}
                className="p-1 rounded-lg text-gray-400 hover:text-gray-700 transition"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4 text-xs">
              <div className="p-4 rounded-xl bg-gray-50 border border-gray-200 space-y-2">
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Order ID</span>
                  <span className="font-bold text-gray-900">{selectedOrder._id}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Student Name</span>
                  <span className="font-bold text-gray-900">{getOrderStudentName(selectedOrder)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Student Email</span>
                  <span className="font-semibold text-gray-700">{getOrderStudentEmail(selectedOrder)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Course</span>
                  <span className="font-bold text-amber-900">{getOrderCourseTitle(selectedOrder)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Gateway</span>
                  <span className="font-bold text-gray-900 capitalize">
                    {getOrderGateway(selectedOrder).replace('_', ' ')}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Payment Bypass</span>
                  <span className="font-bold text-[#FECE00] bg-black px-2 py-0.5 rounded text-[10px]">
                    {selectedOrder.paymentRequired === false || getOrderGateway(selectedOrder) === 'admin_bypass' ? 'Yes (Bypassed)' : 'No'}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Amount</span>
                  <span className="font-black text-gray-900 text-sm">€{selectedOrder.amount}</span>
                </div>
              </div>

              {/* Bank Transfer verification if pending */}
              {getOrderGateway(selectedOrder) === 'bank_transfer' && (
                <div className="p-4 rounded-xl bg-amber-50 border border-amber-200 space-y-3">
                  <div className="flex items-center justify-between text-amber-900 font-bold">
                    <div className="flex items-center gap-2">
                      <FileCheck className="w-4 h-4 text-amber-700" />
                      <span>Bank Transfer Verification</span>
                    </div>
                    {selectedOrder.bankTransferDetails?.adminConfirmationStatus && (
                      <span className="text-[10px] uppercase font-black px-2 py-0.5 rounded bg-amber-200 text-amber-900">
                        {selectedOrder.bankTransferDetails.adminConfirmationStatus}
                      </span>
                    )}
                  </div>

                  {/* Payment Receipt / Screenshot display */}
                  {(() => {
                    const proofUrl = selectedOrder.bankTransferDetails?.proofOfPaymentUrl ||
                      // selectedOrder.bankTransferDetails?.paymentScreenshot ||
                      selectedOrder.bankTransferDetails?.paymentScreenShot;

                    if (!proofUrl) {
                      return (
                        <p className="text-[11px] text-amber-800 italic">
                          No payment receipt screenshot was uploaded for this bank transfer request.
                        </p>
                      );
                    }

                    return (
                      <div className="space-y-2 pt-1 border-t border-amber-200/80">
                        <p className="text-[11px] font-bold text-amber-900">Uploaded Payment Receipt / Screenshot:</p>
                        <div className="relative rounded-xl border border-amber-300 bg-white p-2 flex flex-col items-center gap-2">
                          {proofUrl.endsWith('.pdf') ? (
                            <div className="p-3 text-center">
                              <span className="text-xs font-bold text-gray-800 block">PDF Receipt Document</span>
                              <a
                                href={proofUrl}
                                target="_blank"
                                rel="noreferrer"
                                className="mt-1 text-xs font-bold text-amber-700 hover:underline inline-block"
                              >
                                Open PDF Document ↗
                              </a>
                            </div>
                          ) : (
                            <>
                              <img
                                src={proofUrl}
                                alt="Payment Proof Receipt"
                                className="max-h-48 w-auto rounded-lg object-contain border border-gray-200"
                              />
                              <a
                                href={proofUrl}
                                target="_blank"
                                rel="noreferrer"
                                className="text-[11px] font-bold text-amber-800 hover:underline flex items-center gap-1"
                              >
                                <span>View Full Size Screenshot ↗</span>
                              </a>
                            </>
                          )}
                        </div>
                      </div>
                    );
                  })()}

                  {selectedOrder.status === 'pending' && (
                    <div className="pt-2 border-t border-amber-200/80">
                      <p className="text-[11px] text-amber-800 mb-2">
                        Verify receipt above and approve or reject course access:
                      </p>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => handleApproveBankTransfer(selectedOrder._id, 'approved')}
                          className="flex-1 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-xs shadow-xs transition cursor-pointer"
                        >
                          Approve Payment & Unlock Course
                        </button>
                        <button
                          onClick={() => handleApproveBankTransfer(selectedOrder._id, 'rejected')}
                          className="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-extrabold text-xs shadow-xs transition cursor-pointer"
                        >
                          Reject
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              )}


            </div>

            <div>
              <button
                onClick={() => setSelectedOrder(null)}
                className="w-full py-2.5 rounded-xl bg-gray-900 hover:bg-black text-white font-extrabold text-xs transition cursor-pointer"
              >
                Close Order Window
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}