'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { api, apiPaths } from '@/lib/api';
import { useAuthGuard } from '@/lib/useAuthGuard';
import OrdersStats from './OrdersStats';
import { useI18n } from '@/lib/i18n/context';

type OrderProduct = string | { product_id?: number; product_name?: string; unit_price?: number; quantity?: number; line_total?: number };
type Order = {
  id: number;
  order_number: string;
  date?: string;
  time?: string;
  products?: OrderProduct[];
  cards_count?: number;
  total: number;
  status: string;
  payment_method?: string;
  created_at?: string;
};

type StatusFilterKey = 'all' | 'completed' | 'processing' | 'cancelled';

export default function OrdersPage() {
  const { checked, authenticated } = useAuthGuard();
  const { t, isRtl, locale } = useI18n();
  const numberLocale = locale === 'ar' ? 'ar-SA' : 'en-US';
  const [allOrders, setAllOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilterKey>('all');

  useEffect(() => {
    if (!authenticated) return;
    api
      .get<Order[]>(apiPaths.orders.list)
      .then((res) => {
        if (res.key === 'success' && res.data) setAllOrders(res.data as Order[]);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [authenticated]);

  if (!checked) return null;

  const statusLabel = (status: string): string => {
    switch (status) {
      case 'completed':
        return t('orderStatus.completed');
      case 'processing':
        return t('orderStatus.processing');
      case 'cancelled':
        return t('orderStatus.cancelled');
      case 'pending':
        return t('orderStatus.pending');
      default:
        return status;
    }
  };

  const matchesStatusFilter = (order: Order, key: StatusFilterKey): boolean => {
    if (key === 'all') return true;
    if (key === 'completed') return order.status === 'completed';
    if (key === 'cancelled') return order.status === 'cancelled';
    if (key === 'processing') return order.status === 'processing' || order.status === 'pending';
    return true;
  };

  const filteredOrders = allOrders.filter((order) => {
    const matchesSearch =
      order.order_number.includes(searchQuery) ||
      (order.products || []).some((p) =>
        (typeof p === 'string' ? p : (p as { product_name?: string }).product_name ?? '').includes(searchQuery)
      );
    return matchesSearch && matchesStatusFilter(order, statusFilter);
  });

  const totalOrders = allOrders.length;
  const completedOrders = allOrders.filter((o) => o.status === 'completed').length;
  const pendingOrders = allOrders.filter((o) => o.status === 'processing' || o.status === 'pending').length;
  const totalRevenue = allOrders.filter((o) => o.status === 'completed').reduce((sum, o) => sum + o.total, 0);

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
        return 'bg-green-100 text-green-700';
      case 'processing':
      case 'pending':
        return 'bg-yellow-100 text-yellow-700';
      case 'cancelled':
        return 'bg-red-100 text-red-700';
      default:
        return 'bg-gray-100 text-gray-700';
    }
  };

  const filterButtons: { key: StatusFilterKey; label: string }[] = [
    { key: 'all', label: t('ordersPage.filterAll') },
    { key: 'completed', label: t('ordersPage.filterCompleted') },
    { key: 'processing', label: t('ordersPage.filterProcessing') },
    { key: 'cancelled', label: t('ordersPage.filterCancelled') },
  ];

  const backIcon = isRtl ? 'ri-arrow-right-line' : 'ri-arrow-left-line';
  const searchIconClass = isRtl ? 'right-3' : 'left-3';
  const searchInputPad = isRtl ? 'pr-10 pl-4' : 'pl-10 pr-4';

  return (
    <div
      dir={isRtl ? 'rtl' : 'ltr'}
      className="flex flex-col flex-1 bg-gradient-to-br from-blue-50 via-white to-gray-50"
    >
      <main className="max-w-7xl mx-auto px-6 py-10 flex-1 w-full">
        <div className="flex items-center gap-4 mb-8">
          <Link
            href="/"
            className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
          >
            <i className={`${backIcon} text-xl text-gray-700`}></i>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">{t('ordersPage.title')}</h1>
            <p className="text-gray-500 mt-1">{t('ordersPage.subtitle')}</p>
          </div>
        </div>

        <OrdersStats
          totalOrders={totalOrders}
          completedOrders={completedOrders}
          pendingOrders={pendingOrders}
          totalRevenue={totalRevenue}
        />

        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 mb-6">
          <div className="flex flex-wrap items-center gap-4">
            <div className="flex-1 min-w-[250px] relative">
              <i className={`ri-search-line absolute ${searchIconClass} top-1/2 -translate-y-1/2 text-gray-400`}></i>
              <input
                type="text"
                placeholder={t('ordersPage.searchPlaceholder')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className={`w-full ${searchInputPad} py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm`}
              />
            </div>
            <div className="flex gap-2 flex-wrap">
              {filterButtons.map(({ key, label }) => (
                <button
                  key={key}
                  type="button"
                  onClick={() => setStatusFilter(key)}
                  className={`px-4 py-2 rounded-full text-sm font-semibold transition-colors cursor-pointer whitespace-nowrap ${
                    statusFilter === key ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>
        </div>

        {loading ? (
          <div className="flex justify-center py-16">
            <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
          </div>
        ) : filteredOrders.length === 0 ? (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-16 text-center">
            <div className="w-20 h-20 flex items-center justify-center bg-gray-100 rounded-full mx-auto mb-4">
              <i className="ri-search-line text-3xl text-gray-400"></i>
            </div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">{t('ordersPage.noOrders')}</h3>
            <p className="text-gray-500">{t('ordersPage.noOrdersHint')}</p>
          </div>
        ) : (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50 border-b border-gray-100">
                  <tr>
                    <th className="text-start px-6 py-4 text-sm font-semibold text-gray-700">{t('ordersPage.colOrderNumber')}</th>
                    <th className="text-start px-6 py-4 text-sm font-semibold text-gray-700">{t('ordersPage.colDate')}</th>
                    <th className="text-start px-6 py-4 text-sm font-semibold text-gray-700">{t('ordersPage.colProducts')}</th>
                    <th className="text-start px-6 py-4 text-sm font-semibold text-gray-700">{t('ordersPage.colTotal')}</th>
                    <th className="text-start px-6 py-4 text-sm font-semibold text-gray-700">{t('ordersPage.colStatus')}</th>
                    <th className="text-start px-6 py-4 text-sm font-semibold text-gray-700">{t('ordersPage.colActions')}</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {filteredOrders.map((order) => (
                    <tr key={order.id} className="hover:bg-gray-50 transition-colors">
                      <td className="px-6 py-4">
                        <span className="text-blue-600 font-semibold text-sm">{order.order_number}</span>
                      </td>
                      <td className="px-6 py-4 text-sm text-gray-700">
                        {order.created_at
                          ? new Date(order.created_at).toLocaleDateString(numberLocale)
                          : t('common.dash')}
                      </td>
                      <td className="px-6 py-4">
                        <div className="flex flex-col gap-1">
                          {(order.products || []).slice(0, 2).map((p, i) => (
                            <span key={i} className="text-xs text-gray-600">
                              {typeof p === 'string' ? p : (p as { product_name?: string }).product_name ?? t('common.dash')}
                            </span>
                          ))}
                          {(order.products || []).length > 2 && (
                            <span className="text-xs text-blue-600">
                              {t('ordersPage.moreProducts', { count: String((order.products || []).length - 2) })}
                            </span>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <span className="font-bold text-gray-900 text-sm">
                          {order.total.toLocaleString(numberLocale)} {t('common.sar')}
                        </span>
                      </td>
                      <td className="px-6 py-4">
                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${getStatusColor(order.status)}`}>
                          {statusLabel(order.status)}
                        </span>
                      </td>
                      <td className="px-6 py-4">
                        <Link
                          href={`/orders/${order.id}`}
                          className="text-blue-600 hover:text-blue-700 text-sm font-semibold cursor-pointer whitespace-nowrap"
                        >
                          {t('ordersPage.viewDetails')}
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}