'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { Plus } from 'lucide-react'
import { toast } from 'sonner'
import { api, type PaginatedResponse, type User } from '@/lib/api'
import { DataTable } from '@/components/DataTable'
import { Button } from '@/components/ui/Button'
import { Badge } from '@/components/ui/Badge'
import { Select } from '@/components/ui/Select'

export function UsersPage() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const [search, setSearch] = useState('')
  const [status, setStatus] = useState('')
  const [page, setPage] = useState(1)

  const { data, isLoading } = useQuery({
    queryKey: ['users', search, status, page],
    queryFn: () =>
      api.get<PaginatedResponse<User>>('/users', {
        params: { search: search || undefined, status: status || undefined, page, per_page: 25 },
      }),
  })

  const disable = useMutation({
    mutationFn: (id: number) => api.delete(`/users/${id}`),
    onSuccess: () => {
      toast.success(t('users.messages.disabled'))
      queryClient.invalidateQueries({ queryKey: ['users'] })
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const rows = data?.data.data ?? []
  const meta = data?.data.meta

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="premium-heading text-2xl font-bold">{t('users.title')}</h1>
        <Link href="/users/new">
          <Button size="sm">
            <Plus size={14} />
            {t('users.create')}
          </Button>
        </Link>
      </div>

      <DataTable
        data={rows}
        loading={isLoading}
        emptyMessage={t('common.noResults')}
        onSearch={(q) => {
          setSearch(q)
          setPage(1)
        }}
        searchValue={search}
        searchPlaceholder={t('users.search')}
        toolbar={
          <Select
            value={status}
            onChange={(e) => {
              setStatus(e.target.value)
              setPage(1)
            }}
            options={[
              { value: '', label: t('common.allStatuses') },
              { value: 'active', label: t('users.status.active') },
              { value: 'disabled', label: t('users.status.disabled') },
              { value: 'pending', label: t('users.status.pending') },
            ]}
          />
        }
        pagination={meta}
        onPageChange={setPage}
        columns={[
          { key: 'name', header: t('users.name') },
          { key: 'email', header: t('users.email') },
          {
            key: 'roles',
            header: t('users.roles'),
            render: (r) => r.roles?.map((role) => t(`users.roleLabels.${role}`, role)).join(', '),
          },
          {
            key: 'status',
            header: t('common.status'),
            render: (r) => (
              <Badge variant={r.status === 'active' ? 'success' : 'muted'}>
                {t(`users.status.${r.status}`, r.status)}
              </Badge>
            ),
          },
          {
            key: 'actions',
            header: t('common.actions'),
            className: 'text-right',
            render: (r) => (
              <div className="flex justify-end gap-2">
                <Link
                  href={`/users/${r.id}/edit`}
                  className="rounded-lg px-2 py-1 text-xs font-semibold text-accent-600 hover:bg-[var(--premium-hover-bg)] dark:text-accent-400"
                >
                  {t('common.edit')}
                </Link>
                {r.status === 'active' && (
                  <button
                    type="button"
                    className="rounded-lg px-2 py-1 text-xs font-semibold text-red-500 hover:bg-red-500/10"
                    onClick={() => {
                      if (window.confirm(t('users.messages.disableConfirm'))) disable.mutate(r.id)
                    }}
                  >
                    {t('common.disable')}
                  </button>
                )}
              </div>
            ),
          },
        ]}
      />
    </div>
  )
}