import ChatBox from '@/components/admin/customer-service/chat-box';
import LoaderIcon from '@/components/icons/loader-icon';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group';
import { Separator } from '@/components/ui/separator';
import { useTableData } from '@/data/useTableData';
import { useInitials } from '@/hooks/use-initials';
import { TTicket } from '@/types/admin/support-ticket-type';
import { getImageUrl } from '@/utils/getImageUrl';
import { ArrowLeftIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const Support = () => {
  const [ticketId, setTicketId] = useState<number | null>(null);
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedSearch(search), 400);
    return () => clearTimeout(timer);
  }, [search]);

  const searchParam = debouncedSearch.trim()
    ? `?filter[search]=${encodeURIComponent(debouncedSearch.trim())}`
    : '';

  const { items, isLoading } = useTableData(`/admin/tickets${searchParam}`);

  const getInitials = useInitials();
  const { t } = useTranslation();

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

  return (
    <>
      <div className="flex h-[calc(100vh-5.5rem)] gap-3">
        <div
          className={`flex-col overflow-y-auto rounded-xl bg-white px-2 py-4 shadow-box ${ticketId ? 'hidden md:flex md:w-[25%]' : 'flex w-full md:w-[25%]'}`}
        >
          <h3 className="px-2 text-lg font-medium">{t('Support Tickets')}</h3>
          <Separator className="my-4" />
          <InputGroup className="mb-4 w-full border-0 bg-black/5">
            <InputGroupInput
              placeholder={t('Search by subject, name or email…')}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <InputGroupAddon>
              <MagnifyingGlassIcon />
            </InputGroupAddon>
          </InputGroup>

          <div className="space-y-2">
            {isLoading && (
              <div className="flex justify-center py-6">
                <LoaderIcon />
              </div>
            )}
            {!isLoading && (items as TTicket[])?.length === 0 && (
              <p className="px-2 py-6 text-center text-sm text-black/40">
                {t('No tickets match your search.')}
              </p>
            )}
            {!isLoading &&
              (items as TTicket[])?.map((item: TTicket) => (
                <button
                  key={item?.id}
                  onClick={() => setTicketId(item?.id)}
                  className={`w-full cursor-pointer rounded-xl border border-muted p-4 text-left ${ticketId === item?.id ? 'border-primary bg-primary/5' : ''}`}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex items-start gap-4">
                      <Avatar className="size-10 overflow-hidden rounded-full">
                        <AvatarImage
                          src={getImageUrl(item?.user?.profile?.profile_photo)}
                          alt={[item?.user?.first_name, item?.user?.last_name]
                            .filter(Boolean)
                            .join(' ')}
                        />
                        <AvatarFallback className="rounded-lg bg-neutral-200 font-medium text-black dark:bg-neutral-700 dark:text-white">
                          {getInitials(
                            [item?.user?.first_name, item?.user?.last_name]
                              .filter(Boolean)
                              .join(' '),
                          )}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <p>{item?.subject}</p>
                        <p className="text-sm text-black/50">
                          {dayjs(item?.created_at).format(
                            'h:mm A, MMM D, YYYY',
                          )}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge
                        variant={handleVariant(item?.priority)}
                        className="uppercase"
                      >
                        {item?.priority}
                      </Badge>
                      <Badge
                        variant={handleVariant(item?.status)}
                        className="uppercase"
                      >
                        {item?.status}
                      </Badge>
                    </div>
                  </div>
                  <Separator className="my-2" />
                  <p className="text-sm text-black/50">
                    {(item?.ticket_replies?.[0]?.message?.length ?? 0) > 100
                      ? `${item?.ticket_replies?.[0]?.message?.slice(0, 100)}...`
                      : item?.ticket_replies?.[0]?.message || ''}
                  </p>
                </button>
              ))}
          </div>
        </div>

        <div
          className={`flex-1 flex-col ${ticketId ? 'flex' : 'hidden md:flex'}`}
        >
          {ticketId && (
            <Button
              variant="ghost"
              className="mb-2 w-fit md:hidden"
              onClick={() => setTicketId(null)}
            >
              <ArrowLeftIcon weight="bold" />
              {t('Back to tickets')}
            </Button>
          )}
          <ChatBox ticketId={ticketId} />
        </div>
      </div>
    </>
  );
};

Support.title = 'Support Ticket';

export default Support;