'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 PaginatedResponse,
  type Site,
  type Employee,
  type Attendance,
} 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 AttendanceForm = {
  site_id: string
  employee_id: string
  attendance_date: string
  status: string
  check_in_at?: string
  check_out_at?: string
  hours_worked?: string
  notes?: string
}

function toDateInput(value?: string | null) {
  if (!value) return ''
  return String(value).slice(0, 10)
}

function toDateTimeLocal(value?: string | null) {
  if (!value) return ''
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return ''
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
}

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

  const statuses = useMemo(
    () =>
      (['present', 'absent', 'paid_day_off', 'unpaid_day_off'] as const).map(
        (value) => ({
          value,
          label: t(`attendances.status.${value}`),
        }),
      ),
    [t],
  )

  const sites = useQuery({
    queryKey: ['sites-options'],
    queryFn: () => api.get<PaginatedResponse<Site>>('/sites', { params: { per_page: 100 } }),
  })

  const employees = useQuery({
    queryKey: ['employees-options'],
    queryFn: () =>
      api.get<PaginatedResponse<Employee>>('/employees', { params: { per_page: 100, status: 'active' } }),
  })

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

  const {
    register,
    handleSubmit,
    reset,
    formState: { isSubmitting },
  } = useForm<AttendanceForm>({
    defaultValues: {
      status: 'present',
      attendance_date: new Date().toISOString().slice(0, 10),
    },
  })

  useEffect(() => {
    const row = existing.data?.data.data
    if (!row) return
    reset({
      site_id: String(row.site_id),
      employee_id: String(row.employee_id),
      attendance_date: toDateInput(row.attendance_date),
      status: row.status,
      check_in_at: toDateTimeLocal(row.check_in_at),
      check_out_at: toDateTimeLocal(row.check_out_at),
      hours_worked: row.hours_worked != null ? String(row.hours_worked) : '',
      notes: row.notes ?? '',
    })
  }, [existing.data, reset])

  const save = useMutation({
    mutationFn: (data: AttendanceForm) => {
      const payload = {
        ...data,
        hours_worked: data.hours_worked === '' ? null : data.hours_worked,
        check_in_at: data.check_in_at || null,
        check_out_at: data.check_out_at || null,
        manual_entry: true,
      }
      return isEdit ? api.put(`/attendances/${id}`, payload) : api.post('/attendances', payload)
    },
    onSuccess: () => {
      toast.success(isEdit ? t('attendances.messages.updated') : t('attendances.messages.created'))
      queryClient.invalidateQueries({ queryKey: ['attendances'] })
      router.push('/attendances')
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const siteOptions = [
    { value: '', label: t('attendances.selectSite') },
    ...(sites.data?.data.data ?? []).map((s) => ({
      value: String(s.id),
      label: `${s.site_code} — ${s.name}`,
    })),
  ]

  const employeeOptions = [
    { value: '', label: t('attendances.selectEmployee') },
    ...(employees.data?.data.data ?? []).map((e) => ({
      value: String(e.id),
      label: e.full_name,
    })),
  ]

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

      <Card elevated>
        <form className="space-y-5" onSubmit={handleSubmit((v) => save.mutate(v))}>
          <div className="grid gap-4 sm:grid-cols-2">
            <Select
              label={t('attendances.site')}
              options={siteOptions}
              {...register('site_id', { required: true })}
            />
            <Select
              label={t('attendances.employee')}
              options={employeeOptions}
              {...register('employee_id', { required: true })}
            />
            <Input
              label={t('attendances.date')}
              type="date"
              required
              {...register('attendance_date', { required: true })}
            />
            <Select label={t('common.status')} options={statuses} {...register('status')} />
            <Input label={t('attendances.checkIn')} type="datetime-local" {...register('check_in_at')} />
            <Input
              label={t('attendances.checkOut')}
              type="datetime-local"
              {...register('check_out_at')}
            />
            <Input
              label={t('attendances.hours')}
              type="number"
              step="0.25"
              {...register('hours_worked')}
            />
          </div>
          <div>
            <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
              {t('attendances.notes')}
            </label>
            <textarea
              className="min-h-20 w-full rounded-xl border border-[var(--premium-border)] bg-[var(--premium-field-bg)] px-3 py-2 text-sm"
              {...register('notes')}
            />
          </div>
          <div className="flex justify-end gap-2">
            <Link href="/attendances">
              <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>
  )
}