'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import * as XLSX from 'xlsx';
import { api, apiPaths } from '@/lib/api';
import { useAuthGuard } from '@/lib/useAuthGuard';
type DigitalCode = {
  id: number;
  product_name: string;
  code: string;
  serial?: string;
};

type OrderProduct = {
  product_id: number;
  product_name: string;
  unit_price: number;
  quantity: number;
  line_total: number;
  main_category_name?: string;
  sub_category_name?: string;
};

type OrderDetail = {
  id: number;
  order_number: string;
  status: string;
  total: number;
  commission_amount: number;
  payment_method: string;
  products: OrderProduct[];
  cards_count: number;
  codes: DigitalCode[];
  created_at: string;
};

const statusMap: Record<string, { label: string; color: string }> = {
  pending:    { label: 'معلق', color: 'bg-yellow-100 text-yellow-800' },
  processing: { label: 'قيد المعالجة', color: 'bg-blue-100 text-blue-800' },
  completed:  { label: 'مكتمل', color: 'bg-green-100 text-green-800' },
  cancelled:  { label: 'ملغى', color: 'bg-red-100 text-red-800' },
};

export default function OrderDetailPage() {
  const { checked, authenticated } = useAuthGuard();
  const params = useParams();
  const router = useRouter();
  const [order, setOrder] = useState<OrderDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [reportReason, setReportReason] = useState('');
  const [reportImage, setReportImage] = useState<File | null>(null);
  const [showReportForm, setShowReportForm] = useState(false);
  const [reportSubmitting, setReportSubmitting] = useState(false);
  const [reportSuccess, setReportSuccess] = useState(false);
  const [invoiceLoading, setInvoiceLoading] = useState(false);
  const [copiedCode, setCopiedCode] = useState<string | null>(null);

  useEffect(() => {
    if (!authenticated) return;
    api.get<OrderDetail>(apiPaths.orders.show(params.id as string)).then((res) => {
      if (res.key === 'success' && res.data) {
        setOrder(res.data as OrderDetail);
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [authenticated, params.id]);

  if (!checked) return null;

  const handleExportExcel = () => {
    if (!order) return;
    const dateTime = new Date(order.created_at).toLocaleString('ar-SA');
    const data = (order.codes || []).map((c) => ({
      'رقم الطلب': order.order_number,
      'اسم المنتج': c.product_name,
      'عدد الأكواد': order.codes.filter((x) => x.product_name === c.product_name).length,
      'الكود الرقمي': c.code,
      'الرقم التسلسلي': c.serial || '—',
      'تاريخ العملية': dateTime,
    }));
    const ws = XLSX.utils.json_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'الأكواد');
    XLSX.writeFile(wb, `أكواد_${order.order_number}.xlsx`);
  };

  const copyCode = async (code: string) => {
    try {
      await navigator.clipboard.writeText(code);
      setCopiedCode(code);
      setTimeout(() => setCopiedCode(null), 2000);
    } catch {}
  };

  const handleDownloadInvoice = async () => {
    if (!order) return;
    setInvoiceLoading(true);
    try {
      const { ok, blob } = await api.getBlob(apiPaths.orders.invoicePdf(order.id));
      if (!ok) {
        alert('تعذر تحميل الفاتورة');
        return;
      }
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `فاتورة-${order.order_number}.pdf`;
      a.click();
      URL.revokeObjectURL(url);
    } catch {
      alert('تعذر تحميل الفاتورة');
    } finally {
      setInvoiceLoading(false);
    }
  };

  const handleReport = async () => {
    if (!reportReason || !order) return;
    setReportSubmitting(true);
    try {
      const formData = new FormData();
      formData.append('reason', reportReason);
      if (reportImage) formData.append('image', reportImage);
      const res = await api.postForm(apiPaths.orders.report(order.id), formData);
      if (res.key === 'success') {
        setReportSuccess(true);
        setShowReportForm(false);
        setReportReason('');
        setReportImage(null);
      } else {
        alert(res.msg || 'تعذر إرسال الإبلاغ');
      }
    } catch {
      alert('تعذر الاتصال بالخادم');
    } finally {
      setReportSubmitting(false);
    }
  };

  if (loading) return (
    <div dir="rtl" className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
    </div>
  );

  if (!order) return (
    <div dir="rtl" className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="text-center"><p className="text-gray-500 mb-4">الطلب غير موجود</p>
        <Link href="/orders" className="text-blue-600 underline">العودة للطلبات</Link>
      </div>
    </div>
  );

  const status = statusMap[order.status] || { label: order.status, color: 'bg-gray-100 text-gray-800' };

  return (
    <div dir="rtl" className="flex flex-col flex-1 bg-gradient-to-br from-blue-50 via-white to-gray-50">
      <div className="bg-white border-b border-gray-100 px-6 py-3">
        <div className="max-w-4xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/orders" className="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200">
              <i className="ri-arrow-right-line text-xl text-gray-700"></i>
            </Link>
            <h1 className="text-xl font-bold text-gray-900">تفاصيل الطلب</h1>
          </div>
          <div className="flex gap-3 flex-wrap">
            <button
              type="button"
              onClick={handleDownloadInvoice}
              disabled={invoiceLoading}
              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-300 transition-colors text-sm font-semibold cursor-pointer"
            >
              <i className="ri-file-pdf-line text-lg"></i>
              {invoiceLoading ? 'جاري التحميل...' : 'تحميل الفاتورة PDF'}
            </button>
            <button
              type="button"
              onClick={handleExportExcel}
              disabled={!order.codes?.length}
              className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 disabled:bg-gray-300 transition-colors text-sm font-semibold cursor-pointer"
            >
              <i className="ri-file-excel-2-line text-lg"></i>
              تصدير Excel
            </button>
            <button
              type="button"
              onClick={() => setShowReportForm(true)}
              className="flex items-center gap-2 bg-red-50 text-red-600 border border-red-200 px-4 py-2 rounded-lg hover:bg-red-100 transition-colors text-sm font-semibold cursor-pointer"
            >
              <i className="ri-flag-line text-lg"></i>
              إبلاغ عن مشكلة
            </button>
          </div>
        </div>
      </div>

      {/* نافذة الإبلاغ */}
      {showReportForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl p-6 max-w-md w-full">
            <h3 className="text-xl font-bold text-gray-900 mb-4">الإبلاغ عن مشكلة</h3>
            <textarea
              value={reportReason}
              onChange={(e) => setReportReason(e.target.value)}
              placeholder="اشرح المشكلة بالتفصيل..."
              rows={4}
              className="w-full border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 resize-none"
            />
            <label className="block text-sm font-semibold text-gray-700 mb-2">إرفاق صورة (اختياري)</label>
            <input
              type="file"
              accept="image/*"
              onChange={(e) => setReportImage(e.target.files?.[0] ?? null)}
              className="w-full text-sm text-gray-600 mb-4 file:mr-2 file:py-2 file:px-3 file:rounded-lg file:border-0 file:bg-gray-100 file:font-semibold"
            />
            <div className="flex gap-3">
              <button onClick={handleReport} disabled={!reportReason || reportSubmitting}
                className="flex-1 bg-red-600 text-white py-2.5 rounded-lg hover:bg-red-700 disabled:bg-gray-300 font-semibold">
                {reportSubmitting ? 'جاري الإرسال...' : 'إرسال'}
              </button>
              <button onClick={() => setShowReportForm(false)} className="flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-lg hover:bg-gray-200 font-semibold">
                إلغاء
              </button>
            </div>
          </div>
        </div>
      )}

      {reportSuccess && (
        <div className="fixed top-20 left-1/2 -translate-x-1/2 bg-green-50 border border-green-200 text-green-800 px-6 py-3 rounded-lg shadow-lg z-50">
          <i className="ri-check-line mr-2"></i> تم إرسال الإبلاغ بنجاح
        </div>
      )}

      <main className="max-w-5xl mx-auto px-6 py-8">
        {/* رأس الطلب */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
          <div className="flex items-start justify-between flex-wrap gap-4">
            <div>
              <h2 className="text-2xl font-bold text-gray-900">{order.order_number}</h2>
              <p className="text-gray-500 mt-1">{new Date(order.created_at).toLocaleDateString('ar-SA', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
            </div>
            <span className={`px-4 py-2 rounded-full text-sm font-semibold ${status.color}`}>{status.label}</span>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
            {[
              { label: 'إجمالي المبلغ', value: `${order.total} ر.س`, color: 'text-blue-600' },
              { label: 'الضريبة/العمولة', value: `${order.commission_amount} ر.س`, color: 'text-gray-700' },
              { label: 'عدد الأكواد', value: order.cards_count, color: 'text-green-600' },
              { label: 'طريقة الدفع', value: order.payment_method === 'wallet' ? 'محفظة' : order.payment_method, color: 'text-gray-700' },
            ].map((item) => (
              <div key={item.label} className="bg-gray-50 rounded-lg p-4">
                <p className="text-sm text-gray-500 mb-1">{item.label}</p>
                <p className={`text-xl font-bold ${item.color}`}>{item.value}</p>
              </div>
            ))}
          </div>
        </div>

        {/* المنتجات */}
        {order.products?.length > 0 && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h3 className="text-lg font-bold text-gray-900 mb-4">المنتجات المطلوبة</h3>
            <div className="space-y-3">
              {order.products.map((p, i) => (
                <div key={i} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                  <div>
                    <p className="font-semibold text-gray-900">{p.product_name}</p>
                    {(p.main_category_name || p.sub_category_name) && (
                      <p className="text-xs text-gray-500 mt-1">
                        {p.main_category_name ? (
                          <span>القسم الرئيسي: {p.main_category_name}</span>
                        ) : null}
                        {p.main_category_name && p.sub_category_name ? ' · ' : null}
                        {p.sub_category_name ? (
                          <span>القسم الفرعي: {p.sub_category_name}</span>
                        ) : null}
                      </p>
                    )}
                    <p className="text-sm text-gray-500">سعر الوحدة: {p.unit_price} ر.س × {p.quantity}</p>
                  </div>
                  <p className="font-bold text-gray-900">{p.line_total} ر.س</p>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* الأكواد الرقمية */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-bold text-gray-900">الأكواد الرقمية ({order.codes?.length || 0})</h3>
          </div>
          {!order.codes?.length ? (
            <div className="text-center py-8 text-gray-500">
              <i className="ri-key-2-line text-4xl text-gray-300 mb-3 block"></i>
              <p>لا توجد أكواد رقمية لهذا الطلب</p>
            </div>
          ) : (
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {order.codes.map((c) => (
                <div key={c.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
                  <div>
                    <p className="text-xs text-gray-500 mb-1">{c.product_name}</p>
                    <code className="font-mono text-sm text-gray-800">{c.code}</code>
                    {c.serial && <p className="text-xs text-gray-400 mt-0.5">S/N: {c.serial}</p>}
                  </div>
                  <button
                    onClick={() => copyCode(c.code)}
                    className={`flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-semibold transition-colors cursor-pointer ${
                      copiedCode === c.code ? 'bg-green-100 text-green-700' : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
                    }`}
                  >
                    <i className={copiedCode === c.code ? 'ri-check-line' : 'ri-file-copy-line'}></i>
                    {copiedCode === c.code ? 'تم النسخ' : 'نسخ'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}