'use client'

import { useEffect, useMemo } from 'react'
import Link from 'next/link'
import { useRouter, useParams } from 'next/navigation'
import { useForm } from 'react-hook-form'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Save } from 'lucide-react'
import { toast } from 'sonner'
import { api, type User } from '@/lib/api'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Select } from '@/components/ui/Select'
import { Card } from '@/components/ui/Card'

type UserForm = {
  name: string
  email: string
  phone?: string
  status: string
  role: string
  password?: string
}

const ROLE_OPTIONS = ['admin', 'project_manager', 'site_manager', 'hr', 'finance'] as const

export function UserFormPage() {
  const { t } = useTranslation()
  const params = useParams()
  const id = params?.id as string | undefined
  const isEdit = Boolean(id)
  const router = useRouter()
  const queryClient = useQueryClient()

  const existing = useQuery({
    queryKey: ['user', id],
    queryFn: () => api.get<{ data: User }>(`/users/${id}`),
    enabled: isEdit,
  })

  const {
    register,
    handleSubmit,
    reset,
    formState: { isSubmitting },
  } = useForm<UserForm>({
    defaultValues: { status: 'active', role: 'project_manager' },
  })

  useEffect(() => {
    const row = existing.data?.data.data
    if (!row) return
    reset({
      name: row.name,
      email: row.email,
      phone: row.phone ?? '',
      status: row.status,
      role: row.roles?.[0] ?? 'project_manager',
      password: '',
    })
  }, [existing.data, reset])

  const save = useMutation({
    mutationFn: (data: UserForm) => {
      const payload: Record<string, unknown> = {
        name: data.name,
        email: data.email,
        phone: data.phone || null,
        status: data.status,
        roles: [data.role],
      }
      if (data.password) payload.password = data.password
      if (!isEdit) {
        if (!data.password) throw new Error('password required')
        return api.post('/users', { ...payload, password: data.password })
      }
      return api.put(`/users/${id}`, payload)
    },
    onSuccess: () => {
      toast.success(isEdit ? t('users.messages.updated') : t('users.messages.created'))
      queryClient.invalidateQueries({ queryKey: ['users'] })
      router.push('/users')
    },
    onError: (err: unknown) => {
      const msg =
        (err as { response?: { data?: { message?: string | string[] } } })?.response?.data
          ?.message || t('common.somethingWentWrong')
      toast.error(Array.isArray(msg) ? msg.join(', ') : String(msg))
    },
  })

  const roles = useMemo(
    () =>
      ROLE_OPTIONS.map((value) => ({
        value,
        label: t(`users.roleLabels.${value}`),
      })),
    [t],
  )

  return (
    <div className="mx-auto max-w-2xl space-y-5">
      <div className="flex items-center gap-3">
        <Link href="/users">
          <Button variant="secondary" size="sm">
            <ArrowLeft size={14} />
            {t('common.back')}
          </Button>
        </Link>
        <h1 className="premium-heading text-2xl font-bold">
          {isEdit ? t('users.edit') : t('users.create')}
        </h1>
      </div>

      <Card elevated>
        <form className="space-y-4" onSubmit={handleSubmit((v) => save.mutate(v))}>
          <div className="grid gap-4 sm:grid-cols-2">
            <Input label={t('users.name')} required {...register('name', { required: true })} />
            <Input
              label={t('users.email')}
              type="email"
              required
              {...register('email', { required: true })}
            />
            <Input label={t('users.phone')} {...register('phone')} />
            <Select
              label={t('users.role')}
              options={roles}
              {...register('role', { required: true })}
            />
            <Select
              label={t('common.status')}
              options={[
                { value: 'active', label: t('users.status.active') },
                { value: 'disabled', label: t('users.status.disabled') },
                { value: 'pending', label: t('users.status.pending') },
              ]}
              {...register('status')}
            />
            <Input
              label={isEdit ? t('users.newPassword') : t('users.password')}
              type="password"
              required={!isEdit}
              {...register('password', { required: !isEdit, minLength: 6 })}
            />
          </div>
          <p className="text-xs text-[var(--premium-muted-text)]">{t('users.passwordHint')}</p>
          <div className="flex justify-end gap-2">
            <Link href="/users">
              <Button type="button" variant="secondary">
                {t('common.cancel')}
              </Button>
            </Link>
            <Button type="submit" disabled={isSubmitting || save.isPending}>
              <Save size={14} />
              {isSubmitting || save.isPending ? t('common.saving') : t('common.save')}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  )
}