'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { api, apiPaths } from '@/lib/api';
import { getUser } from '@/lib/auth';
import { useAuthGuard } from '@/lib/useAuthGuard';
import { useI18n } from '@/lib/i18n/context';
type ThreadItem = {
  author: string;
  text: string;
  attachment_url: string | null;
  created_at: string | null;
};

type TicketDetail = {
  id: number;
  ticket_number: string;
  title: string;
  description: string;
  type: string;
  type_label: string;
  order_number: string | null;
  status: string;
  admin_reply: string | null;
  initial_attachment_url: string | null;
  created_at: string | null;
  thread: ThreadItem[];
};

function formatThreadWhen(iso: string | null, locale: string): string {
  if (!iso) return '—';
  try {
    const d = new Date(iso);
    const loc = locale === 'ar' ? 'ar-SA' : 'en-US';
    const datePart = d.toLocaleDateString(loc, { day: 'numeric', month: 'long', year: 'numeric' });
    const timePart = d.toLocaleTimeString(loc, { hour: '2-digit', minute: '2-digit' });
    return `${datePart} - ${timePart}`;
  } catch {
    return '—';
  }
}

function formatSummaryDate(iso: string | null, locale: string): string {
  if (!iso) return '—';
  try {
    const d = new Date(iso);
    return d.toLocaleDateString(locale === 'ar' ? 'ar-SA' : 'en-US');
  } catch {
    return '—';
  }
}

function nameInitial(name: string): string {
  const t = name.trim();
  if (!t) return '?';
  return t.charAt(0);
}

export default function TicketDetailPage() {
  const params = useParams();
  const idParam = params?.id;
  const ticketId = typeof idParam === 'string' ? idParam : Array.isArray(idParam) ? idParam[0] : '';
  const { t, isRtl, locale } = useI18n();

  const { checked, authenticated } = useAuthGuard('/login', { requireApproval: false });
  const [ticket, setTicket] = useState<TicketDetail | null>(null);
  const [loadError, setLoadError] = useState('');
  const [loading, setLoading] = useState(true);

  const [newMessage, setNewMessage] = useState('');
  const [attachFile, setAttachFile] = useState<File | null>(null);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState('');

  const userName = getUser()?.name ?? '';

  const statusLabel = (status: string) => {
    switch (status) {
      case 'pending':
        return t('supportTicketDetail.statusPending');
      case 'resolved':
        return t('supportTicketDetail.statusResolved');
      case 'closed':
        return t('supportTicketDetail.statusClosed');
      default:
        return status;
    }
  };

  const statusBadgeClass = (status: string) => {
    switch (status) {
      case 'pending':
        return 'bg-amber-100 text-amber-950 border border-amber-200/80';
      case 'resolved':
        return 'bg-[#1e3a5f]/10 text-[#1e3a5f] border border-[#1e3a5f]/15';
      case 'closed':
        return 'bg-gray-100 text-gray-700 border border-gray-200';
      default:
        return 'bg-gray-100 text-gray-700 border border-gray-200';
    }
  };

  const loadTicket = useCallback(async () => {
    if (!ticketId) return;
    setLoading(true);
    setLoadError('');
    const res = await api.get<TicketDetail>(apiPaths.supportTickets.show(ticketId));
    setLoading(false);
    if (res.key === 'success' && res.data) {
      setTicket(res.data as TicketDetail);
    } else {
      setLoadError(res.msg || t('supportTicketDetail.loadError'));
    }
  }, [ticketId, t]);

  useEffect(() => {
    if (!authenticated || !ticketId) return;
    loadTicket();
  }, [authenticated, ticketId, loadTicket]);

  const handleSendMessage = async () => {
    if (!newMessage.trim() || !ticketId) return;
    setSendError('');
    setSending(true);
    const fd = new FormData();
    fd.append('comment', newMessage.trim());
    if (attachFile) fd.append('attachment', attachFile);

    const res = await api.postForm<{ id: number }>(apiPaths.supportTickets.addComment(ticketId), fd);
    setSending(false);

    if (res.key === 'success') {
      setNewMessage('');
      setAttachFile(null);
      await loadTicket();
    } else {
      setSendError(res.msg || t('supportTicketDetail.sendError'));
    }
  };

  const handleCancelReply = () => {
    setNewMessage('');
    setAttachFile(null);
    setSendError('');
  };

  const adminDisplayName = t('supportTicketDetail.adminName');

  if (!checked) return null;
  if (!authenticated) return null;

  const backArrow = isRtl ? 'ri-arrow-right-line' : 'ri-arrow-left-line';

  return (
    <div dir={isRtl ? 'rtl' : 'ltr'} className="flex flex-col flex-1 bg-[#f3f4f6]">
      <main className="max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 flex-1 w-full">
        <div className="flex items-center gap-3 sm:gap-4 mb-6 sm:mb-8">
          <Link
            href="/support-tickets"
            className="w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center bg-white border border-gray-200 rounded-full shadow-sm hover:bg-gray-50 transition-colors shrink-0"
            aria-label={t('common.back')}
          >
            <i className={`${backArrow} text-xl text-gray-700`} />
          </Link>
          <h1 className="text-xl sm:text-2xl font-bold text-gray-900">
            {t('supportTicketDetail.pageTitle', { id: String(ticketId) })}
          </h1>
        </div>

        {loading && (
          <div className="flex justify-center py-24">
            <div className="w-12 h-12 border-4 border-[#1e3a5f] border-t-transparent rounded-full animate-spin" />
          </div>
        )}

        {!loading && loadError && (
          <div className="bg-red-50 border border-red-200 rounded-xl p-6 text-red-800 text-center">{loadError}</div>
        )}

        {!loading && !loadError && ticket && (
          <div className="space-y-6">
            {/* بطاقة ملخص التذكرة */}
            <section className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 sm:p-6">
              <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
                <span className="text-[#1e3a5f] font-bold text-base sm:text-lg">
                  {t('supportTicketDetail.ticketLabel')} #{ticket.ticket_number || ticket.id}
                </span>
                <span
                  className={`inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-semibold ${statusBadgeClass(ticket.status)}`}
                >
                  {statusLabel(ticket.status)}
                </span>
              </div>

              <h2 className="text-lg sm:text-xl font-bold text-gray-900 mb-4 leading-snug">{ticket.title}</h2>

              <div className="flex flex-wrap items-center gap-4 sm:gap-6 text-sm text-gray-600 mb-4">
                <span className="inline-flex items-center gap-2">
                  <i className="ri-calendar-line text-lg text-gray-500" aria-hidden />
                  <span>{formatSummaryDate(ticket.created_at, locale)}</span>
                </span>
                {ticket.order_number && (
                  <span className="inline-flex items-center gap-2">
                    <i className="ri-shopping-bag-3-line text-lg text-gray-500" aria-hidden />
                    <span className="font-medium text-gray-800">
                      {t('supportTicketDetail.orderLabel', { order: ticket.order_number })}
                    </span>
                  </span>
                )}
              </div>

              {ticket.initial_attachment_url && (
                <a
                  href={ticket.initial_attachment_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1.5 text-[#2563eb] hover:text-[#1d4ed8] font-semibold text-sm"
                >
                  {t('supportTicketDetail.viewAttachment')}
                </a>
              )}
            </section>

            {/* سلسلة المحادثة */}
            <section>
              <h2 className="text-lg font-bold text-gray-900 mb-4">{t('supportTicketDetail.conversationTitle')}</h2>
              <div className="space-y-4">
                {ticket.thread.map((msg, idx) => {
                  const isAdmin = msg.author === 'admin';
                  const when = formatThreadWhen(msg.created_at, locale);
                  const displayName = isAdmin ? adminDisplayName : userName || t('nav.profile');
                  const initial = nameInitial(displayName);

                  return (
                    <div
                      key={`${msg.created_at}-${idx}`}
                      className={`rounded-xl border p-4 sm:p-5 ${
                        isAdmin
                          ? 'bg-sky-50/90 border-sky-100'
                          : 'bg-white border-gray-100 shadow-sm'
                      }`}
                    >
                      <div className="flex items-start gap-3 gap-x-3">
                        <div
                          className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold ${
                            isAdmin ? 'bg-[#1e3a5f] text-white' : 'bg-sky-100 text-sky-800'
                          }`}
                          aria-hidden
                        >
                          {initial}
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
                            <div className="flex flex-wrap items-center gap-2 min-w-0">
                              <span className="font-bold text-gray-900">{displayName}</span>
                              {isAdmin && (
                                <span className="inline-flex items-center gap-1 rounded-md bg-[#1e3a5f]/10 px-2 py-0.5 text-xs font-semibold text-[#1e3a5f]">
                                  <i className="ri-shield-check-line" aria-hidden />
                                  {t('supportTicketDetail.adminBadge')}
                                </span>
                              )}
                            </div>
                            <span className="text-xs text-gray-500 shrink-0 tabular-nums">{when}</span>
                          </div>
                          <p className="text-gray-800 leading-relaxed whitespace-pre-wrap text-sm sm:text-base">
                            {msg.text}
                          </p>
                          {msg.attachment_url && (
                            <a
                              href={msg.attachment_url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-[#2563eb] hover:underline"
                            >
                              <i className="ri-attachment-2" aria-hidden />
                              {t('supportTicketDetail.attachmentLink')}
                            </a>
                          )}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>

            {/* إضافة رد */}
            <section className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 sm:p-6">
              <h2 className="text-lg font-bold text-gray-900 mb-4">{t('supportTicketDetail.replySectionTitle')}</h2>
              <textarea
                value={newMessage}
                onChange={(e) => setNewMessage(e.target.value)}
                placeholder={t('supportTicketDetail.placeholder')}
                className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#1e3a5f]/25 focus:border-[#1e3a5f] resize-none min-h-[120px]"
                rows={4}
                maxLength={2000}
              />

              <label className="mt-3 flex cursor-pointer items-center gap-2 text-sm text-gray-600">
                <input
                  type="file"
                  className="hidden"
                  accept="image/*,.pdf,.zip,.rar"
                  onChange={(e) => setAttachFile(e.target.files?.[0] ?? null)}
                />
                <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 hover:bg-gray-50">
                  <i className="ri-attachment-2" aria-hidden />
                  {t('supportTicketDetail.attachFile')}
                </span>
                {attachFile && (
                  <span className="truncate text-xs text-gray-500 max-w-[200px]">{attachFile.name}</span>
                )}
              </label>

              <div className="mt-5 flex flex-wrap items-center gap-3 justify-end">
                <button
                  type="button"
                  onClick={() => void handleSendMessage()}
                  disabled={sending || !newMessage.trim()}
                  className="min-h-[44px] px-6 rounded-xl bg-[#2563eb] text-white font-semibold hover:bg-[#1d4ed8] disabled:opacity-50 disabled:pointer-events-none transition-colors"
                >
                  {sending ? t('supportTicketDetail.sending') : t('supportTicketDetail.sendComment')}
                </button>
                <button
                  type="button"
                  onClick={handleCancelReply}
                  className="min-h-[44px] px-5 rounded-xl border border-gray-300 bg-white text-gray-800 font-semibold hover:bg-gray-50 transition-colors"
                >
                  {t('common.cancel')}
                </button>
              </div>

              <p className="mt-2 text-xs text-gray-500">
                {t('supportTicketDetail.charCount', { current: String(newMessage.length) })}
              </p>
              {sendError && <p className="mt-2 text-sm text-red-600">{sendError}</p>}
            </section>
          </div>
        )}
      </main>
    </div>
  );
}