import LoaderIcon from '@/components/icons/loader-icon';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import ChatBox from '@/components/user/default/chat-box';
import CreateSupportTicket from '@/components/user/default/create-support-ticket';
import { useTableData } from '@/data/useTableData';
import { cn } from '@/lib/utils';
import { TTicket } from '@/types/admin/support-ticket-type';
import { PlusIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const handleVariant = (status: string) => {
  switch (status) {
    case 'open':
    case 'low':
      return 'successOutline';
    case 'closed':
    case 'high':
      return 'destructiveOutline';
    case 'pending':
    case 'medium':
      return 'warningOutline';
    default:
      return 'outline';
  }
};

const SupportTicket = () => {
  const [ticketId, setTicketId] = useState<number | null>(null);
  const [modalOpen, setModalOpen] = useState(false);

  const {
    items,
    isLoading,
    refresh: refreshList,
  } = useTableData('/user/tickets');

  const { t } = useTranslation();

  return (
    <>
      <div className="flex h-[calc(100svh-200px)] min-h-[500px] gap-3">
        <Card
          className={cn(
            'w-full gap-0 overflow-hidden rounded-2xl p-0 lg:flex lg:w-[25%] dark:border-white/8',
            ticketId ? 'hidden' : 'flex',
            'flex-col',
          )}
        >
          <div className="flex items-center justify-between px-4 py-3">
            <h3 className="text-base font-semibold text-card-foreground">
              {t('Support Tickets')}
            </h3>
          </div>
          <Separator className="bg-black/6 dark:bg-white/6" />

          <div className="p-3">
            <Button
              variant="primary"
              className="w-full"
              onClick={() => setModalOpen(true)}
            >
              <PlusIcon weight="bold" />
              {t('Create New Ticket')}
            </Button>
          </div>

          <Separator className="bg-black/6 dark:bg-white/6" />

          {isLoading ? (
            <div className="flex flex-1 items-center justify-center gap-2 text-sm text-black/40 dark:text-white/40">
              <LoaderIcon />
              {t('Loading...')}
            </div>
          ) : (
            <div className="flex-1 overflow-y-auto">
              {(items as TTicket[])?.map((item: TTicket) => (
                <div key={item.id}>
                  <button
                    onClick={() => setTicketId(item.id)}
                    className={cn(
                      'w-full cursor-pointer p-4 text-left transition-colors',
                      ticketId === item.id
                        ? 'bg-pm-surface-2'
                        : 'hover:bg-black/5 dark:hover:bg-white/5',
                    )}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0">
                        <p className="truncate text-sm font-semibold text-card-foreground">
                          {item.subject}
                        </p>
                        <p className="text-xs text-black/40 dark:text-white/40">
                          {dayjs(item.created_at).format('h:mm A, MMM D')}
                        </p>
                      </div>
                      <Badge
                        variant={handleVariant(item.status)}
                        className="shrink-0 uppercase"
                      >
                        {item.status}
                      </Badge>
                    </div>
                    {item.ticket_replies?.[0]?.message && (
                      <p className="mt-2 line-clamp-2 text-xs text-black/50 dark:text-white/50">
                        {item.ticket_replies[0].message}
                      </p>
                    )}
                  </button>
                  <Separator className="bg-black/6 dark:bg-white/6" />
                </div>
              ))}
            </div>
          )}
        </Card>

        {/* Chat panel */}
        <Card
          className={cn(
            'w-full gap-0 overflow-hidden rounded-2xl p-0 lg:flex lg:w-[75%] dark:border-white/8',
            ticketId ? 'flex' : 'hidden',
            'flex-col',
          )}
        >
          <ChatBox
            ticketId={ticketId}
            onBack={() => setTicketId(null)}
            onRefreshList={refreshList}
          />
        </Card>
      </div>

      <CreateSupportTicket
        open={modalOpen}
        onOpenChange={setModalOpen}
        onSuccess={setTicketId}
        onRefreshList={refreshList}
      />
    </>
  );
};

SupportTicket.title = 'Support Tickets';

export default SupportTicket;