import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { p, AppContainer, div } from 'web-components'
import { Phone, Mail, Headphones, CheckCircle, Clock, AlertCircle, ThumbsUp, MessageSquare } from 'lucide-react'
import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
import dayjs from 'dayjs'
import { Dialog } from '../components/Dialog'
import { useState } from 'react'

export const Route = createFileRoute('/me/complaints')({ component: ComplaintsPage })

interface ComplaintItemProps {
  item: any
}

function ComplaintItem({ item }: ComplaintItemProps) {
  return (
    <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
      {/* Header: ID, Date, Status */}
      <div className="mb-3 flex flex-row items-start justify-between">
        <div>
          <div className="flex flex-row items-center">
            <p className="text-base font-bold text-gray-900">Complaint #{item.id}</p>
            {item.orderId && (
              <div className="ml-2 rounded bg-gray-100 px-2 py-0.5">
                <p className="text-[10px] font-bold text-gray-500">Order #{item.orderId}</p>
              </div>
            )}
          </div>
          <p className="mt-1 text-xs text-gray-400">
            {dayjs(item.createdAt).format('MMM DD, YYYY • h:mm A')}
          </p>
        </div>

        <div
          className={`rounded-full px-3 py-1 ${
            item.isResolved ? 'bg-green-100' : 'bg-amber-100'
          }`}
        >
          <p
            className={`text-xs font-bold ${
              item.isResolved ? 'text-green-700' : 'text-amber-700'
            }`}
          >
            {item.isResolved ? 'Resolved' : 'Pending'}
          </p>
        </div>
      </div>

      {/* Complaint Body */}
      <p className="mb-4 text-sm leading-6 text-gray-700">{item.complaintBody}</p>

      {/* Admin Response */}
      {item.response && (
        <div className="rounded-xl border border-blue-100 bg-blue-50 p-4">
          <div className="mb-2 flex flex-row items-center">
            <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100">
              <Headphones className="h-3.5 w-3.5 text-blue-600" />
            </div>
            <p className="text-xs font-bold uppercase tracking-wide text-blue-800">Support Response</p>
          </div>
          <p className="text-sm leading-5 text-blue-900">{item.response}</p>
        </div>
      )}

      {!item.response && !item.isResolved && (
        <div className="mt-2 flex flex-row items-center">
          <Clock className="h-3.5 w-3.5 text-gray-400" />
          <p className="ml-1 text-xs italic text-gray-400">We are reviewing your complaint...</p>
        </div>
      )}
    </div>
  )
}

function ComplaintsPage() {
  const navigate = useNavigate()
  const { data, isLoading, error, refetch } = trpc.user.complaint.getAll.useQuery()
  const complaints = data?.complaints || []
  const { data: constsData } = useGetEssentialConsts()
  const [showContactDialog, setShowContactDialog] = useState(false)

  if (isLoading) {
    return (
      <AppContainer>
        <div className="flex min-h-full flex-1 items-center justify-center bg-gray-50">
          <p className="font-medium text-gray-500">Loading complaints...</p>
        </div>
      </AppContainer>
    )
  }

  if (error) {
    return (
      <AppContainer>
        <div className="flex min-h-full flex-1 flex-col items-center justify-center bg-gray-50">
          <AlertCircle className="mb-4 h-12 w-12 text-red-500" />
          <p className="text-lg font-bold text-gray-900">Oops!</p>
          <p className="mt-2 text-gray-500">Failed to load complaints</p>
        </div>
      </AppContainer>
    )
  }

  return (
    <AppContainer>
      <div className="min-h-full flex-1 bg-gray-50">
        {/* Support Header */}
        <div className="bg-brand-600 px-4 py-5">
          <div className="mb-4 flex flex-row items-center">
            <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-white/20">
              <Headphones className="h-5 w-5 text-white" />
            </div>
            <p className="text-lg font-bold text-white">Need Help?</p>
          </div>

          <div className="flex flex-col gap-3">
            {/* Call Us Card */}
            <a
              href={`tel:${constsData?.supportMobile || '8688182552'}`}
              className="flex w-full flex-row items-center rounded-xl bg-white p-3"
            >
              <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
                <Phone className="h-5 w-5 text-green-600" />
              </div>
              <div>
                <p className="text-[10px] font-bold uppercase text-gray-500">Call Us</p>
                <p className="text-base font-bold text-gray-900">
                  {constsData?.supportMobile || '8688182552'}
                </p>
              </div>
            </a>

            {/* Email Card */}
            <a
              href={`mailto:${constsData?.supportEmail || 'qushammohd@gmail.com'}`}
              className="flex w-full flex-row items-center rounded-xl bg-white p-3"
            >
              <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
                <Mail className="h-5 w-5 text-blue-600" />
              </div>
              <div>
                <p className="text-[10px] font-bold uppercase text-gray-500">Email</p>
                <p className="text-sm font-bold text-gray-900">
                  {constsData?.supportEmail || 'qushammohd@gmail.com'}
                </p>
              </div>
            </a>
          </div>
        </div>

        {/* Complaints List */}
        <div className="px-4 py-6">
          {complaints.length === 0 ? (
            <div className="flex flex-1 flex-col items-center justify-center py-20">
              <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
                <ThumbsUp className="h-10 w-10 text-gray-400" />
              </div>
              <p className="text-xl font-bold text-gray-900">No Complaints</p>
              <p className="mt-2 px-10 text-center leading-5 text-gray-500">
                You haven't raised any complaints yet. That's great!
              </p>
              <button
                onClick={() => navigate({ to: '/home' })}
                className="mt-8 rounded-xl bg-brand-600 px-6 py-3 font-bold text-white shadow-sm"
              >
                Continue Shopping
              </button>
            </div>
          ) : (
            complaints.map((complaint: any) => (
              <ComplaintItem key={complaint.id} item={complaint} />
            ))
          )}
        </div>
      </div>
    </AppContainer>
  )
}
