import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import Menu from '@/lib/auth/components/Menu'
import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
import ImageNext from 'next/image'
import { useRouter } from 'next/router'
import { useQuery } from 'react-query'
import _, { forEach } from 'lodash-contrib'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import Manifest from '@/lib/treckingAwb/component/Manifest'
import { useState } from 'react'
import Pagination from '@/core/components/elements/Pagination/Pagination'
import Link from 'next/link'
import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge'

const { listShipments } = require('../api/listShipment')

const Shipments = () => {
  const router = useRouter()
  const { q = '', page = 1 } = router.query
  const [paramStatus, setParamStatus] = useState(null)

  const limit = 15

  const query = {
    q: q,
    status: paramStatus,
    offset: (page - 1) * limit,
    limit
  }
  const [inputQuery, setInputQuery] = useState(q)
  const queryString = _.toQuery(query)

  const { data: shipments } = useQuery('shipments' + queryString, () =>
    listShipments({ query: queryString })
  )
  const [idAWB, setIdAWB] = useState(null)

  const pageCount = Math.ceil(shipments?.pickingTotal / limit)
  let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
  pageQuery = _.pickBy(pageQuery, _.identity)
  pageQuery = _.toQuery(pageQuery)

  const closePopup = () => {
    setIdAWB(null)
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    router.push(`${router.pathname}?q=${inputQuery}`)
  }

  const filterStatus = async (status) => {
    if (status === paramStatus) {
      setParamStatus(null)
    } else {
      setParamStatus(status)
    }
  }
  return (
    <>
      <MobileView>
        <div className='p-4 flex flex-col gap-y-4'>
          <div className='flex justify-between gap-x-1'>
            <CardStatus
              device={'mobile'}
              paramStatus={paramStatus}
              shipments={shipments}
              filterStatus={filterStatus}
            />
          </div>

          <form className='flex gap-x-3' onSubmit={handleSubmit}>
            <input
              type='text'
              className='form-input'
              placeholder='Cari No. Resi / No. PO '
              value={inputQuery}
              onChange={(e) => setInputQuery(e.target.value)}
            />
            <button className='btn-light bg-transparent px-3' type='submit'>
              <MagnifyingGlassIcon className='w-6' />
            </button>
          </form>

          {shipments?.pickings.map((shipment) => (
            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={shipment.id}>
              <div className='flex justify-between items-center mb-3'>
                <div className='text-caption-2 text-gray_r-11'>
                  <p>
                    Kurir :{' '}
                    <span className='text-gray_r-11 font-semibold'>
                      {shipment.carrierName || '-'}
                    </span>
                  </p>
                  <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p>
                </div>
                <div className='flex justify-between'>
                  {shipment?.status === 'completed' && (
                    <div className='bg-green-100 p-2 rounded '>
                      <p className='text-green-600 text-sm'>Pesanan Tiba</p>
                    </div>
                  )}
                  {shipment?.status === 'shipment' && (
                    <div className='bg-yellow-100 p-2 rounded '>
                      <p className='text-yellow-600 text-sm'>Sedang Dikirim</p>
                    </div>
                  )}
                  {shipment?.status === 'pending' && (
                    <div className='bg-red-100 p-2 rounded '>
                      <p className='text-red-600 text-sm'>Pending</p>
                    </div>
                  )}
                </div>
              </div>
              <hr />
              <div className='flex justify-between mt-2 items-center mb-5'>
                <div>
                  <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
                  <Link href={`/my/transactions/${shipment.saleOrder.id}`}>
                    <h2 className='text-danger-500 mt-1 mb-2'>{shipment.saleOrder.name}</h2>
                  </Link>
                  <span className='text-caption-2 text-gray_r-11'>{shipment.date}</span>
                </div>
                <div>
                  <button
                    onClick={() => setIdAWB(shipment.id)}
                    className='bg-red-600 p-2 border border-red-600 rounded text-white w-24'
                  >
                    {!shipment.delivered ? 'Lacak' : 'Histori'}
                  </button>
                </div>
              </div>
              <hr />
              <button
                onClick={() => setIdAWB(shipment.id)}
                className='flex items-center mt-1 gap-x-1 min-w-full'
              >
                <ImageNext src={`/images/BOX_DELIVERY_GREEN.svg`} width={20} height={20} />
                <p className='text-sm text-green-700 truncate'>
                  {shipment.lastManifest.description}
                </p>
                <p className='ml-auto'>{'>'}</p>
              </button>
            </div>
          ))}

          <Pagination
            pageCount={pageCount}
            currentPage={parseInt(page)}
            url={router.pathname + pageQuery}
            className='mt-2 mb-2'
          />
        </div>

        <Manifest idAWB={idAWB} closePopup={closePopup} />
      </MobileView>
      <DesktopView>
        <div className='container mx-auto flex py-10'>
          <div className='w-3/12 pr-4'>
            <Menu />
          </div>
          <div className='w-9/12'>
            <div className='p-4 bg-white border border-gray_r-6 rounded mb-2'>
              <h1 className='text-title-sm font-semibold'>Pengiriman</h1>
              <div
                class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50'
                role='alert'
              >
                <svg
                  class='flex-shrink-0 inline w-4 h-4 mr-3'
                  aria-hidden='true'
                  fill='currentColor'
                  viewBox='0 0 20 20'
                >
                  <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
                </svg>
                <div>
                  Lacak pengiriman untuk setiap transaksi anda semakin mudah di Indoteknik.com
                </div>
              </div>
              <div className='flex justify-between gap-x-5'>
                <CardStatus
                  device={'desktop'}
                  paramStatus={paramStatus}
                  shipments={shipments}
                  filterStatus={filterStatus}
                />
              </div>
            </div>
            <div className='p-4 bg-white border border-gray_r-6 rounded'>
              <div className='flex mb-6 items-center justify-between'>
                <h1 className='text-title-sm font-semibold'>Detail Pengiriman</h1>
                <form className='flex gap-x-2' onSubmit={handleSubmit}>
                  <input
                    type='text'
                    className='form-input'
                    placeholder='Cari No. Resi / No. PO '
                    value={inputQuery}
                    onChange={(e) => setInputQuery(e.target.value)}
                  />
                  <button className='btn-light bg-transparent px-3' type='submit'>
                    <MagnifyingGlassIcon className='w-6' />
                  </button>
                </form>
              </div>
              <table className='table-data'>
                <thead>
                  <tr>
                    <th>Tanggal</th>
                    <th>No. Resi</th>
                    <th>No. Pengiriman</th>
                    <th>Sales Order</th>
                    <th>Purchase Order</th>
                    <th>Expedisi</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {!shipments && (
                    <tr>
                      <td colSpan={7}>
                        <div className='flex justify-center my-2'>
                          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
                        </div>
                      </td>
                    </tr>
                  )}
                  {shipments && shipments?.pickings?.length == 0 && (
                    <tr>
                      <td colSpan={7}>Tidak ada transaksi</td>
                    </tr>
                  )}
                  {shipments?.pickings.map((shipment) => (
                    <tr key={shipment.id}>
                      <td>{shipment.date || '-'}</td>
                      <td>{shipment.trackingNumber || '-'}</td>
                      <td>{shipment.name || '-'}</td>
                      <td>{shipment.saleOrder.name || '-'}</td>
                      <td>{shipment.saleOrder.clientOrderRef || '-'}</td>
                      <td>{shipment.carrierName || '-'}</td>
                      <td>
                        <button
                          onClick={() => setIdAWB(shipment.id)}
                          className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-1 w-20'
                        >
                          Lacak
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <Pagination
                pageCount={pageCount}
                currentPage={parseInt(page)}
                url={router.pathname + pageQuery}
                className='mt-2 mb-2'
              />
            </div>
          </div>
        </div>
        <Manifest idAWB={idAWB} closePopup={closePopup} />
      </DesktopView>
    </>
  )
}

const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => {
  const status = [`pending`, `shipment`, `completed`]

  return (
    <>
      {status.map((value) => {
        const statusData = getStatusLabel(device, value, shipments)
        if (device === 'desktop') {
          return (
            <div
              key={value} // Gunakan 'value' sebagai 'key' jika mungkin
              className={`max-w-sm p-6 bg-white border rounded-lg shadow md:min-w-[268px] cursor-pointer hover:shadow-lg ${
                paramStatus === value ? 'border-red-600' : 'border-gray-200'
              }`}
              onClick={() => filterStatus(value)}
            >
              <h2 className='mb-2 text-lg font-bold tracking-tight'>{statusData.label}</h2>
              {statusData.image}
              <h1 className='text-xl font-bold'>
                {statusData.shipCount} <span className='text-sm'>Pesanan</span>
              </h1>
            </div>
          )
        } else {
          return (
            <div
              key={value}
              className={`flex justify-between items-center gap-x-1 pt-2 pb-2 pl-1 pr-1  bg-white border border-gray-200 rounded-lg shadow cursor-pointer ${
                paramStatus === value ? 'border-red-600' : 'border-gray-200'
              }`}
              onClick={() => filterStatus(value)}
            >
              {statusData.image}
              <h1 className='text-xs'>{statusData.label}</h1>
              <h1 className='text-xs '>
                {' '}
                <span className='truncate'>{statusData.shipCount}</span> {'>'}
              </h1>
            </div>
          )
        }
      })}
    </>
  )
}

const getStatusLabel = (device, status, shipments) => {
  let images = null
  switch (status) {
    case 'pending':
      if (device === 'desktop') {
        images = (
          <div className='bg-red-100 border border-red-200 rounded-sm p-2 w-20 h-[39px] mb-2'>
            <div>
              <ImageNext
                src='/images/BOX(1).svg'
                width={25}
                height={20}
                style={{ stroke: 'red' }}
              />
            </div>
          </div>
        )
      } else {
        images = (
          <div>
            <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
          </div>
        )
      }
      return {
        label: 'Pending',
        shipCount: shipments?.summary?.pendingCount,
        image: images
      }
    case 'shipment':
      if (device === 'desktop') {
        images = (
          <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'>
            <div>
              <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} />
            </div>
          </div>
        )
      } else {
        images = (
          <div>
            <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
          </div>
        )
      }
      return {
        label: 'Pengiriman',
        shipCount: shipments?.summary?.shipmentCount,
        image: images
      }
    case 'completed':
      if (device === 'desktop') {
        images = (
          <div className='bg-green-100 border border-green-200 rounded-sm p-1 w-20 mb-2'>
            <div>
              <ImageNext
                src='/images/open-box(1).svg'
                width={30}
                height={20}
                className='stroke-orange-600'
              />
            </div>
          </div>
        )
      } else {
        images = (
          <div>
            <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
          </div>
        )
      }
      return {
        label: 'Pesanan Tiba',
        shipCount: shipments?.summary?.completedCount,
        image: images
      }
    default:
      return 'Status Tidak Dikenal'
  }
}

export default Shipments