'use client';
import { useEffect, useState, useCallback } from 'react';
import { adminService } from '@/services/admin.service';
import type { SupportTicket, TicketDetail, PaginationMeta } from '@/types/admin.types';

function StatusBadge({ label, color }: { label: string; color: string }) {
  const colors: Record<string, string> = {
    open: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    in_progress: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
    waiting_on_user: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
    resolved: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
    closed: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
    low: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
    medium: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    high: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
    urgent: 'bg-red-500/20 text-red-400 border-red-500/30',
  };
  return <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase ${colors[label.toLowerCase()] || colors.open}`}>{label.replace(/_/g, ' ')}</span>;
}

function TicketDetailModal({ ticketId, onClose }: { ticketId: string; onClose: () => void }) {
  const [ticket, setTicket] = useState<TicketDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [replyText, setReplyText] = useState('');
  const [actionMsg, setActionMsg] = useState('');

  useEffect(() => {
    adminService.getTicketById(ticketId).then((res) => { setTicket(res); setLoading(false); });
  }, [ticketId]);

  const handleReply = async () => {
    if (!replyText.trim()) return;
    try {
      const res = await adminService.replyToTicket({ ticketId, message: replyText });
      setActionMsg('Reply sent'); setReplyText('');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleClose = async () => {
    try {
      await adminService.closeTicket({ ticketId, resolution: 'Resolved by admin' });
      setActionMsg('Ticket closed');
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  if (loading) return <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"><div className="animate-pulse rounded-xl bg-slate-900 p-6 text-white">Loading...</div></div>;
  if (!ticket) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 backdrop-blur-sm pt-10">
      <div className="relative w-full max-w-3xl rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
        <button onClick={onClose} className="absolute right-4 top-4 text-white/50 hover:text-white text-2xl">&times;</button>
        <div className="flex items-start justify-between">
          <div>
            <h2 className="text-xl font-bold text-white">{ticket.subject}</h2>
            <p className="text-sm text-slate-400">by {ticket.createdBy?.firstName} {ticket.createdBy?.lastName} ({ticket.createdBy?.email})</p>
          </div>
          <div className="flex gap-2">
            <StatusBadge label={ticket.status} color={ticket.status} />
            <StatusBadge label={ticket.priority} color={ticket.priority} />
          </div>
        </div>

        <div className="mt-4 rounded-lg bg-white/5 p-4">
          <p className="text-sm text-slate-300">{ticket.description}</p>
        </div>

        {ticket.assignedTo && <p className="mt-2 text-xs text-slate-400">Assigned to: {ticket.assignedTo.firstName} {ticket.assignedTo.lastName}</p>}

        {/* Messages */}
        <div className="mt-6 space-y-3 max-h-60 overflow-y-auto">
          {ticket.messages?.map((msg) => (
            <div key={msg.id} className={`rounded-lg p-3 ${msg.isAdmin ? 'bg-indigo-500/10 ml-8' : 'bg-white/5 mr-8'}`}>
              <p className="text-xs text-slate-400">{msg.sender?.firstName} {msg.sender?.lastName} - {new Date(msg.createdAt).toLocaleString()}</p>
              <p className="mt-1 text-sm text-white">{msg.message}</p>
            </div>
          ))}
        </div>

        {actionMsg && <div className="mt-4 rounded-lg bg-blue-500/10 p-3 text-sm text-blue-400">{actionMsg}</div>}

        {/* Reply Box */}
        <div className="mt-4">
          <textarea value={replyText} onChange={(e) => setReplyText(e.target.value)} placeholder="Type your reply..." rows={3} className="w-full rounded-lg border border-white/10 bg-white/5 p-3 text-sm text-white placeholder-slate-500 focus:border-indigo-500 focus:outline-none" />
          <div className="mt-2 flex gap-2">
            <button onClick={handleReply} className="rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">Send Reply</button>
            {ticket.status !== 'CLOSED' && <button onClick={handleClose} className="rounded-lg bg-red-500/20 px-4 py-2 text-xs font-medium text-red-400 hover:bg-red-500/30">Close Ticket</button>}
          </div>
        </div>
      </div>
    </div>
  );
}

export default function AdminSupportTicketsPage() {
  const [tickets, setTickets] = useState<SupportTicket[]>([]);
  const [meta, setMeta] = useState<PaginationMeta | null>(null);
  const [loading, setLoading] = useState(true);
  const [statusFilter, setStatusFilter] = useState('');
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);

  const fetchTickets = useCallback(async () => {
    setLoading(true);
    try {
      const params: any = { page, limit: 20 };
      if (statusFilter) params.status = statusFilter;
      if (search) params.search = search;
      const res = await adminService.listTickets(params);
      setTickets(res.data); setMeta(res.meta);
    } catch (e) { console.error(e); }
    finally { setLoading(false); }
  }, [page, statusFilter, search]);

  useEffect(() => { fetchTickets(); }, [fetchTickets]);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Support Tickets</h1>
          <p className="mt-1 text-sm text-white/50">Manage, reply, and resolve support requests</p>
        </div>
      </div>

      <div className="flex flex-wrap gap-3">
        <input type="text" placeholder="Search tickets..." value={search} onChange={(e) => { setSearch(e.target.value); setPage(1); }} className="flex-1 min-w-[200px] rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder-slate-500 focus:border-indigo-500 focus:outline-none" />
        <select value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white">
          <option value="">All Status</option>
          <option value="OPEN">Open</option>
          <option value="IN_PROGRESS">In Progress</option>
          <option value="WAITING_ON_USER">Waiting on User</option>
          <option value="RESOLVED">Resolved</option>
          <option value="CLOSED">Closed</option>
        </select>
      </div>

      <div className="space-y-2">
        {loading ? <p className="text-center text-slate-500 py-8">Loading...</p>
        : tickets.length === 0 ? <p className="text-center text-slate-500 py-8">No tickets found</p>
        : tickets.map((t) => (
          <div key={t.id} className="cursor-pointer rounded-xl border border-white/5 bg-white/[0.02] p-4 transition-colors hover:bg-white/[0.05]" onClick={() => setSelectedTicketId(t.id)}>
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="font-medium text-white">{t.subject}</h3>
                  <StatusBadge label={t.status} color={t.status} />
                  <StatusBadge label={t.priority} color={t.priority} />
                </div>
                <p className="mt-1 text-xs text-slate-400">
                  {t.createdBy?.firstName} {t.createdBy?.lastName} &middot; {new Date(t.createdAt).toLocaleDateString()} &middot; {t._count?.messages} messages
                </p>
              </div>
              {t.assignedTo && <p className="text-xs text-slate-500">Assigned: {t.assignedTo.firstName}</p>}
            </div>
          </div>
        ))}
      </div>

      {meta && (
        <div className="flex items-center justify-between">
          <p className="text-xs text-slate-500">Page {meta.page} of {meta.totalPages}</p>
          <div className="flex gap-2">
            <button disabled={page <= 1} onClick={() => setPage(page - 1)} className="rounded-lg bg-white/5 px-3 py-1.5 text-xs text-white disabled:opacity-30 hover:bg-white/10">Previous</button>
            <button disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)} className="rounded-lg bg-white/5 px-3 py-1.5 text-xs text-white disabled:opacity-30 hover:bg-white/10">Next</button>
          </div>
        </div>
      )}

      {selectedTicketId && <TicketDetailModal ticketId={selectedTicketId} onClose={() => { setSelectedTicketId(null); fetchTickets(); }} />}
    </div>
  );
}