'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, User, Briefcase, Wallet, Landmark } from 'lucide-react'
import { toast } from 'sonner'
import { api, 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 EmployeeForm = Omit<Partial<Employee>, 'id' | 'employee_code' | 'created_at' | 'updated_at' | 'hourly_rate' | 'daily_rate' | 'monthly_base_salary'> & {
  hourly_rate?: string | number
  daily_rate?: string | number
  monthly_base_salary?: string | number
}

function SectionHeader({ icon: Icon, title }: { icon: React.ElementType; title: string }) {
  return (
    <div className="mb-4 flex items-center gap-2 border-b border-[var(--premium-divider)] pb-3">
      <div className="premium-chip flex h-8 w-8 items-center justify-center rounded-xl">
        <Icon size={15} className="text-accent-600 dark:text-accent-400" />
      </div>
      <h3 className="text-sm font-semibold text-[var(--premium-text)]">{title}</h3>
    </div>
  )
}

function FormRow({ children }: { children: React.ReactNode }) {
  return <div className="grid gap-4 sm:grid-cols-2">{children}</div>
}

function FormRow3({ children }: { children: React.ReactNode }) {
  return <div className="grid gap-4 sm:grid-cols-3">{children}</div>
}

function FieldWrapper({ label, required, hint, children }: { label: string; required?: boolean; hint?: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-xs font-medium text-[var(--text-muted)]">
        {label}{required && <span className="ml-0.5 text-red-400">*</span>}
      </label>
      {children}
      {hint && <p className="text-[11px] text-[var(--text-muted)] opacity-70">{hint}</p>}
    </div>
  )
}

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

  const roles = useMemo(
    () => (['worker', 'engineer', 'site_manager', 'project_manager', 'finance', 'hr', 'admin', 'driver', 'foreman'] as const).map((value) => ({
      value,
      label: t(`employees.roles.${value}`),
    })),
    [t],
  )

  const employmentTypes = useMemo(
    () => (['full_time', 'part_time', 'contractor', 'intern'] as const).map((value) => ({
      value,
      label: t(`employees.employment_types.${value}`),
    })),
    [t],
  )

  const statuses = useMemo(
    () => (['active', 'inactive', 'on_leave', 'terminated'] as const).map((value) => ({
      value,
      label: t(`employees.statuses.${value}`),
    })),
    [t],
  )

  const genders = useMemo(
    () => (['', 'male', 'female', 'other'] as const).map((value) => ({
      value,
      label: t(`employees.gender_options.${value}`),
    })),
    [t],
  )

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<EmployeeForm>({
    defaultValues: {
      role: 'worker',
      employment_type: 'full_time',
      status: 'active',
    },
  })

  const { data: employeeData } = useQuery({
    queryKey: ['employee', id],
    queryFn: () => api.get<{ data: Employee }>(`/employees/${id}`),
    enabled: isEdit,
  })

  useEffect(() => {
    if (employeeData?.data?.data) {
      const e = employeeData.data.data
      reset({
        full_name: e.full_name,
        surname: (e as any).surname ?? '',
        fathers_name: (e as any).fathers_name ?? '',
        date_of_birth: (e as any).date_of_birth ?? '',
        gender: (e as any).gender ?? '',
        ssn_sin: (e as any).ssn_sin ?? '',
        passport_number: (e as any).passport_number ?? '',
        phone: e.phone ?? '',
        email: e.email ?? '',
        role: e.role ?? 'worker',
        department: e.department ?? '',
        employment_type: (e as any).employment_type ?? 'full_time',
        status: e.status ?? 'active',
        joining_date: (e as any).joining_date ?? '',
        hourly_rate: (e as any).hourly_rate ?? '',
        daily_rate: (e as any).daily_rate ?? '',
        monthly_base_salary: (e as any).monthly_base_salary ?? '',
        bank_name: (e as any).bank_name ?? '',
        account_number: (e as any).account_number ?? '',
        iban: (e as any).iban ?? '',
        swift: (e as any).swift ?? '',
      })
    }
  }, [employeeData, reset])

  const mutation = useMutation({
    mutationFn: (data: EmployeeForm) =>
      isEdit ? api.put(`/employees/${id}`, data) : api.post('/employees', data),
    onSuccess: () => {
      toast.success(isEdit ? t('employees.messages.updated') : t('employees.messages.created'))
      queryClient.invalidateQueries({ queryKey: ['employees'] })
      router.push('/employees')
    },
    onError: (err: any) => {
      const msg = err?.response?.data?.message || t('common.somethingWentWrong')
      toast.error(msg)
    },
  })

  const onSubmit = (data: EmployeeForm) => {
    const clean: Record<string, any> = {}
    for (const [k, v] of Object.entries(data)) {
      clean[k] = v === '' ? null : v
    }
    mutation.mutate(clean as EmployeeForm)
  }

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center gap-3">
        <Link href="/employees">
          <button type="button" className="premium-chip press-btn flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm text-[var(--premium-muted-text)] transition-colors hover:text-[var(--premium-text)]">
            <ArrowLeft size={15} />
            {t('common.back')}
          </button>
        </Link>
        <h1 className="premium-heading text-2xl font-bold">
          {isEdit ? t('employees.edit') : t('employees.create')}
        </h1>
        {isEdit && employeeData?.data?.data && (
          <span className="premium-chip rounded-full px-3 py-0.5 font-mono text-xs text-[var(--premium-label)]">
            {(employeeData.data.data as any).employee_code}
          </span>
        )}
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
        <div className="animate-fade-in-up stagger-1">
          <Card elevated>
            <SectionHeader icon={User} title={t('employees.sections.personal')} />
            <div className="space-y-4">
              <FormRow3>
                <FieldWrapper label={t('employees.fullName')} required>
                  <Input
                    {...register('full_name', { required: t('employees.validation.fullNameRequired') })}
                    placeholder={t('employees.placeholders.fullName')}
                  />
                  {errors.full_name && <p className="text-xs text-red-400">{errors.full_name.message}</p>}
                </FieldWrapper>
                <FieldWrapper label={t('employees.surname')}>
                  <Input {...register('surname' as any)} placeholder={t('employees.placeholders.surname')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.fathersName')}>
                  <Input {...register('fathers_name' as any)} placeholder={t('employees.placeholders.fathersName')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow3>
                <FieldWrapper label={t('employees.dateOfBirth')}>
                  <Input {...register('date_of_birth' as any)} type="date" />
                </FieldWrapper>
                <FieldWrapper label={t('employees.gender')}>
                  <Select {...register('gender' as any)} options={genders} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.ssnSin')} hint={t('employees.hints.ssnSin')}>
                  <Input {...register('ssn_sin' as any)} placeholder={t('employees.placeholders.ssnSin')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow>
                <FieldWrapper label={t('employees.passportNumber')}>
                  <Input {...register('passport_number' as any)} placeholder={t('employees.placeholders.passportNumber')} />
                </FieldWrapper>
              </FormRow>

              <FormRow>
                <FieldWrapper label={t('employees.phone')}>
                  <Input {...register('phone')} type="tel" placeholder={t('employees.placeholders.phone')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.email')}>
                  <Input {...register('email')} type="email" placeholder={t('employees.placeholders.email')} />
                </FieldWrapper>
              </FormRow>
            </div>
          </Card>
        </div>

        <div className="animate-fade-in-up stagger-2">
          <Card elevated>
            <SectionHeader icon={Briefcase} title={t('employees.sections.employment')} />
            <div className="space-y-4">
              <FormRow3>
                <FieldWrapper label={t('employees.role')} required>
                  <Select
                    {...register('role', { required: t('employees.validation.roleRequired') })}
                    options={roles}
                  />
                  {errors.role && <p className="text-xs text-red-400">{errors.role.message}</p>}
                </FieldWrapper>
                <FieldWrapper label={t('employees.department')}>
                  <Input {...register('department')} placeholder={t('employees.placeholders.department')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.joiningDate')}>
                  <Input {...register('joining_date' as any)} type="date" />
                </FieldWrapper>
              </FormRow3>

              <FormRow>
                <FieldWrapper label={t('employees.employmentType')} required>
                  <Select {...register('employment_type', { required: true })} options={employmentTypes} />
                </FieldWrapper>
                <FieldWrapper label={t('common.status')} required>
                  <Select {...register('status', { required: true })} options={statuses} />
                </FieldWrapper>
              </FormRow>
            </div>
          </Card>
        </div>

        <div className="animate-fade-in-up stagger-3">
          <Card elevated>
            <SectionHeader icon={Wallet} title={t('employees.sections.compensation')} />
            <div className="space-y-4">
              <FormRow3>
                <FieldWrapper label={t('employees.hourlyRate')} hint={t('employees.hints.hourlyRate')}>
                  <Input {...register('hourly_rate' as any)} type="number" step="0.01" min="0" placeholder={t('employees.placeholders.hourlyRate')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.dailyRate')}>
                  <Input {...register('daily_rate' as any)} type="number" step="0.01" min="0" placeholder={t('employees.placeholders.dailyRate')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.monthlyBaseSalary')}>
                  <Input {...register('monthly_base_salary' as any)} type="number" step="0.01" min="0" placeholder={t('employees.placeholders.monthlyBaseSalary')} />
                </FieldWrapper>
              </FormRow3>
            </div>
          </Card>
        </div>

        <div className="animate-fade-in-up stagger-4">
          <Card elevated>
            <SectionHeader icon={Landmark} title={t('employees.sections.banking')} />
            <div className="space-y-4">
              <FormRow>
                <FieldWrapper label={t('employees.bankName')}>
                  <Input {...register('bank_name' as any)} placeholder={t('employees.placeholders.bankName')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.accountNumber')}>
                  <Input {...register('account_number' as any)} placeholder={t('employees.placeholders.accountNumber')} />
                </FieldWrapper>
              </FormRow>
              <FormRow>
                <FieldWrapper label={t('employees.iban')}>
                  <Input {...register('iban' as any)} placeholder={t('employees.placeholders.iban')} />
                </FieldWrapper>
                <FieldWrapper label={t('employees.swift')}>
                  <Input {...register('swift' as any)} placeholder={t('employees.placeholders.swift')} />
                </FieldWrapper>
              </FormRow>
            </div>
          </Card>
        </div>

        <div className="animate-fade-in-up stagger-5 flex items-center justify-end gap-3 pb-4">
          <Link href="/employees">
            <Button type="button" variant="secondary">{t('common.cancel')}</Button>
          </Link>
          <Button type="submit" disabled={isSubmitting || mutation.isPending}>
            <Save size={15} />
            {isSubmitting || mutation.isPending
              ? t('common.saving')
              : isEdit
              ? t('common.saveChanges')
              : t('employees.createButton')}
          </Button>
        </div>
      </form>
    </div>
  )
}