'use client'

import { useEffect, useState } 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, Plus, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
import {
  api,
  type Order,
  type PaginatedResponse,
  type Project,
  type Partner,
  type Site,
} 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 LineDraft = { description: string; quantity: string; unit_price: string }

type FormValues = {
  title: string
  order_type: string
  partner_id: string
  project_id: string
  site_id: string
  delivery_date: string
  currency: string
  notes: string
}

export function OrderFormPage() {
  const { t } = useTranslation()
  const params = useParams()
  const id = params?.id as string | undefined
  const isEdit = Boolean(id)
  const router = useRouter()
  const queryClient = useQueryClient()
  const [lines, setLines] = useState<LineDraft[]>([
    { description: '', quantity: '1', unit_price: '0' },
  ])

  const { register, handleSubmit, reset, watch } = useForm<FormValues>({
    defaultValues: {
      title: '',
      order_type: 'sales',
      partner_id: '',
      project_id: '',
      site_id: '',
      delivery_date: '',
      currency: 'EUR',
      notes: '',
    },
  })

  const projectId = watch('project_id')

  const { data: orderData } = useQuery({
    queryKey: ['order', id],
    queryFn: () => api.get<{ data: Order }>(`/orders/${id}`),
    enabled: isEdit,
  })

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

  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),
  })

  useEffect(() => {
    const o = orderData?.data?.data
    if (!o) return
    reset({
      title: o.title,
      order_type: o.order_type,
      partner_id: o.partner_id ? String(o.partner_id) : '',
      project_id: o.project_id ? String(o.project_id) : '',
      site_id: o.site_id ? String(o.site_id) : '',
      delivery_date: o.delivery_date?.slice(0, 10) ?? '',
      currency: o.currency || 'EUR',
      notes: o.notes ?? '',
    })
    if (o.lines?.length) {
      setLines(
        o.lines.map((l) => ({
          description: l.description,
          quantity: String(l.quantity),
          unit_price: String(l.unit_price),
        })),
      )
    }
  }, [orderData, reset])

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

  const onSubmit = (values: FormValues) => {
    save.mutate({
      ...values,
      partner_id: values.partner_id ? Number(values.partner_id) : null,
      project_id: values.project_id ? Number(values.project_id) : null,
      site_id: values.site_id ? Number(values.site_id) : null,
      lines: lines
        .filter((l) => l.description.trim())
        .map((l) => ({
          description: l.description,
          quantity: Number(l.quantity || 0),
          unit_price: Number(l.unit_price || 0),
        })),
    })
  }

  const partners = partnersData?.data.data ?? []
  const projects = projectsData?.data.data ?? []
  const sites = sitesData?.data.data ?? []

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex items-center gap-3">
        <Link href="/orders">
          <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('orders.edit') : t('orders.create')}
        </h1>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <Card elevated>
          <div className="grid gap-4 sm:grid-cols-2">
            <Input label={t('orders.titleField')} {...register('title', { required: true })} />
            <Select
              label={t('orders.type')}
              {...register('order_type')}
              options={['sales', 'purchase', 'site'].map((value) => ({
                value,
                label: t(`orders.type_options.${value}`),
              }))}
            />
            <Select
              label={t('orders.partner')}
              {...register('partner_id')}
              options={[
                { value: '', label: t('orders.selectPartner') },
                ...partners.map((p) => ({ value: String(p.id), label: p.name })),
              ]}
            />
            <Select
              label={t('orders.project')}
              {...register('project_id')}
              options={[
                { value: '', label: t('orders.selectProject') },
                ...projects.map((p) => ({ value: String(p.id), label: p.name })),
              ]}
            />
            <Select
              label={t('orders.site')}
              {...register('site_id')}
              options={[
                { value: '', label: t('orders.selectSite') },
                ...sites.map((s) => ({ value: String(s.id), label: s.name })),
              ]}
            />
            <Input type="date" label={t('orders.deliveryDate')} {...register('delivery_date')} />
            <Input label={t('orders.currency')} {...register('currency')} />
            <Input label={t('orders.notes')} {...register('notes')} />
          </div>
        </Card>

        <Card elevated>
          <div className="mb-3 flex items-center justify-between">
            <h3 className="text-sm font-semibold">{t('orders.lines')}</h3>
            <Button
              type="button"
              size="sm"
              variant="secondary"
              onClick={() =>
                setLines((prev) => [...prev, { description: '', quantity: '1', unit_price: '0' }])
              }
            >
              <Plus size={14} />
              {t('orders.addLine')}
            </Button>
          </div>
          <div className="space-y-2">
            {lines.map((line, idx) => (
              <div key={idx} className="grid gap-2 sm:grid-cols-12">
                <div className="sm:col-span-6">
                  <Input
                    value={line.description}
                    onChange={(e) =>
                      setLines((prev) =>
                        prev.map((l, i) => (i === idx ? { ...l, description: e.target.value } : l)),
                      )
                    }
                  />
                </div>
                <div className="sm:col-span-2">
                  <Input
                    type="number"
                    value={line.quantity}
                    onChange={(e) =>
                      setLines((prev) =>
                        prev.map((l, i) => (i === idx ? { ...l, quantity: e.target.value } : l)),
                      )
                    }
                  />
                </div>
                <div className="sm:col-span-3">
                  <Input
                    type="number"
                    step="0.01"
                    value={line.unit_price}
                    onChange={(e) =>
                      setLines((prev) =>
                        prev.map((l, i) => (i === idx ? { ...l, unit_price: e.target.value } : l)),
                      )
                    }
                  />
                </div>
                <div className="flex items-center sm:col-span-1">
                  <button
                    type="button"
                    className="text-red-600"
                    onClick={() => setLines((prev) => prev.filter((_, i) => i !== idx))}
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Button type="submit" disabled={save.isPending}>
          <Save size={14} />
          {t('common.save')}
        </Button>
      </form>
    </div>
  )
}