'use client'

import { useEffect } 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 DailyActivityLog,
  type PaginatedResponse,
  type Project,
  type Site,
  type Employee,
} 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 FormValues = {
  project_id: string
  site_id: string
  activity_date: string
  category: string
  description: string
  quantity: string
  unit_cost: string
  employee_id: string
}

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

  const { register, handleSubmit, reset, watch } = useForm<FormValues>({
    defaultValues: {
      project_id: '',
      site_id: '',
      activity_date: new Date().toISOString().slice(0, 10),
      category: 'labor',
      description: '',
      quantity: '',
      unit_cost: '',
      employee_id: '',
    },
  })

  const projectId = watch('project_id')

  const { data: logData } = useQuery({
    queryKey: ['daily-op', id],
    queryFn: () => api.get<{ data: DailyActivityLog }>(`/daily-activity-logs/${id}`),
    enabled: isEdit,
  })

  const { data: projectsData } = useQuery({
    queryKey: ['projects-options'],
    queryFn: () => api.get<PaginatedResponse<Project>>('/projects', { params: { per_page: 200 } }),
  })

  const { data: sitesData } = useQuery({
    queryKey: ['sites-options', projectId],
    queryFn: () =>
      api.get<PaginatedResponse<Site>>('/sites', {
        params: { project_id: projectId || undefined, per_page: 200 },
      }),
    enabled: Boolean(projectId),
  })

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

  useEffect(() => {
    const row = logData?.data?.data
    if (!row) return
    reset({
      project_id: String(row.project_id),
      site_id: String(row.site_id),
      activity_date: row.activity_date?.slice(0, 10) ?? '',
      category: row.category,
      description: row.description ?? '',
      quantity: row.quantity != null ? String(row.quantity) : '',
      unit_cost: row.unit_cost != null ? String(row.unit_cost) : '',
      employee_id: row.employee_id ? String(row.employee_id) : '',
    })
  }, [logData, reset])

  const save = useMutation({
    mutationFn: (payload: Record<string, unknown>) =>
      isEdit
        ? api.put(`/daily-activity-logs/${id}`, payload)
        : api.post('/daily-activity-logs', payload),
    onSuccess: () => {
      toast.success(isEdit ? t('dailyOps.messages.updated') : t('dailyOps.messages.created'))
      queryClient.invalidateQueries({ queryKey: ['daily-ops'] })
      router.push('/daily-ops')
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const onSubmit = (values: FormValues) => {
    save.mutate({
      project_id: Number(values.project_id),
      site_id: Number(values.site_id),
      activity_date: values.activity_date,
      category: values.category,
      description: values.description || null,
      quantity: values.quantity ? Number(values.quantity) : null,
      unit_cost: values.unit_cost ? Number(values.unit_cost) : null,
      employee_id: values.employee_id ? Number(values.employee_id) : null,
    })
  }

  const projects = projectsData?.data.data ?? []
  const sites = sitesData?.data.data ?? []
  const employees = employeesData?.data.data ?? []

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex items-center gap-3">
        <Link href="/daily-ops">
          <button
            type="button"
            className="premium-chip press-btn flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm"
          >
            <ArrowLeft size={15} />
            {t('common.back')}
          </button>
        </Link>
        <h1 className="premium-heading text-2xl font-bold">
          {isEdit ? t('dailyOps.edit') : t('dailyOps.create')}
        </h1>
      </div>

      <form onSubmit={handleSubmit(onSubmit)}>
        <Card elevated>
          <div className="grid gap-4 sm:grid-cols-2">
            <Select
              label={t('dailyOps.project')}
              {...register('project_id', { required: true })}
              options={[
                { value: '', label: t('dailyOps.selectProject') },
                ...projects.map((p) => ({ value: String(p.id), label: p.name })),
              ]}
            />
            <Select
              label={t('dailyOps.site')}
              {...register('site_id', { required: true })}
              options={[
                { value: '', label: t('dailyOps.selectSite') },
                ...sites.map((s) => ({ value: String(s.id), label: s.name })),
              ]}
            />
            <Input
              type="date"
              label={t('dailyOps.date')}
              {...register('activity_date', { required: true })}
            />
            <Select
              label={t('dailyOps.category')}
              {...register('category')}
              options={['materials', 'labor', 'machinery', 'expenses', 'revenue'].map((value) => ({
                value,
                label: t(`dailyOps.categories.${value}`),
              }))}
            />
            <Input label={t('dailyOps.description')} {...register('description')} />
            <Input type="number" step="0.01" label={t('dailyOps.quantity')} {...register('quantity')} />
            <Input type="number" step="0.01" label={t('dailyOps.unitCost')} {...register('unit_cost')} />
            <Select
              label={t('dailyOps.employee')}
              {...register('employee_id')}
              options={[
                { value: '', label: '—' },
                ...employees.map((e) => ({ value: String(e.id), label: e.full_name })),
              ]}
            />
          </div>
          <div className="mt-4">
            <Button type="submit" disabled={save.isPending}>
              <Save size={14} />
              {t('common.save')}
            </Button>
          </div>
        </Card>
      </form>
    </div>
  )
}