import { Field, Input, Label, Select } from '@headlessui/react'

import { SearchIcon } from '~/components/icons/search'
import { Pagination } from '~/components/ui/pagination'

import { USERS } from './data'

type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'

export const UsersPage = () => {
  const getStatusBadge = (status: TColorBadge) => {
    const statusColors = {
      Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
      Premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
      Pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
    }
    return statusColors[status] || 'bg-gray-200 text-gray-700'
  }

  return (
    <div className="relative">
      <div className="container mx-auto">
        <section className="mb-5 flex items-center justify-between">
          <h1 className="text-xl font-bold">User</h1>
        </section>
      </div>
      {/* filter section */}

      <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
        <div className="w-[400px]">
          <Field>
            <Label className="mb-2 block text-sm font-medium">Cari User</Label>
            <div className="relative">
              <Input
                type="text"
                placeholder="Cari Nama"
                className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
              />
              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                <SearchIcon className="h-5 w-5" />
              </div>
            </div>
          </Field>
        </div>

        <div className="w-[235px]">
          <Field>
            <Label className="mb-2 block text-sm font-medium">Status</Label>
            <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
              <option>Pilih Status</option>
              <option>Aktif</option>
              <option>Nonaktif</option>
            </Select>
          </Field>
        </div>
      </div>

      {/* table */}
      <div className="overflow-x-auto">
        <div className="rounded-lg bg-white px-6 py-8 shadow-sm">
          <h2 className="text-xl font-bold text-[#4C5CA0]">Daftar User</h2>
          <table className="min-w-full p-3">
            <thead className="my-5 border-b-3 border-[#C2C2C2]">
              <tr>
                <th className="p-3">No</th>
                <th>Tanggal Daftar</th>
                <th>Nama User</th>
                <th>Email</th>
                <th>Kategori</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {USERS.map((user, index) => (
                <tr
                  key={user.id}
                  className="border-b-1 border-gray-200 text-center"
                >
                  <td className="p-4">{index + 1}</td>
                  <td>{user.date}</td>
                  <td>
                    {user.name}
                    <div className="text-sm text-gray-500">
                      id: {user.idTransaction}
                    </div>
                  </td>
                  <td>{user.email}</td>
                  <td>{user.category}</td>
                  <td className="">
                    <span
                      className={`inline-block min-w-[100px] rounded-full px-2 py-1 text-sm ${getStatusBadge(user.status as TColorBadge)}`}
                    >
                      {user.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* pagination */}
        <div className="float-end mt-6">
          <Pagination
            currentPage={1}
            totalPages={5}
            onPageChange={() => {}}
          />
        </div>
      </div>
    </div>
  )
}