import { useEffect, useRef, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useShortcut } from '../hooks/useShortcuts';
import { format, formatDistanceToNow } from 'date-fns';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
  Pencil,
  Trash2,
  Send,
  X,
  Check,
  MessageSquare,
  ClipboardList,
  FileText,
  ArrowLeft,
  ChevronDown,
  ChevronRight,
} from 'lucide-react';
import { toast } from 'sonner';
import Layout from '../components/Layout';
import Modal from '../components/Modal';
import SeverityBadge from '../components/SeverityBadge';
import StatusBadge from '../components/StatusBadge';
import CTISelect from '../components/CTISelect';
import Avatar from '../components/Avatar';
import MentionTextarea from '../components/MentionTextarea';
import { injectMentionLinks } from '../lib/mentions';
import { TicketStatus } from '../types';
import { useAuth } from '../contexts/AuthContext';
import {
  useTicket,
  useTicketAudit,
  useUpdateTicket,
  useDeleteTicket,
  useUsers,
  useAddComment,
  useDeleteComment,
} from '../api/queries';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';

type Tab = 'overview' | 'comments' | 'audit';

const SEVERITY_OPTIONS = [
  { value: 1, label: 'SEV 1 — Critical' },
  { value: 2, label: 'SEV 2 — High' },
  { value: 3, label: 'SEV 3 — Medium' },
  { value: 4, label: 'SEV 4 — Low' },
  { value: 5, label: 'SEV 5 — Minimal' },
];

const AUDIT_LABELS: Record<string, string> = {
  CREATED: 'created this ticket',
  STATUS_CHANGED: 'changed status',
  ASSIGNEE_CHANGED: 'changed assignee',
  SEVERITY_CHANGED: 'changed severity',
  REROUTED: 'rerouted ticket',
  TITLE_CHANGED: 'updated title',
  OVERVIEW_CHANGED: 'updated overview',
  COMMENT_ADDED: 'added a comment',
  COMMENT_DELETED: 'deleted a comment',
};

const AUDIT_COLORS: Record<string, string> = {
  CREATED: 'bg-green-500',
  STATUS_CHANGED: 'bg-blue-500',
  ASSIGNEE_CHANGED: 'bg-purple-500',
  SEVERITY_CHANGED: 'bg-orange-500',
  REROUTED: 'bg-cyan-500',
  TITLE_CHANGED: 'bg-gray-500',
  OVERVIEW_CHANGED: 'bg-gray-500',
  COMMENT_ADDED: 'bg-gray-500',
  COMMENT_DELETED: 'bg-red-500',
};

const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED']);

export default function TicketDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { user: authUser } = useAuth();

  const [tab, setTab] = useState<Tab>('overview');
  const [editing, setEditing] = useState(false);
  const [reroutingCTI, setReroutingCTI] = useState(false);
  const [commentBody, setCommentBody] = useState('');
  const [preview, setPreview] = useState(false);
  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
  const [deleteOpen, setDeleteOpen] = useState(false);

  const commentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
  const [editForm, setEditForm] = useState({ title: '', overview: '' });
  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
  const [statusOpen, setStatusOpen] = useState(false);
  const [severityOpen, setSeverityOpen] = useState(false);
  const [assigneeOpen, setAssigneeOpen] = useState(false);
  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
  const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());

  // Draft autosave
  const draftKey = id ? `comment-draft:${id}` : null;
  useEffect(() => {
    if (!draftKey) return;
    const saved = localStorage.getItem(draftKey);
    if (saved) setCommentBody(saved);
  }, [draftKey]);
  useEffect(() => {
    if (!draftKey) return;
    if (commentBody) localStorage.setItem(draftKey, commentBody);
    else localStorage.removeItem(draftKey);
  }, [commentBody, draftKey]);

  const { data: ticket, isLoading } = useTicket(id);
  const { data: users = [] } = useUsers();
  const { data: auditLogs = [] } = useTicketAudit(id, tab === 'audit');

  const updateTicket = useUpdateTicket();
  const deleteTicketMutation = useDeleteTicket();
  const addComment = useAddComment(id);
  const deleteCommentMutation = useDeleteComment(id);

  const toggleDate = (key: string) =>
    setExpandedDates((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });

  const toggleCommentDate = (commentId: string) =>
    setExpandedCommentDates((prev) => {
      const next = new Set(prev);
      if (next.has(commentId)) next.delete(commentId);
      else next.add(commentId);
      return next;
    });

  const isAdmin = authUser?.role === 'ADMIN';

  const patch = async (payload: Record<string, unknown>) => {
    if (!ticket) return;
    await updateTicket.mutateAsync({ id: ticket.displayId, data: payload });
  };

  const startEdit = () => {
    if (!ticket) return;
    setEditForm({ title: ticket.title, overview: ticket.overview });
    setEditing(true);
    setTab('overview');
  };

  const saveEdit = async () => {
    await patch({ title: editForm.title, overview: editForm.overview });
    setEditing(false);
  };

  const startReroute = () => {
    if (!ticket) return;
    setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
    setReroutingCTI(true);
  };

  const saveReroute = async () => {
    await patch(pendingCTI);
    setReroutingCTI(false);
  };

  const confirmDeleteTicket = async () => {
    if (!ticket) return;
    await deleteTicketMutation.mutateAsync(ticket.displayId);
    toast.success('Ticket deleted');
    navigate('/tickets');
  };

  const submitComment = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!ticket || !commentBody.trim()) return;
    await addComment.mutateAsync(commentBody.trim());
    setCommentBody('');
    setPreview(false);
    if (draftKey) localStorage.removeItem(draftKey);
  };

  const handleDeleteComment = async (commentId: string) => {
    await deleteCommentMutation.mutateAsync(commentId);
  };

  useShortcut('e', (e) => {
    if (!ticket || editing) return;
    e.preventDefault();
    startEdit();
  }, [ticket, editing]);

  useShortcut('r', (e) => {
    if (!ticket) return;
    e.preventDefault();
    setTab('comments');
    setPreview(false);
    setTimeout(() => commentTextareaRef.current?.focus(), 40);
  }, [ticket]);

  const toggleLog = (logId: string) => {
    setExpandedLogs((prev) => {
      const next = new Set(prev);
      if (next.has(logId)) next.delete(logId);
      else next.add(logId);
      return next;
    });
  };

  if (isLoading) {
    return (
      <Layout>
        <div className="flex items-center justify-center h-full text-gray-600 text-sm">
          Loading...
        </div>
      </Layout>
    );
  }

  if (!ticket) {
    return (
      <Layout>
        <div className="flex items-center justify-center h-full text-gray-600 text-sm">
          Ticket not found
        </div>
      </Layout>
    );
  }

  const commentCount = ticket.comments?.length ?? 0;
  const agentUsers = users;

  const statusOptions: { value: TicketStatus; label: string }[] = [
    { value: 'OPEN', label: 'Open' },
    { value: 'IN_PROGRESS', label: 'In Progress' },
    { value: 'RESOLVED', label: 'Resolved' },
    ...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
  ];

  return (
    <Layout>
      {/* Back link */}
      <button
        onClick={() => navigate('/tickets')}
        className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 mb-4 transition-colors"
      >
        <ArrowLeft size={14} />
        All tickets
      </button>

      <div className="flex flex-col-reverse md:flex-row gap-6 md:items-start">
        {/* ── Main content ── */}
        <div className="flex-1 min-w-0">
          {/* Title card */}
          <div className="bg-gray-900 border border-gray-800 rounded-xl px-6 py-5 mb-3">
            <div className="flex items-center gap-2 mb-3 flex-wrap">
              <span className="font-mono text-xs font-semibold text-gray-500 bg-gray-800 px-2 py-0.5 rounded">
                {ticket.displayId}
              </span>
              <SeverityBadge severity={ticket.severity} />
              <StatusBadge status={ticket.status} />
              <span className="text-xs text-gray-500 ml-1">
                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
              </span>
              <button
                onClick={startEdit}
                className="ml-auto text-gray-500 hover:text-gray-300 transition-colors"
                title="Edit title & overview"
              >
                <Pencil size={14} />
              </button>
            </div>

            {editing ? (
              <input
                type="text"
                value={editForm.title}
                onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
                className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
                autoFocus
              />
            ) : (
              <h1 className="text-2xl font-bold text-gray-100">{ticket.title}</h1>
            )}
          </div>

          {/* Tabs + content */}
          <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
            {/* Tab bar */}
            <div className="flex border-b border-gray-800 px-2">
              {(
                [
                  { key: 'overview', icon: FileText, label: 'Overview' },
                  {
                    key: 'comments',
                    icon: MessageSquare,
                    label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}`,
                  },
                  { key: 'audit', icon: ClipboardList, label: 'Audit Log' },
                ] as const
              ).map(({ key, icon: Icon, label }) => (
                <button
                  key={key}
                  onClick={() => setTab(key)}
                  className={`flex items-center gap-2 px-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
                    tab === key
                      ? 'border-indigo-500 text-indigo-400'
                      : 'border-transparent text-gray-500 hover:text-gray-300'
                  }`}
                >
                  <Icon size={14} />
                  {label}
                </button>
              ))}
            </div>

            {/* ── Overview ── */}
            {tab === 'overview' && (
              <div className="p-6">
                {editing ? (
                  <div className="space-y-3">
                    <textarea
                      value={editForm.overview}
                      onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
                      rows={12}
                      className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y font-mono"
                    />
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => setEditing(false)}
                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
                      >
                        <X size={13} /> Cancel
                      </button>
                      <button
                        onClick={saveEdit}
                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
                      >
                        <Check size={13} /> Save changes
                      </button>
                    </div>
                  </div>
                ) : (
                  <div className="prose text-sm text-gray-300">
                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
                  </div>
                )}
              </div>
            )}

            {/* ── Comments ── */}
            {tab === 'comments' && (
              <div className="p-6 space-y-4">
                {ticket.comments && ticket.comments.length > 0 ? (
                  ticket.comments.map((comment, i) => (
                    <div key={comment.id} className="flex gap-3 group">
                      {/* Avatar + spine */}
                      <div className="flex flex-col items-center">
                        <Avatar name={comment.author.displayName} size="md" />
                        {i < ticket.comments!.length - 1 && (
                          <div className="flex-1 w-px bg-gray-800 mt-2" />
                        )}
                      </div>
                      {/* Card */}
                      <div className="flex-1 min-w-0 border border-gray-700 rounded-lg overflow-hidden">
                        <div className="flex items-center justify-between px-4 py-2 bg-gray-800/60 border-b border-gray-700">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-semibold text-gray-200">
                              {comment.author.displayName}
                            </span>
                            <button
                              onClick={() => toggleCommentDate(comment.id)}
                              className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
                            >
                              {expandedCommentDates.has(comment.id)
                                ? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
                                : formatDistanceToNow(new Date(comment.createdAt), {
                                    addSuffix: true,
                                  })}
                            </button>
                          </div>
                          {(comment.authorId === authUser?.id || isAdmin) && (
                            <button
                              onClick={() => handleDeleteComment(comment.id)}
                              className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
                            >
                              <Trash2 size={13} />
                            </button>
                          )}
                        </div>
                        <div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
                            {injectMentionLinks(comment.body, users)}
                          </ReactMarkdown>
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
                )}

                {/* Composer */}
                <div className="flex gap-3">
                  <Avatar name={authUser?.displayName ?? '?'} size="md" />
                  <div className="flex-1 border border-gray-700 rounded-lg overflow-hidden">
                    <div className="flex gap-4 px-4 bg-gray-800/60 border-b border-gray-700">
                      {(['Write', 'Preview'] as const).map((label) => (
                        <button
                          key={label}
                          onClick={() => setPreview(label === 'Preview')}
                          className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
                            (label === 'Preview') === preview
                              ? 'border-indigo-500 text-indigo-400'
                              : 'border-transparent text-gray-500 hover:text-gray-300'
                          }`}
                        >
                          {label}
                        </button>
                      ))}
                    </div>
                    <form onSubmit={submitComment} className="p-3">
                      {preview ? (
                        <div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
                          {commentBody.trim() ? (
                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
                              {injectMentionLinks(commentBody, users)}
                            </ReactMarkdown>
                          ) : (
                            <span className="text-gray-600 italic">Nothing to preview</span>
                          )}
                        </div>
                      ) : (
                        <div className="mb-3">
                          <MentionTextarea
                            ref={commentTextareaRef}
                            value={commentBody}
                            onChange={setCommentBody}
                            users={users}
                            onSubmit={() =>
                              submitComment({
                                preventDefault: () => {},
                              } as unknown as React.FormEvent)
                            }
                            placeholder="Leave a comment… Markdown & @mentions"
                            rows={4}
                            className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none"
                          />
                        </div>
                      )}
                      <div className="flex justify-between items-center border-t border-gray-700 pt-2">
                        <span className="text-xs text-gray-600">Markdown · Ctrl+Enter</span>
                        <button
                          type="submit"
                          disabled={addComment.isPending || !commentBody.trim()}
                          className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
                        >
                          <Send size={13} />
                          Comment
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            )}

            {/* ── Audit Log ── */}
            {tab === 'audit' && (
              <div className="p-6">
                {auditLogs.length === 0 ? (
                  <div className="py-10 text-center text-sm text-gray-600">No activity yet</div>
                ) : (
                  <div>
                    {auditLogs.map((log, i) => {
                      const hasDetail = !!log.detail;
                      const isExpanded = expandedLogs.has(log.id);
                      const isComment = COMMENT_ACTIONS.has(log.action);

                      return (
                        <div key={log.id} className="flex gap-4">
                          {/* Timeline */}
                          <div className="flex flex-col items-center w-5 flex-shrink-0">
                            <div
                              className={`w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0 ${AUDIT_COLORS[log.action] ?? 'bg-gray-500'}`}
                            />
                            {i < auditLogs.length - 1 && (
                              <div className="w-px flex-1 bg-gray-800 my-1" />
                            )}
                          </div>

                          {/* Entry */}
                          <div className="flex-1 pb-4">
                            <div
                              className={`flex items-baseline justify-between gap-4 ${hasDetail ? 'cursor-pointer select-none' : ''}`}
                              onClick={() => hasDetail && toggleLog(log.id)}
                            >
                              <p className="text-sm text-gray-300">
                                <span className="font-medium text-gray-100">
                                  {log.user.displayName}
                                </span>{' '}
                                {AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
                                {hasDetail && (
                                  <span className="ml-1 inline-flex items-center text-gray-600">
                                    {isExpanded ? (
                                      <ChevronDown size={13} />
                                    ) : (
                                      <ChevronRight size={13} />
                                    )}
                                  </span>
                                )}
                              </p>
                              <span
                                className="text-xs text-gray-600 flex-shrink-0"
                                title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
                              >
                                {formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
                              </span>
                            </div>

                            {hasDetail && isExpanded && (
                              <div className="mt-2 ml-0 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
                                {isComment ? (
                                  <div className="prose text-sm text-gray-300">
                                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                      {injectMentionLinks(log.detail!, users)}
                                    </ReactMarkdown>
                                  </div>
                                ) : (
                                  <p className="text-sm text-gray-400">{log.detail}</p>
                                )}
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        {/* ── Sidebar ── */}
        <div className="w-full md:w-64 flex-shrink-0 md:sticky md:top-0 space-y-3">
          {/* Ticket Summary */}
          <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
            <div className="px-4 py-3">
              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                Ticket Summary
              </p>
            </div>

            {/* Status */}
            <Popover open={statusOpen} onOpenChange={setStatusOpen}>
              <PopoverTrigger asChild>
                <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
                  <p className="text-xs font-medium text-gray-500 mb-1.5">Status</p>
                  <StatusBadge status={ticket.status} />
                </button>
              </PopoverTrigger>
              <PopoverContent align="start" className="w-56 p-1">
                {statusOptions.map((s) => (
                  <button
                    key={s.value}
                    onClick={async () => {
                      await patch({ status: s.value });
                      setStatusOpen(false);
                    }}
                    className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
                  >
                    <StatusBadge status={s.value} />
                    {ticket.status === s.value && (
                      <Check size={13} className="ml-auto text-primary" />
                    )}
                  </button>
                ))}
                {!isAdmin && (
                  <p className="px-2 pt-1 text-[11px] text-muted-foreground">
                    Closing requires admin
                  </p>
                )}
              </PopoverContent>
            </Popover>

            {/* Severity */}
            <Popover open={severityOpen} onOpenChange={setSeverityOpen}>
              <PopoverTrigger asChild>
                <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
                  <p className="text-xs font-medium text-gray-500 mb-1.5">Severity</p>
                  <SeverityBadge severity={ticket.severity} />
                </button>
              </PopoverTrigger>
              <PopoverContent align="start" className="w-56 p-1">
                {SEVERITY_OPTIONS.map((s) => (
                  <button
                    key={s.value}
                    onClick={async () => {
                      await patch({ severity: s.value });
                      setSeverityOpen(false);
                    }}
                    className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
                  >
                    <SeverityBadge severity={s.value} />
                    <span className="text-muted-foreground text-xs">
                      {s.label.split(' — ')[1]}
                    </span>
                    {ticket.severity === s.value && (
                      <Check size={13} className="ml-auto text-primary" />
                    )}
                  </button>
                ))}
              </PopoverContent>
            </Popover>

            {/* CTI — one clickable unit */}
            <button
              onClick={startReroute}
              className="w-full px-4 py-3 text-left space-y-3 hover:bg-gray-800/50 transition-colors"
            >
              <div>
                <p className="text-xs font-medium text-gray-500 mb-1">Category</p>
                <p className="text-sm text-gray-300">{ticket.category.name}</p>
              </div>
              <div>
                <p className="text-xs font-medium text-gray-500 mb-1">Type</p>
                <p className="text-sm text-gray-300">{ticket.type.name}</p>
              </div>
              <div>
                <p className="text-xs font-medium text-gray-500 mb-1">Issue</p>
                <p className="text-sm text-gray-300">{ticket.item.name}</p>
              </div>
            </button>

            {/* Dates */}
            <div className="px-4 py-3 space-y-2.5">
              {[
                { key: 'created', label: 'Created', date: ticket.createdAt },
                { key: 'modified', label: 'Modified', date: ticket.updatedAt },
                ...(ticket.resolvedAt
                  ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }]
                  : []),
              ].map(({ key, label, date }) => (
                <div key={key}>
                  <p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
                  <button
                    onClick={() => toggleDate(key)}
                    className="text-xs text-gray-300 hover:text-gray-100 transition-colors"
                  >
                    {expandedDates.has(key)
                      ? format(new Date(date), 'MMM d, yyyy HH:mm')
                      : formatDistanceToNow(new Date(date), { addSuffix: true })}
                  </button>
                </div>
              ))}
            </div>

            {/* Assignee */}
            <Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
              <PopoverTrigger asChild>
                <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
                  <p className="text-xs font-medium text-gray-500 mb-1.5">Assignee</p>
                  {ticket.assignee ? (
                    <div className="flex items-center gap-1.5">
                      <Avatar name={ticket.assignee.displayName} size="sm" />
                      <span className="text-sm text-gray-300">{ticket.assignee.displayName}</span>
                    </div>
                  ) : (
                    <p className="text-sm text-gray-500">Unassigned</p>
                  )}
                </button>
              </PopoverTrigger>
              <PopoverContent align="start" className="w-60 p-1">
                <button
                  onClick={async () => {
                    await patch({ assigneeId: null });
                    setAssigneeOpen(false);
                  }}
                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
                >
                  <span className="text-muted-foreground">Unassigned</span>
                  {!ticket.assigneeId && <Check size={13} className="ml-auto text-primary" />}
                </button>
                <div className="max-h-64 overflow-auto">
                  {agentUsers.map((u) => (
                    <button
                      key={u.id}
                      onClick={async () => {
                        await patch({ assigneeId: u.id });
                        setAssigneeOpen(false);
                      }}
                      className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
                    >
                      <Avatar name={u.displayName} size="sm" />
                      <span>{u.displayName}</span>
                      {ticket.assigneeId === u.id && (
                        <Check size={13} className="ml-auto text-primary" />
                      )}
                    </button>
                  ))}
                </div>
              </PopoverContent>
            </Popover>

            {/* Requester */}
            <div className="px-4 py-3">
              <p className="text-xs font-medium text-gray-500 mb-1.5">Requester</p>
              <div className="flex items-center gap-1.5">
                <Avatar name={ticket.createdBy.displayName} size="sm" />
                <span className="text-sm text-gray-300">{ticket.createdBy.displayName}</span>
              </div>
            </div>
          </div>

          {isAdmin && (
            <div className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
              <button
                onClick={() => setDeleteOpen(true)}
                className="w-full flex items-center justify-center gap-2 py-2 text-sm text-red-400 border border-red-500/30 rounded-lg hover:bg-red-500/10 transition-colors"
              >
                <Trash2 size={13} />
                Delete ticket
              </button>
            </div>
          )}
        </div>
      </div>

      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete this ticket?</AlertDialogTitle>
            <AlertDialogDescription>
              {ticket.displayId} · {ticket.title} will be permanently removed along with its
              comments and audit log. This cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDeleteTicket}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {reroutingCTI && (
        <Modal title="Change Routing" onClose={() => setReroutingCTI(false)} size="lg">
          <div className="space-y-5">
            <p className="text-sm text-gray-400">
              Current:{' '}
              <span className="text-gray-200">
                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
              </span>
            </p>
            <CTISelect value={pendingCTI} onChange={setPendingCTI} />
            <div className="flex justify-end gap-3 pt-1">
              <button
                onClick={() => setReroutingCTI(false)}
                className="px-4 py-2 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={saveReroute}
                disabled={!pendingCTI.itemId}
                className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
              >
                Save routing
              </button>
            </div>
          </div>
        </Modal>
      )}
    </Layout>
  );
}