'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, FolderKanban } from 'lucide-react'
import { toast } from 'sonner'
import { api, type PaginatedResponse, type Partner, type Project } 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 ProjectForm = {
  name: string
  category?: string
  summary?: string
  partner_id?: string
  status: string
  start_date?: string
  deadline?: string
  no_deadline?: boolean
  budget?: string
  actual_spend?: string
  progress_manual?: string
}

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

export function ProjectFormPage() {
  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(
    () =>
      (['draft', 'active', 'on_hold', 'completed', 'cancelled'] as const).map((value) => ({
        value,
        label: t(`projects.status.${value}`),
      })),
    [t],
  )

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

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

  const {
    register,
    handleSubmit,
    reset,
    watch,
    formState: { isSubmitting },
  } = useForm<ProjectForm>({
    defaultValues: { status: 'draft', no_deadline: false },
  })

  const noDeadline = watch('no_deadline')

  useEffect(() => {
    const row = existing.data?.data.data
    if (!row) return
    reset({
      name: row.name,
      category: row.category ?? '',
      summary: row.summary ?? '',
      partner_id: row.partner_id ? String(row.partner_id) : '',
      status: row.status,
      start_date: toDateInput(row.start_date),
      deadline: toDateInput(row.deadline),
      no_deadline: Boolean(row.no_deadline),
      budget: row.budget != null ? String(row.budget) : '',
      actual_spend: row.actual_spend != null ? String(row.actual_spend) : '',
      progress_manual: row.progress_manual != null ? String(row.progress_manual) : '',
    })
  }, [existing.data, reset])

  const save = useMutation({
    mutationFn: (data: ProjectForm) => {
      const payload = {
        ...data,
        partner_id: data.partner_id || null,
        budget: data.budget === '' ? null : data.budget,
        actual_spend: data.actual_spend === '' ? 0 : data.actual_spend,
        progress_manual: data.progress_manual === '' ? null : data.progress_manual,
        deadline: data.no_deadline ? null : data.deadline || null,
        start_date: data.start_date || null,
      }
      return isEdit ? api.put(`/projects/${id}`, payload) : api.post('/projects', payload)
    },
    onSuccess: () => {
      toast.success(isEdit ? t('projects.messages.updated') : t('projects.messages.created'))
      queryClient.invalidateQueries({ queryKey: ['projects'] })
      router.push('/projects')
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const partnerOptions = [
    { value: '', label: t('projects.noPartner') },
    ...(partners.data?.data.data ?? []).map((p) => ({ value: String(p.id), label: p.name })),
  ]

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

      <Card elevated>
        <form className="space-y-5" onSubmit={handleSubmit((v) => save.mutate(v))}>
          <div className="mb-2 flex items-center gap-2 border-b border-[var(--premium-divider)] pb-3">
            <FolderKanban size={16} className="text-accent-500" />
            <h3 className="text-sm font-semibold">{t('projects.sections.details')}</h3>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <Input label={t('projects.name')} required {...register('name', { required: true })} />
            <Input label={t('projects.category')} {...register('category')} />
            <Select label={t('projects.partner')} options={partnerOptions} {...register('partner_id')} />
            <Select label={t('common.status')} options={statuses} {...register('status')} />
            <Input label={t('projects.startDate')} type="date" {...register('start_date')} />
            <Input
              label={t('projects.deadline')}
              type="date"
              disabled={noDeadline}
              {...register('deadline')}
            />
            <Input label={t('projects.budget')} type="number" step="0.01" {...register('budget')} />
            <Input
              label={t('projects.actualSpend')}
              type="number"
              step="0.01"
              {...register('actual_spend')}
            />
            <Input
              label={t('projects.progressManual')}
              type="number"
              min={0}
              max={100}
              {...register('progress_manual')}
            />
            <label className="flex items-center gap-2 pt-7 text-sm text-[var(--premium-muted-text)]">
              <input type="checkbox" {...register('no_deadline')} />
              {t('projects.noDeadline')}
            </label>
          </div>

          <div>
            <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
              {t('projects.summary')}
            </label>
            <textarea
              className="min-h-24 w-full rounded-xl border border-[var(--premium-border)] bg-[var(--premium-field-bg)] px-3 py-2 text-sm"
              {...register('summary')}
            />
          </div>

          {isEdit && existing.data?.data.data.sites && existing.data.data.data.sites.length > 0 && (
            <div className="rounded-2xl border border-[var(--premium-border)] p-4">
              <p className="mb-2 text-sm font-semibold">{t('projects.linkedSites')}</p>
              <ul className="space-y-1 text-sm text-[var(--premium-muted-text)]">
                {existing.data.data.data.sites.map((s) => (
                  <li key={s.id}>
                    {s.site_code} — {s.name} ({s.progress}%)
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div className="flex justify-end gap-2">
            <Link href="/projects">
              <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>
  )
}