'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useMutation } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { ArrowLeft } from 'lucide-react'
import { toast } from 'sonner'
import { api } from '@/lib/api'
import { Button } from '@/components/ui/Button'
import { Card } from '@/components/ui/Card'
import { Input } from '@/components/ui/Input'
import { Select } from '@/components/ui/Select'

export function AssetFormPage() {
  const { t } = useTranslation()
  const router = useRouter()
  const [form, setForm] = useState({
    name: '',
    asset_code: '',
    category: '',
    status: 'active',
    purchase_date: '',
    purchase_value: '',
    useful_life_months: '',
    salvage_value: '0',
    notes: '',
  })

  const create = useMutation({
    mutationFn: () =>
      api.post('/assets', {
        ...form,
        purchase_value: form.purchase_value === '' ? undefined : Number(form.purchase_value),
        useful_life_months:
          form.useful_life_months === '' ? undefined : Number(form.useful_life_months),
        salvage_value: form.salvage_value === '' ? 0 : Number(form.salvage_value),
        asset_code: form.asset_code || undefined,
        purchase_date: form.purchase_date || undefined,
        notes: form.notes || undefined,
      }),
    onSuccess: (res) => {
      toast.success(t('assets.messages.created'))
      const id = (res.data as { data?: { id?: number } })?.data?.id
      router.push(id ? `/assets/${id}` : '/assets')
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const set = (key: string, value: string) => setForm((f) => ({ ...f, [key]: value }))

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

      <Card elevated className="grid gap-4 sm:grid-cols-2">
        <Input label={t('assets.name')} value={form.name} onChange={(e) => set('name', e.target.value)} />
        <Input
          label={t('common.code')}
          value={form.asset_code}
          onChange={(e) => set('asset_code', e.target.value)}
        />
        <Input
          label={t('assets.category')}
          value={form.category}
          onChange={(e) => set('category', e.target.value)}
        />
        <Select
          label={t('common.status')}
          value={form.status}
          onChange={(e) => set('status', e.target.value)}
          options={['active', 'maintenance', 'disposed', 'sold'].map((value) => ({
            value,
            label: t(`assets.status.${value}`, value),
          }))}
        />
        <Input
          label={t('assets.purchaseDate')}
          type="date"
          value={form.purchase_date}
          onChange={(e) => set('purchase_date', e.target.value)}
        />
        <Input
          label={t('assets.purchaseValue')}
          value={form.purchase_value}
          onChange={(e) => set('purchase_value', e.target.value)}
        />
        <Input
          label={t('assets.usefulLifeMonths')}
          value={form.useful_life_months}
          onChange={(e) => set('useful_life_months', e.target.value)}
        />
        <Input
          label={t('assets.salvageValue')}
          value={form.salvage_value}
          onChange={(e) => set('salvage_value', e.target.value)}
        />
        <div className="sm:col-span-2">
          <Input label={t('assets.notes')} value={form.notes} onChange={(e) => set('notes', e.target.value)} />
        </div>
        <div className="sm:col-span-2 flex justify-end">
          <Button onClick={() => create.mutate()} disabled={!form.name || create.isPending}>
            {create.isPending ? t('common.saving') : t('common.save')}
          </Button>
        </div>
      </Card>
    </div>
  )
}