'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { api, apiPaths } from '@/lib/api';

const ticketTypes = [
  { value: 'technical', label: 'مشكلة تقنية' },
  { value: 'financial', label: 'مشكلة مالية' },
  { value: 'inquiry', label: 'استفسار' },
  { value: 'suggestion', label: 'اقتراح' },
  { value: 'other', label: 'أخرى' },
];

type Order = { id: number; order_number: string };

export default function CreateTicketPage() {
  const router = useRouter();
  const [title, setTitle] = useState('');
  const [ticketType, setTicketType] = useState('');
  const [orderNumber, setOrderNumber] = useState('');
  const [description, setDescription] = useState('');
  const [availableOrders, setAvailableOrders] = useState<Order[]>([]);
  const [showTypeDropdown, setShowTypeDropdown] = useState(false);
  const [showOrderDropdown, setShowOrderDropdown] = useState(false);
  const [attachment, setAttachment] = useState<File | null>(null);
  const [loading, setSending] = useState(false);
  const [error, setError] = useState('');

  // Load user's orders for the dropdown
  useEffect(() => {
    api.get<Order[]>(apiPaths.orders.list).then((res) => {
      if (res.key === 'success' && res.data) setAvailableOrders(res.data as Order[]);
    });
  }, []);

  const handleSubmit = async () => {
    if (!title.trim()) { setError('الرجاء إدخال عنوان التذكرة'); return; }
    if (!ticketType) { setError('الرجاء اختيار نوع التذكرة'); return; }
    if (!description.trim()) { setError('الرجاء إدخال وصف تفصيلي'); return; }

    setError('');
    setSending(true);

    const fd = new FormData();
    fd.append('title', title.trim());
    fd.append('description', description.trim());
    fd.append('type', ticketType);
    if (orderNumber) fd.append('order_number', orderNumber);
    if (attachment) fd.append('attachment', attachment);

    const res = await api.postForm<{ id: number; ticket_number: string }>(apiPaths.supportTickets.create, fd);

    setSending(false);

    if (res.key === 'success' && res.data && typeof (res.data as { id?: number }).id === 'number') {
      const created = res.data as { id: number };
      router.push(`/support-tickets/${created.id}`);
    } else {
      setError(res.msg || 'حدث خطأ، حاول مرة أخرى');
    }
  };

  const selectedTypeLabel = ticketTypes.find((t) => t.value === ticketType)?.label;

  return (
    <div dir="rtl" className="flex flex-col flex-1 bg-[#F6F6F8]">
      <main className="max-w-4xl mx-auto px-6 py-12 flex-1 w-full">
        <div className="flex items-center gap-4 mb-8">
          <Link href="/support-tickets" 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="ri-arrow-right-line text-xl text-gray-700"></i>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">إضافة تذكرة دعم جديدة</h1>
            <p className="text-gray-600">املأ النموذج أدناه لإنشاء تذكرة دعم</p>
          </div>
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
          <div className="space-y-6">
            {/* Title */}
            <div>
              <label className="block text-sm font-bold text-gray-900 mb-2">
                عنوان التذكرة <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="أدخل عنوان التذكرة"
                className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#19396A] text-gray-900"
              />
            </div>

            {/* Ticket Type */}
            <div className="relative">
              <label className="block text-sm font-bold text-gray-900 mb-2">
                نوع التذكرة <span className="text-red-500">*</span>
              </label>
              <button
                onClick={() => { setShowTypeDropdown(!showTypeDropdown); setShowOrderDropdown(false); }}
                className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#19396A] text-gray-900 flex items-center justify-between cursor-pointer bg-white"
              >
                <span className={selectedTypeLabel ? 'text-gray-900' : 'text-gray-400'}>
                  {selectedTypeLabel || 'اختر نوع التذكرة'}
                </span>
                <i className={`ri-arrow-down-s-line text-xl transition-transform ${showTypeDropdown ? 'rotate-180' : ''}`}></i>
              </button>
              {showTypeDropdown && (
                <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg z-10 overflow-hidden">
                  {ticketTypes.map((type) => (
                    <button
                      key={type.value}
                      onClick={() => { setTicketType(type.value); setShowTypeDropdown(false); }}
                      className="w-full px-4 py-3 text-right hover:bg-gray-50 transition-colors cursor-pointer text-gray-900"
                    >
                      {type.label}
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Order Number */}
            <div className="relative">
              <label className="block text-sm font-bold text-gray-900 mb-2">
                رقم الطلب المرتبط <span className="text-gray-400 font-normal">(اختياري)</span>
              </label>
              <button
                onClick={() => { setShowOrderDropdown(!showOrderDropdown); setShowTypeDropdown(false); }}
                className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#19396A] text-gray-900 flex items-center justify-between cursor-pointer bg-white"
              >
                <span className={orderNumber ? 'text-gray-900' : 'text-gray-400'}>
                  {orderNumber || 'اختر رقم الطلب (اختياري)'}
                </span>
                <i className={`ri-arrow-down-s-line text-xl transition-transform ${showOrderDropdown ? 'rotate-180' : ''}`}></i>
              </button>
              {showOrderDropdown && (
                <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg z-10 overflow-hidden">
                  <button
                    onClick={() => { setOrderNumber(''); setShowOrderDropdown(false); }}
                    className="w-full px-4 py-3 text-right hover:bg-gray-50 transition-colors cursor-pointer text-gray-400"
                  >
                    بدون طلب محدد
                  </button>
                  {availableOrders.map((order) => (
                    <button
                      key={order.id}
                      onClick={() => { setOrderNumber(order.order_number); setShowOrderDropdown(false); }}
                      className="w-full px-4 py-3 text-right hover:bg-gray-50 transition-colors cursor-pointer text-gray-900"
                    >
                      {order.order_number}
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Description */}
            <div>
              <label className="block text-sm font-bold text-gray-900 mb-2">
                وصف تفصيلي للمشكلة أو الطلب <span className="text-red-500">*</span>
              </label>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="اكتب وصفاً تفصيلياً للمشكلة أو الطلب..."
                className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#19396A] resize-none text-gray-900"
                rows={6}
                maxLength={1000}
              ></textarea>
              <p className="text-xs text-gray-500 mt-1">{description.length}/1000 حرف</p>
            </div>

            <div>
              <label className="block text-sm font-bold text-gray-900 mb-2">
                إرفاق ملف <span className="text-gray-400 font-normal">(اختياري)</span>
              </label>
              <label className="flex items-center gap-3 px-4 py-3 border border-gray-200 rounded-xl cursor-pointer hover:bg-gray-50">
                <input
                  type="file"
                  className="hidden"
                  accept="image/*,.pdf,.zip,.rar"
                  onChange={(e) => setAttachment(e.target.files?.[0] ?? null)}
                />
                <i className="ri-attachment-2 text-xl text-gray-600" />
                <span className="text-gray-700 text-sm truncate">
                  {attachment ? attachment.name : 'اختر ملفاً (صورة أو PDF، حتى 5 ميجا)'}
                </span>
              </label>
            </div>

            {error && (
              <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
                <i className="ri-error-warning-line text-lg"></i>
                <span>{error}</span>
              </div>
            )}

            <div className="flex items-center gap-4 pt-6">
              <button
                onClick={handleSubmit}
                disabled={loading}
                className="flex-1 bg-[#19396A] text-white py-4 rounded-xl hover:bg-[#164278] transition-colors cursor-pointer whitespace-nowrap font-bold text-lg disabled:opacity-70"
              >
                {loading ? 'جاري الإرسال...' : 'إرسال التذكرة'}
              </button>
              <Link
                href="/support-tickets"
                className="flex-1 bg-gray-100 text-gray-700 py-4 rounded-xl hover:bg-gray-200 transition-colors cursor-pointer whitespace-nowrap font-bold text-lg text-center"
              >
                إلغاء
              </Link>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}