import { mdiEye, mdiTrashCan } from '@mdi/js'
import React, { useState } from 'react'
import { useSampleClients } from '../hooks/sampleData'
import { Client } from '../interfaces'
import BaseButton from './BaseButton'
import BaseButtons from './BaseButtons'
import CardBoxModal from './CardBoxModal'
import UserAvatar from './UserAvatar'

const TableSampleClients = () => {
  const { clients } = useSampleClients()

  const perPage = 5
  const [currentPage, setCurrentPage] = useState(0)

  const clientsPaginated = clients.slice(perPage * currentPage, perPage * (currentPage + 1))
  const numPages = Math.max(1, Math.ceil(clients.length / perPage))
  const pagesList = Array.from({ length: numPages }, (_, index) => index)

  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
  const [isModalTrashActive, setIsModalTrashActive] = useState(false)

  const handleModalAction = () => {
    setIsModalInfoActive(false)
    setIsModalTrashActive(false)
  }

  return (
    <>
      <CardBoxModal
        title="Müşteri Özeti"
        buttonColor="info"
        buttonLabel="Tamam"
        isActive={isModalInfoActive}
        onConfirm={handleModalAction}
        onCancel={handleModalAction}
      >
        <p>Bu örnek pencere, seçilen müşteri için kısa bir özet göstermek amacıyla kullanılır.</p>
        <p>Gerçek projelerde bu alan detay görünümü veya hızlı aksiyon kartı ile değiştirilebilir.</p>
      </CardBoxModal>

      <CardBoxModal
        title="Lütfen onaylayın"
        buttonColor="danger"
        buttonLabel="Onayla"
        isActive={isModalTrashActive}
        onConfirm={handleModalAction}
        onCancel={handleModalAction}
      >
        <p>Bu örnek kaydı silmek istediğinize emin misiniz?</p>
      </CardBoxModal>

      <table>
        <thead>
          <tr>
            <th />
            <th>Ad Soyad</th>
            <th>Şirket</th>
            <th>Şehir</th>
            <th>İlerleme</th>
            <th>Oluşturulma</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {clientsPaginated.map((client: Client) => (
            <tr key={client.id}>
              <td className="border-b-0 lg:w-6 before:hidden">
                <UserAvatar username={client.name} className="mx-auto h-24 w-24 lg:h-6 lg:w-6" />
              </td>
              <td data-label="Ad Soyad">{client.name}</td>
              <td data-label="Şirket">{client.company}</td>
              <td data-label="Şehir">{client.city}</td>
              <td data-label="İlerleme" className="lg:w-32">
                <progress className="flex w-2/5 self-center lg:w-full" max="100" value={client.progress}>
                  {client.progress}
                </progress>
              </td>
              <td data-label="Oluşturulma" className="lg:w-1 whitespace-nowrap">
                <small className="text-gray-500 dark:text-slate-400">{client.created}</small>
              </td>
              <td className="before:hidden lg:w-1 whitespace-nowrap">
                <BaseButtons type="justify-start lg:justify-end" noWrap>
                  <BaseButton
                    color="info"
                    icon={mdiEye}
                    onClick={() => setIsModalInfoActive(true)}
                    small
                  />
                  <BaseButton
                    color="danger"
                    icon={mdiTrashCan}
                    onClick={() => setIsModalTrashActive(true)}
                    small
                  />
                </BaseButtons>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="border-t border-gray-100 p-3 dark:border-slate-800 lg:px-6">
        <div className="flex flex-col items-center justify-between py-3 md:flex-row md:py-0">
          <BaseButtons>
            {pagesList.map((page) => (
              <BaseButton
                key={page}
                active={page === currentPage}
                label={page + 1}
                color={page === currentPage ? 'lightDark' : 'whiteDark'}
                small
                onClick={() => setCurrentPage(page)}
              />
            ))}
          </BaseButtons>
          <small className="mt-6 md:mt-0">
            Sayfa {currentPage + 1} / {numPages}
          </small>
        </div>
      </div>
    </>
  )
}

export default TableSampleClients
