'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { useState } from 'react';
import { 
  Eye, 
  ChevronLeft, 
  ChevronRight, 
  Trash2, 
  CheckSquare, 
  Square, 
  Package,
  ShoppingBag
} from 'lucide-react';
import OrderStatusBadge from './OrderStatusBadge';
import toast from 'react-hot-toast';

interface Order {
  id: string;
  order_number: string;
  created_at: string;
  total_amount: number;
  status: string;
  payment_status: string;
  order_type: 'individual' | 'package' | 'package_individual';
}

interface OrdersListProps {
  orders: Order[];
  total: number;
  currentPage: number;
  totalPages: number;
  currentStatus: string;
}

interface DeleteResponse {
  success: boolean;
  message: string;
  deletedCount?: number;
  details?: {
    individual: number;
    package: number;
    package_individual: number;
  };
}

export default function OrdersList({ 
  orders, 
  total, 
  currentPage, 
  totalPages,
  currentStatus 
}: OrdersListProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
  const [isDeleting, setIsDeleting] = useState<boolean>(false);

  const statuses: { value: string; label: string }[] = [
    { value: 'all', label: 'All Orders' },
    { value: 'pending', label: 'Pending' },
    { value: 'confirmed', label: 'Confirmed' },
    { value: 'pending_review', label: 'Pending Review' },
    { value: 'completed', label: 'Completed' },
    { value: 'cancelled', label: 'Cancelled' },
  ];

  // Check if order can be deleted (pending status and pending payment)
  const canDeleteOrder = (order: Order): boolean => {
    return order.status === 'pending' && order.payment_status === 'pending';
  };

  // Get order type display text and styles
  const getOrderTypeDisplay = (type: string) => {
    switch(type) {
      case 'package':
        return {
          label: 'Package',
          bgColor: 'bg-purple-100',
          textColor: 'text-purple-700',
          icon: Package
        };
      case 'package_individual':
        return {
          label: 'Package + Individual',
          bgColor: 'bg-indigo-100',
          textColor: 'text-indigo-700',
          icon: ShoppingBag
        };
      default:
        return {
          label: 'Individual',
          bgColor: 'bg-blue-100',
          textColor: 'text-blue-700',
          icon: null
        };
    }
  };

  // Handle single order selection
  const toggleOrderSelection = (orderId: string): void => {
    const newSelected = new Set(selectedOrders);
    if (newSelected.has(orderId)) {
      newSelected.delete(orderId);
    } else {
      newSelected.add(orderId);
    }
    setSelectedOrders(newSelected);
  };

  // Get deletable orders
  const deletableOrders: Order[] = orders.filter(canDeleteOrder);

  // Handle select all
  const toggleSelectAll = (): void => {
    if (selectedOrders.size === deletableOrders.length) {
      setSelectedOrders(new Set());
    } else {
      const allDeletableIds = deletableOrders.map(order => order.id);
      setSelectedOrders(new Set(allDeletableIds));
    }
  };

  // Delete single order
  const handleDeleteSingle = async (orderId: string): Promise<void> => {
    const order = orders.find(o => o.id === orderId);
    let orderTypeText = 'order';
    
    if (order?.order_type === 'package') {
      orderTypeText = 'package order';
    } else if (order?.order_type === 'package_individual') {
      orderTypeText = 'package + individual order';
    } else {
      orderTypeText = 'individual order';
    }
    
    if (!confirm(`Are you sure you want to delete this ${orderTypeText}? This will remove all associated items and cannot be undone.`)) {
      return;
    }

    setIsDeleting(true);
    try {
      const response = await fetch('/api/frontend/dashboard/orders/delete', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ orderIds: [orderId] }),
      });

      const data: DeleteResponse = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Failed to delete order');
      }

      toast.success(`${orderTypeText.charAt(0).toUpperCase() + orderTypeText.slice(1)} deleted successfully`);
      router.refresh();
    } catch (error) {
      console.error('Delete error:', error);
      toast.error(error instanceof Error ? error.message : 'Failed to delete order');
    } finally {
      setIsDeleting(false);
    }
  };

  // Delete multiple orders
  const handleDeleteBulk = async (): Promise<void> => {
    if (selectedOrders.size === 0) {
      toast.error('Please select orders to delete');
      return;
    }

    const selectedOrdersList = orders.filter(o => selectedOrders.has(o.id));
    const individualCount = selectedOrdersList.filter(o => o.order_type === 'individual').length;
    const packageCount = selectedOrdersList.filter(o => o.order_type === 'package').length;
    const packageIndividualCount = selectedOrdersList.filter(o => o.order_type === 'package_individual').length;
    
    let message = `Are you sure you want to delete ${selectedOrders.size} order(s)?`;
    
    const types = [];
    if (individualCount > 0) types.push(`${individualCount} individual order(s)`);
    if (packageCount > 0) types.push(`${packageCount} package order(s)`);
    if (packageIndividualCount > 0) types.push(`${packageIndividualCount} package+individual order(s)`);
    
    if (types.length > 0) {
      message = `Are you sure you want to delete ${types.join(', ')}? This action cannot be undone.`;
    }

    if (!confirm(message)) {
      return;
    }

    setIsDeleting(true);
    try {
      const response = await fetch('/api/frontend/dashboard/orders/delete', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ orderIds: Array.from(selectedOrders) }),
      });

      const data: DeleteResponse = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Failed to delete orders');
      }

      toast.success(`${data.deletedCount} order(s) deleted successfully`);
      setSelectedOrders(new Set());
      router.refresh();
    } catch (error) {
      console.error('Bulk delete error:', error);
      toast.error(error instanceof Error ? error.message : 'Failed to delete orders');
    } finally {
      setIsDeleting(false);
    }
  };

  const handleStatusChange = (status: string): void => {
    const params = new URLSearchParams(searchParams);
    if (status === 'all') {
      params.delete('status');
    } else {
      params.set('status', status);
    }
    params.set('page', '1');
    router.push(`/dashboard/orders?${params.toString()}`);
  };
  
  const handlePageChange = (page: number): void => {
    const params = new URLSearchParams(searchParams);
    params.set('page', page.toString());
    router.push(`/dashboard/orders?${params.toString()}`);
  };

  return (
    <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden">
      {/* Filters and Bulk Actions */}
      <div className="p-6 border-b border-gray-200">
        <div className="flex flex-wrap items-center justify-between gap-4">
          {/* Status Filters */}
          <div className="flex flex-wrap gap-2">
            {statuses.map((status) => (
              <button
                key={status.value}
                onClick={() => handleStatusChange(status.value)}
                className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
                  currentStatus === status.value
                    ? 'bg-[#0066FF] text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                {status.label}
              </button>
            ))}
          </div>

          {/* Bulk Actions */}
          {deletableOrders.length > 0 && (
            <div className="flex items-center gap-3">
              <button
                onClick={toggleSelectAll}
                className="flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100"
              >
                {selectedOrders.size === deletableOrders.length ? (
                  <CheckSquare className="h-4 w-4" />
                ) : (
                  <Square className="h-4 w-4" />
                )}
                {selectedOrders.size === deletableOrders.length ? 'Deselect All' : 'Select All'}
              </button>
              
              {selectedOrders.size > 0 && (
                <button
                  onClick={handleDeleteBulk}
                  disabled={isDeleting}
                  className="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
                >
                  <Trash2 className="h-4 w-4" />
                  {isDeleting ? 'Deleting...' : `Delete (${selectedOrders.size})`}
                </button>
              )}
            </div>
          )}
        </div>
      </div>
      
      {/* Orders Table */}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              {deletableOrders.length > 0 && (
                <th className="w-10 px-6 py-3">
                  <button onClick={toggleSelectAll} className="text-gray-500 hover:text-gray-700">
                    {selectedOrders.size === deletableOrders.length ? (
                      <CheckSquare className="h-4 w-4" />
                    ) : (
                      <Square className="h-4 w-4" />
                    )}
                  </button>
                </th>
              )}
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Order #
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Date
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Type
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Amount
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Payment
              </th>
              <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
                Action
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {orders.length === 0 ? (
              <tr>
                <td colSpan={deletableOrders.length > 0 ? 9 : 8} className="text-center py-12">
                  <p className="text-gray-500">No orders found</p>
                  <Link
                    href="/websites"
                    className="text-[#0066FF] text-sm mt-2 inline-block hover:underline"
                  >
                    Browse websites to place your first order →
                  </Link>
                 </td>
               </tr>
            ) : (
              orders.map((order) => {
                const isDeletable = canDeleteOrder(order);
                const isSelected = selectedOrders.has(order.id);
                const typeDisplay = getOrderTypeDisplay(order.order_type);
                const TypeIcon = typeDisplay.icon;
                
                return (
                  <tr key={order.id} className="hover:bg-gray-50 transition-colors">
                    {deletableOrders.length > 0 && (
                      <td className="px-6 py-4">
                        {isDeletable && (
                          <button
                            onClick={() => toggleOrderSelection(order.id)}
                            className="text-gray-500 hover:text-gray-700"
                          >
                            {isSelected ? (
                              <CheckSquare className="h-4 w-4 text-[#0066FF]" />
                            ) : (
                              <Square className="h-4 w-4" />
                            )}
                          </button>
                        )}
                      </td>
                    )}
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-2">
                        {TypeIcon && <TypeIcon className="h-4 w-4" style={{ color: typeDisplay.textColor.replace('text-', '') }} />}
                        <span className="text-sm font-medium text-gray-900">
                          {order.order_number}
                        </span>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <span className="text-sm text-gray-600">
                        {new Date(order.created_at).toLocaleDateString()}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${typeDisplay.bgColor} ${typeDisplay.textColor}`}>
                        {TypeIcon && <TypeIcon className="h-3 w-3" />}
                        {typeDisplay.label}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <span className="text-sm font-medium text-gray-900">
                        ${order.total_amount.toLocaleString()}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <OrderStatusBadge status={order.status} />
                    </td>
                    <td className="px-6 py-4">
                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                        order.payment_status === 'paid'
                          ? 'bg-green-100 text-green-700'
                          : order.payment_status === 'failed'
                          ? 'bg-red-100 text-red-700'
                          : 'bg-yellow-100 text-yellow-700'
                      }`}>
                        {order.payment_status === 'paid' ? 'Paid' : 
                         order.payment_status === 'failed' ? 'Failed' : 'Pending'}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-2">
                        {/* View Details Button */}
                        <Link
                          href={`/dashboard/orders/${order.id}`}
                          className="p-2 text-gray-400 hover:text-[#0066FF] transition-colors"
                          title="View Order Details"
                        >
                          <Eye className="h-4 w-4" />
                        </Link>
                        
                        {/* Delete Button (only for deletable orders) */}
                        {isDeletable && (
                          <button
                            onClick={() => handleDeleteSingle(order.id)}
                            disabled={isDeleting}
                            className="p-2 text-gray-400 hover:text-red-600 transition-colors"
                            title="Delete Order"
                          >
                            <Trash2 className="h-4 w-4" />
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>
      
      {/* Pagination */}
      {totalPages > 1 && (
        <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
          <p className="text-sm text-gray-600">
            Showing {((currentPage - 1) * 10) + 1} to {Math.min(currentPage * 10, total)} of {total} orders
          </p>
          <div className="flex items-center space-x-2">
            <button
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>
            <span className="text-sm text-gray-600">
              Page {currentPage} of {totalPages}
            </span>
            <button
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <ChevronRight className="h-5 w-5" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}