import React from 'react'
import Image, { StaticImageData } from 'next/image'
import Button from '@/components/ui/Button'
import { SearchCardProps } from '@/app/types/index'

const SearchCard = ({
  id,
  username,
  userImg,
  start_point,
  country_from,
  country_from_icon,
  country_from_code,
  end_point,
  country_to,
  country_to_icon,
  country_to_code,
  cargo_type,
  user_request,
  user_comment,
  moving_type,
  estimated_date,
  day_out,
  day_in,
}: SearchCardProps) => {
  const getUserRequestStyles = () => {
    if (user_request === 'Нужен перевозчик') {
      return 'text-[#065bff]'
    }
    return 'text-[#45c226]'
  }

  const setMovingTypeIcon = () => {
    if (moving_type === 'Авиатранспорт') {
      return '/images/airplane.png'
    }
    return '/images/car.png'
  }

  return (
    <>
      {/* десктоп */}
      <div className="hidden sm:block">
        <div className="bg-white rounded-xl shadow-lg p-6 w-full my-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-5">
              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
                <Image
                  src={userImg}
                  alt={username}
                  width={52}
                  height={52}
                  className="rounded-full object-cover"
                />
              </div>
              <div className="flex items-center gap-3">
                <div className="text-base font-semibold">{username}</div>
                <div className="text-gray-500">|</div>
                <div
                  className={`text-base font-semibold ${getUserRequestStyles()}`}
                >
                  {user_request}
                </div>
                <div className="ml-1">
                  Тип посылки:{' '}
                  <span className="text-orange font-semibold ml-1">
                    {cargo_type}
                  </span>
                </div>
              </div>
            </div>
            <Button
              text="Откликнуться"
              className="bg-orange hover:bg-orange/80 text-white px-10 py-3 text-base font-semibold transition-colors cursor-pointer"
            />
          </div>

          <div className="bg-[#f8f8f8] rounded-lg p-5">
            <div className="flex items-baseline gap-2">
              <span className="text-gray-600">{user_comment}</span>
            </div>
          </div>
          <div className="text-gray-500 text-sm flex justify-end pt-2">
            Объявление № {id}
          </div>

          <div className="flex items-center justify-between mt-6">
            <div className="flex flex-col">
              {user_request === 'Нужен перевозчик' ? (
                <span className="text-gray-500">Забрать из:</span>
              ) : (
                <span className="text-gray-500">Выезжаю из:</span>
              )}
              <div className="flex flex-col">
                <div className="flex items-center">
                  <Image
                    src={country_from_icon}
                    width={26}
                    height={13}
                    alt={country_from_code}
                  />
                  <span className="text-gray-400 pr-2 pl-1">
                    {country_from_code}
                  </span>
                  <span className="text-base font-semibold">
                    {start_point} / {country_from}
                  </span>
                </div>
                {user_request === 'Могу перевезти' && (
                  <div className="text-sm text-gray-500 mt-1">
                    <span className="text-sm font-normal">Отправление:</span>{' '}
                    <span className="text-sm font-semibold">
                      {day_out?.toLocaleDateString()}
                    </span>
                  </div>
                )}
              </div>
            </div>

            <div className="text-center">
              <div className="flex items-center justify-center gap-2">
                <span className="text-base font-semibold">{moving_type}</span>
                <Image
                  src={setMovingTypeIcon()}
                  width={15}
                  height={15}
                  alt="route vector"
                  className="w-[15px] h-[15px] object-contain"
                />
              </div>
              <div className="flex items-center justify-between w-[500px] mx-auto my-1">
                <Image
                  src="/images/vector.svg"
                  width={500}
                  height={6}
                  alt="route vector"
                  className="absolute"
                />
                <div className="w-5 h-5 rounded-full bg-white border-3 border-[#065bff] relative z-10" />
                <div className="w-5 h-5 rounded-full bg-white border-3 border-[#45c226] relative z-10" />
              </div>

              {user_request === 'Нужен перевозчик' && (
                <div className="text-sm text-gray-500">
                  <span className="text-sm font-normal">Дата доставки:</span>{' '}
                  <span className="text-sm font-semibold">
                    {estimated_date.toLocaleDateString()}
                  </span>
                </div>
              )}
            </div>

            <div className="flex flex-col -mb-[14px]">
              {user_request === 'Нужен перевозчик' ? (
                <div className="text-base text-gray-500">Доставить в:</div>
              ) : (
                <div className="text-base text-gray-500">Прибываю в:</div>
              )}

              <div className="flex flex-col">
                <div className="flex items-center">
                  <Image
                    src={country_to_icon}
                    width={26}
                    height={13}
                    alt={country_to_code}
                  />
                  <span className="text-gray-400 pr-2 pl-1">
                    {country_to_code}
                  </span>
                  <span className="text-base font-semibold">
                    {end_point} / {country_to}
                  </span>
                </div>
                {user_request === 'Могу перевезти' && (
                  <div className="text-sm text-gray-500">
                    <span className="text-sm font-normal">Прибытие:</span>{' '}
                    <span className="text-sm font-semibold">
                      {day_in?.toLocaleDateString()}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* мобилка */}
      <div className="block sm:hidden">
        <div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">
          <div className="flex items-center justify-between">
            <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>
              {user_request}
            </div>
            <div className="text-sm font-semibold">
              Тип посылки: <span className="text-orange">{cargo_type}</span>
            </div>
          </div>
          <div className="flex flex-row items-center justify-between mt-5 mb-2 gap-3">
            <div className="min-w-[64px] w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center shrink-0">
              <Image
                src={userImg}
                alt={username}
                width={52}
                height={52}
                className="rounded-full object-cover aspect-square w-[52px] h-[52px]"
              />
            </div>
            <div className="bg-[#f8f8f8] rounded-lg text-sm font-normal p-4 flex-1">
              {user_comment}
            </div>
          </div>
          <div className="text-gray-500 text-xs flex justify-end">
            Объявление № {id}
          </div>

          {user_request === 'Нужен перевозчик' ? (
            <span className="text-gray-500 pl-7 text-sm">Забрать из:</span>
          ) : (
            <span className="text-gray-500 pl-7 text-sm">Выезжаю из:</span>
          )}
          <div className="flex flex-row items-stretch mt-4 mb-2 gap-4">
            <div className="flex flex-col items-center h-[150px] relative">
              <div className="h-full w-[10px] flex items-center justify-center relative">
                <Image
                  src="/images/vectormob.png"
                  width={6}
                  height={100}
                  alt="route vector"
                  className="absolute h-[150px] w-auto"
                />
                <div className="absolute -top-[10px] w-4 h-4 rounded-full bg-white border-3 border-[#065bff] z-10" />
                <div className="absolute -bottom-[10px] w-4 h-4 rounded-full bg-white border-3 border-[#45c226] z-10" />
              </div>
            </div>
            <div className="flex-1 flex flex-col justify-between">
              <div className="flex items-center -mt-[14px]">
                <Image
                  src={country_from_icon}
                  width={26}
                  height={13}
                  alt={country_from_code}
                />
                <span className="text-gray-400 text-sm pr-2 pl-1">
                  {country_from_code}
                </span>
                <span className="text-base font-semibold">
                  {start_point} / {country_from}
                </span>
              </div>

              <div className="flex flex-col ">
                <div className="flex gap-4 items-center">
                  <span className="text-base">{moving_type}</span>
                  <Image
                    src={setMovingTypeIcon()}
                    width={15}
                    height={15}
                    alt="route vector"
                    className="w-[15px] h-[15px] object-contain"
                  />
                </div>
                <div className="w-[165px] h-[2px] bg-gray-200 my-2" />
                <div className="text-sm">
                  Дата доставки: {estimated_date.toLocaleDateString()}
                </div>
              </div>

              <div className="flex flex-col -mb-[14px]">
                {user_request === 'Нужен перевозчик' ? (
                  <div className="text-sm text-gray-500">Доставить в:</div>
                ) : (
                  <div className="text-sm text-gray-500">Прибываю в:</div>
                )}

                <div className="flex items-center">
                  <Image
                    src={country_to_icon}
                    width={26}
                    height={13}
                    alt={country_to_code}
                  />
                  <span className="text-gray-400 pr-2 pl-1">
                    {country_to_code}
                  </span>
                  <span className="text-base font-semibold">
                    {end_point} / {country_to}
                  </span>
                </div>
              </div>
            </div>
          </div>
          {user_request === 'Могу перевезти' && (
            <div className="text-sm text-gray-500 mt-3 ml-7">
              <span className="text-sm font-normal">Прибытие:</span>{' '}
              <span className="text-sm font-semibold">
                {day_in?.toLocaleDateString()}
              </span>
            </div>
          )}
        </div>
      </div>
    </>
  )
}

export default SearchCard