import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
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 api from '../api/client'
import Layout from '../components/Layout'
import SeverityBadge from '../components/SeverityBadge'
import StatusBadge from '../components/StatusBadge'
import CTISelect from '../components/CTISelect'
import Avatar from '../components/Avatar'
import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types'
import { useAuth } from '../contexts/AuthContext'

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'])

const selectClass =
  'w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'

function SidebarField({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <p className="text-xs font-medium text-gray-500 mb-1.5">{label}</p>
      {children}
    </div>
  )
}

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

  const [ticket, setTicket] = useState<Ticket | null>(null)
  const [users, setUsers] = useState<User[]>([])
  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
  const [loading, setLoading] = useState(true)
  const [tab, setTab] = useState<Tab>('overview')
  const [editing, setEditing] = useState(false)
  const [reroutingCTI, setReroutingCTI] = useState(false)
  const [commentBody, setCommentBody] = useState('')
  const [submittingComment, setSubmittingComment] = useState(false)
  const [preview, setPreview] = useState(false)
  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())

  const [editForm, setEditForm] = useState({ title: '', overview: '' })
  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })

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

  useEffect(() => {
    Promise.all([
      api.get<Ticket>(`/tickets/${id}`),
      api.get<User[]>('/users'),
    ]).then(([tRes, uRes]) => {
      setTicket(tRes.data)
      setUsers(uRes.data)
    }).finally(() => setLoading(false))
  }, [id])

  useEffect(() => {
    if (tab === 'audit' && ticket) {
      api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
    }
  }, [tab, ticket, id])

  const patch = async (payload: Record<string, unknown>) => {
    if (!ticket) return
    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
    setTicket(res.data)
    return res.data
  }

  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 deleteTicket = async () => {
    if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
    await api.delete(`/tickets/${ticket.displayId}`)
    navigate('/')
  }

  const submitComment = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!ticket || !commentBody.trim()) return
    setSubmittingComment(true)
    try {
      const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
        body: commentBody.trim(),
      })
      setTicket((t) => t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t)
      setCommentBody('')
      setPreview(false)
    } finally {
      setSubmittingComment(false)
    }
  }

  const deleteComment = async (commentId: string) => {
    if (!ticket) return
    await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
    setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
  }

  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 (loading) {
    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.filter((u) => u.role !== 'SERVICE')

  // Status options: CLOSED only for admins
  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(-1)}
        className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 mb-4 transition-colors"
      >
        <ArrowLeft size={14} />
        Back
      </button>

      <div className="flex gap-6 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>
            </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-blue-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-blue-500 text-blue-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-blue-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-blue-600 text-white rounded-lg hover:bg-blue-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>
                {ticket.comments && ticket.comments.length > 0 ? (
                  <div className="divide-y divide-gray-800">
                    {ticket.comments.map((comment) => (
                      <div key={comment.id} className="p-6 group">
                        <div className="flex items-start gap-3">
                          <Avatar name={comment.author.displayName} size="md" />
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between mb-2">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-semibold text-gray-200">
                                  {comment.author.displayName}
                                </span>
                                <span className="text-xs text-gray-500">
                                  {format(new Date(comment.createdAt), 'MMM d, yyyy · HH:mm')}
                                </span>
                              </div>
                              {(comment.authorId === authUser?.id || isAdmin) && (
                                <button
                                  onClick={() => deleteComment(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="prose text-sm text-gray-300">
                              <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                {comment.body}
                              </ReactMarkdown>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="py-16 text-center text-sm text-gray-600">
                    No comments yet
                  </div>
                )}

                {/* Comment composer */}
                <div className="border-t border-gray-800 p-6">
                  <div className="flex gap-3">
                    <Avatar name={authUser?.displayName ?? '?'} size="md" />
                    <div className="flex-1">
                      <div className="flex gap-4 mb-2 border-b border-gray-800">
                        {(['Write', 'Preview'] as const).map((label) => (
                          <button
                            key={label}
                            onClick={() => setPreview(label === 'Preview')}
                            className={`text-xs pb-2 border-b-2 -mb-px transition-colors ${
                              (label === 'Preview') === preview
                                ? 'border-blue-500 text-blue-400'
                                : 'border-transparent text-gray-500 hover:text-gray-300'
                            }`}
                          >
                            {label}
                          </button>
                        ))}
                      </div>

                      <form onSubmit={submitComment}>
                        {preview ? (
                          <div className="prose text-sm text-gray-300 min-h-[80px] mb-3 px-1">
                            {commentBody.trim()
                              ? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
                              : <span className="text-gray-600 italic">Nothing to preview</span>
                            }
                          </div>
                        ) : (
                          <textarea
                            value={commentBody}
                            onChange={(e) => setCommentBody(e.target.value)}
                            placeholder="Leave a comment… Markdown supported"
                            rows={4}
                            className="w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-600 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none mb-3"
                            onKeyDown={(e) => {
                              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
                                e.preventDefault()
                                submitComment(e as unknown as React.FormEvent)
                              }
                            }}
                          />
                        )}
                        <div className="flex justify-between items-center">
                          <span className="text-xs text-gray-600">
                            Markdown supported · Ctrl+Enter to submit
                          </span>
                          <button
                            type="submit"
                            disabled={submittingComment || !commentBody.trim()}
                            className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
                          >
                            <Send size={13} />
                            Comment
                          </button>
                        </div>
                      </form>
                    </div>
                  </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]}>
                                      {log.detail!}
                                    </ReactMarkdown>
                                  </div>
                                ) : (
                                  <p className="text-sm text-gray-400">{log.detail}</p>
                                )}
                              </div>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        {/* ── Sidebar ── */}
        <div className="w-64 flex-shrink-0 sticky top-0 space-y-3">

          {/* Details */}
          <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">Details</p>
            </div>

            <div className="px-4 py-3 space-y-3">
              <SidebarField label="Status">
                <select
                  value={ticket.status}
                  onChange={(e) => patch({ status: e.target.value })}
                  className={selectClass}
                >
                  {statusOptions.map((s) => (
                    <option key={s.value} value={s.value}>{s.label}</option>
                  ))}
                </select>
                {!isAdmin && ticket.status !== 'CLOSED' && (
                  <p className="text-xs text-gray-600 mt-1">Closing requires admin</p>
                )}
              </SidebarField>

              <SidebarField label="Severity">
                <select
                  value={ticket.severity}
                  onChange={(e) => patch({ severity: Number(e.target.value) })}
                  className={selectClass}
                >
                  {SEVERITY_OPTIONS.map((s) => (
                    <option key={s.value} value={s.value}>{s.label}</option>
                  ))}
                </select>
              </SidebarField>

              <SidebarField label="Assignee">
                <select
                  value={ticket.assigneeId ?? ''}
                  onChange={(e) => patch({ assigneeId: e.target.value || null })}
                  className={selectClass}
                >
                  <option value="">Unassigned</option>
                  {agentUsers.map((u) => (
                    <option key={u.id} value={u.id}>{u.displayName}</option>
                  ))}
                </select>
                {ticket.assignee && (
                  <div className="flex items-center gap-1.5 mt-1.5">
                    <Avatar name={ticket.assignee.displayName} size="sm" />
                    <span className="text-xs text-gray-400">{ticket.assignee.displayName}</span>
                  </div>
                )}
              </SidebarField>
            </div>

            {/* Routing */}
            <div className="px-4 py-3">
              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Routing</p>
              {reroutingCTI ? (
                <div className="space-y-2">
                  <CTISelect value={pendingCTI} onChange={setPendingCTI} />
                  <div className="flex gap-2 pt-1">
                    <button
                      onClick={() => setReroutingCTI(false)}
                      className="flex-1 text-xs py-1.5 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors text-gray-400"
                    >
                      Cancel
                    </button>
                    <button
                      onClick={saveReroute}
                      className="flex-1 text-xs py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      Save
                    </button>
                  </div>
                </div>
              ) : (
                <div>
                  <p className="text-xs text-gray-300 leading-relaxed">
                    {ticket.category.name}
                    <span className="text-gray-600"> › </span>
                    {ticket.type.name}
                    <span className="text-gray-600"> › </span>
                    {ticket.item.name}
                  </p>
                  <button
                    onClick={startReroute}
                    className="mt-1.5 text-xs text-blue-500 hover:text-blue-400 transition-colors"
                  >
                    Change routing
                  </button>
                </div>
              )}
            </div>

            {/* Dates */}
            <div className="px-4 py-3 space-y-2.5">
              <div className="flex items-center gap-2">
                <Avatar name={ticket.createdBy.displayName} size="sm" />
                <div>
                  <p className="text-xs text-gray-500">Opened by</p>
                  <p className="text-xs font-medium text-gray-300">{ticket.createdBy.displayName}</p>
                </div>
              </div>
              <div>
                <p className="text-xs text-gray-500">Created</p>
                <p className="text-xs text-gray-300">{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</p>
              </div>
              {ticket.resolvedAt && (
                <div>
                  <p className="text-xs text-gray-500">Resolved</p>
                  <p className="text-xs text-gray-300">{format(new Date(ticket.resolvedAt), 'MMM d, yyyy HH:mm')}</p>
                </div>
              )}
              <div>
                <p className="text-xs text-gray-500">Updated</p>
                <p className="text-xs text-gray-300">{formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}</p>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3 space-y-2">
            <button
              onClick={startEdit}
              className="w-full flex items-center justify-center gap-2 py-2 text-sm text-gray-300 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
            >
              <Pencil size={13} />
              Edit title &amp; overview
            </button>
            {isAdmin && (
              <button
                onClick={deleteTicket}
                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>
    </Layout>
  )
}