'use client'

import { useEffect, useMemo, 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 } from 'lucide-react'
import { toast } from 'sonner'
import { api, type Contract, 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 FormValues = {
  title: string
  project_id: string
  site_id: string
  partner_id: string
  subcontractor_id: string
  contract_type: string
  status: string
  start_date: string
  end_date: string
  no_end_date: boolean
  total_value: string
  currency: string
  retention_percent: string
  contract_number: string
}

export function ContractFormPage() {
  const { t } = useTranslation()
  const params = useParams()
  const id = params?.id as string | undefined
  const isEdit = Boolean(id)
  const router = useRouter()
  const queryClient = useQueryClient()
  const [boqDesc, setBoqDesc] = useState('')
  const [boqQty, setBoqQty] = useState('1')
  const [boqPrice, setBoqPrice] = useState('0')
  const [milestoneTitle, setMilestoneTitle] = useState('')

  const { register, handleSubmit, reset, watch } = useForm<FormValues>({
    defaultValues: {
      title: '',
      project_id: '',
      site_id: '',
      partner_id: '',
      subcontractor_id: '',
      contract_type: 'main',
      status: 'draft',
      start_date: '',
      end_date: '',
      no_end_date: false,
      total_value: '',
      currency: 'EUR',
      retention_percent: '0',
      contract_number: '',
    },
  })

  const projectId = watch('project_id')

  const { data: contractData, refetch } = useQuery({
    queryKey: ['contract', id],
    queryFn: () => api.get<{ data: Contract }>(`/contracts/${id}`),
    enabled: isEdit,
  })

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

  const { data: partnersData } = useQuery({
    queryKey: ['partners-options'],
    queryFn: () => api.get<PaginatedResponse<Partner>>('/partners', { 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 c = contractData?.data?.data
    if (!c) return
    reset({
      title: c.title,
      project_id: String(c.project_id ?? ''),
      site_id: c.site_id ? String(c.site_id) : '',
      partner_id: c.partner_id ? String(c.partner_id) : '',
      subcontractor_id: c.subcontractor_id ? String(c.subcontractor_id) : '',
      contract_type: c.contract_type,
      status: c.status,
      start_date: c.start_date?.slice(0, 10) ?? '',
      end_date: c.end_date?.slice(0, 10) ?? '',
      no_end_date: Boolean(c.no_end_date),
      total_value: c.total_value != null ? String(c.total_value) : '',
      currency: c.currency ?? 'EUR',
      retention_percent: String(c.retention_percent ?? 0),
      contract_number: c.contract_number ?? '',
    })
  }, [contractData, reset])

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

  const addBoq = useMutation({
    mutationFn: () =>
      api.post(`/contracts/${id}/boq-items`, {
        description: boqDesc,
        quantity: Number(boqQty) || 0,
        client_unit_price: Number(boqPrice) || 0,
      }),
    onSuccess: () => {
      toast.success(t('contracts.messages.boqAdded'))
      setBoqDesc('')
      refetch()
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const addMilestone = useMutation({
    mutationFn: () => api.post(`/contracts/${id}/milestones`, { title: milestoneTitle }),
    onSuccess: () => {
      toast.success(t('contracts.messages.milestoneAdded'))
      setMilestoneTitle('')
      refetch()
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const projectOptions = useMemo(
    () => [
      { value: '', label: t('contracts.selectProject') },
      ...(projectsData?.data.data ?? []).map((p) => ({
        value: String(p.id),
        label: `${p.project_code} — ${p.name}`,
      })),
    ],
    [projectsData, t],
  )

  const partnerOptions = useMemo(
    () => [
      { value: '', label: '—' },
      ...(partnersData?.data.data ?? []).map((p) => ({
        value: String(p.id),
        label: p.name,
      })),
    ],
    [partnersData],
  )

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

  const onSubmit = (data: FormValues) => {
    mutation.mutate({
      title: data.title,
      project_id: Number(data.project_id),
      site_id: data.site_id ? Number(data.site_id) : null,
      partner_id: data.partner_id ? Number(data.partner_id) : null,
      subcontractor_id: data.subcontractor_id ? Number(data.subcontractor_id) : null,
      contract_type: data.contract_type,
      status: data.status,
      start_date: data.start_date || null,
      end_date: data.end_date || null,
      no_end_date: data.no_end_date,
      total_value: data.total_value === '' ? null : Number(data.total_value),
      currency: data.currency || 'EUR',
      retention_percent: Number(data.retention_percent) || 0,
      contract_number: data.contract_number || undefined,
    })
  }

  const contract = contractData?.data?.data

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center gap-3">
        <Link href="/contracts">
          <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)]"
          >
            <ArrowLeft size={15} />
            {t('common.back')}
          </button>
        </Link>
        <h1 className="premium-heading text-2xl font-bold">
          {isEdit ? t('contracts.edit') : t('contracts.create')}
        </h1>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
        <Card elevated>
          <div className="grid gap-4 sm:grid-cols-2">
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.titleField')} *
              </label>
              <Input {...register('title', { required: true })} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.contractNumber')}
              </label>
              <Input {...register('contract_number')} placeholder="Auto" />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.project')} *
              </label>
              <Select {...register('project_id', { required: true })} options={projectOptions} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.site')}
              </label>
              <Select {...register('site_id')} options={siteOptions} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.partner')}
              </label>
              <Select {...register('partner_id')} options={partnerOptions} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.subcontractor')}
              </label>
              <Select {...register('subcontractor_id')} options={partnerOptions} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.type')}
              </label>
              <Select
                {...register('contract_type')}
                options={[
                  { value: 'main', label: t('contracts.type_options.main') },
                  { value: 'subcontract', label: t('contracts.type_options.subcontract') },
                ]}
              />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('common.status')}
              </label>
              <Select
                {...register('status')}
                options={(['draft', 'active', 'expired', 'terminated'] as const).map((v) => ({
                  value: v,
                  label: t(`contracts.status.${v}`),
                }))}
              />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.startDate')}
              </label>
              <Input type="date" {...register('start_date')} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.endDate')}
              </label>
              <Input type="date" {...register('end_date')} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.totalValue')}
              </label>
              <Input type="number" step="0.01" {...register('total_value')} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.retention')}
              </label>
              <Input type="number" step="0.01" {...register('retention_percent')} />
            </div>
            <div>
              <label className="mb-1.5 block text-xs font-medium text-[var(--text-muted)]">
                {t('contracts.currency')}
              </label>
              <Input {...register('currency')} />
            </div>
          </div>
          <div className="mt-5 flex justify-end gap-3">
            <Link href="/contracts">
              <Button type="button" variant="secondary">
                {t('common.cancel')}
              </Button>
            </Link>
            <Button type="submit" disabled={mutation.isPending}>
              <Save size={15} />
              {mutation.isPending ? t('common.saving') : t('common.saveChanges')}
            </Button>
          </div>
        </Card>
      </form>

      {isEdit && contract && (
        <>
          <Card elevated>
            <h3 className="mb-3 text-sm font-semibold">{t('contracts.boq')}</h3>
            <div className="mb-3 space-y-2">
              {(contract.boq_items ?? []).map((b) => (
                <div
                  key={b.id}
                  className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-[var(--premium-divider)] px-3 py-2 text-sm"
                >
                  <span>
                    <span className="font-mono text-xs text-[var(--text-muted)]">
                      {b.item_code || `#${b.id}`}
                    </span>{' '}
                    {b.description}
                  </span>
                  <span className="text-[var(--text-muted)]">
                    {b.quantity} × {b.client_unit_price}
                  </span>
                </div>
              ))}
            </div>
            <div className="flex flex-wrap gap-2">
              <Input
                value={boqDesc}
                onChange={(e) => setBoqDesc(e.target.value)}
                placeholder={t('contracts.boqDescription')}
                className="min-w-[200px] flex-1"
              />
              <Input
                value={boqQty}
                onChange={(e) => setBoqQty(e.target.value)}
                type="number"
                placeholder="Qty"
                className="w-24"
              />
              <Input
                value={boqPrice}
                onChange={(e) => setBoqPrice(e.target.value)}
                type="number"
                placeholder="Price"
                className="w-28"
              />
              <Button
                type="button"
                size="sm"
                disabled={!boqDesc || addBoq.isPending}
                onClick={() => addBoq.mutate()}
              >
                <Plus size={14} />
                {t('contracts.addBoq')}
              </Button>
            </div>
          </Card>

          <Card elevated>
            <h3 className="mb-3 text-sm font-semibold">{t('contracts.milestones')}</h3>
            <div className="mb-3 space-y-2">
              {(contract.milestones ?? []).map((m) => (
                <div
                  key={m.id}
                  className="rounded-xl border border-[var(--premium-divider)] px-3 py-2 text-sm"
                >
                  {m.title}{' '}
                  <span className="text-[var(--text-muted)]">({m.status})</span>
                </div>
              ))}
            </div>
            <div className="flex flex-wrap gap-2">
              <Input
                value={milestoneTitle}
                onChange={(e) => setMilestoneTitle(e.target.value)}
                placeholder={t('contracts.milestoneTitle')}
                className="min-w-[200px] flex-1"
              />
              <Button
                type="button"
                size="sm"
                disabled={!milestoneTitle || addMilestone.isPending}
                onClick={() => addMilestone.mutate()}
              >
                <Plus size={14} />
                {t('contracts.addMilestone')}
              </Button>
            </div>
          </Card>
        </>
      )}
    </div>
  )
}