'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, Building2, MapPin, Banknote, Landmark } from 'lucide-react'
import { toast } from 'sonner'
import { api, type Partner } 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 PartnerForm = Omit<Partial<Partner>, 'id' | 'client_code' | 'created_at' | 'updated_at' | 'opening_balance' | 'credit_limit' | 'default_discount'> & {
  opening_balance?: string | number
  credit_limit?: string | number
  default_discount?: 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, children }: { label: string; required?: boolean; 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}
    </div>
  )
}

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

  const partnerTypes = useMemo(
    () => (['company', 'individual', 'government', 'international'] as const).map((value) => ({
      value,
      label: t(`partners.type_options.${value}`),
    })),
    [t],
  )

  const statuses = useMemo(
    () => (['active', 'inactive', 'prospect', 'blacklisted', 'suspended'] as const).map((value) => ({
      value,
      label: t(`partners.status.${value}`),
    })),
    [t],
  )

  const riskLevels = useMemo(
    () => (['low', 'medium', 'high'] as const).map((value) => ({
      value,
      label: t(`partners.risk_options.${value}`),
    })),
    [t],
  )

  const paymentTerms = useMemo(
    () => (['cash', '7_days', '15_days', '30_days', 'custom'] as const).map((value) => ({
      value,
      label: t(`partners.payment_options.${value}`),
    })),
    [t],
  )

  const {
    register,
    handleSubmit,
    reset,
    watch,
    formState: { errors, isSubmitting },
  } = useForm<PartnerForm>({
    defaultValues: {
      partner_type: 'company',
      status: 'active',
      risk_level: 'low',
      payment_terms: '30_days',
    },
  })

  const paymentTermsValue = watch('payment_terms')

  const { data: partnerData } = useQuery({
    queryKey: ['partner', id],
    queryFn: () => api.get<{ data: Partner }>(`/partners/${id}`),
    enabled: isEdit,
  })

  useEffect(() => {
    if (partnerData?.data?.data) {
      const p = partnerData.data.data
      reset({
        name: p.name,
        legal_name: p.legal_name ?? '',
        vat_number: p.vat_number ?? '',
        registration_number: (p as any).registration_number ?? '',
        duns_number: (p as any).duns_number ?? '',
        lei_code: (p as any).lei_code ?? '',
        industry: (p as any).industry ?? '',
        partner_type: p.partner_type,
        status: p.status,
        contact_person: p.contact_person ?? '',
        phone: p.phone ?? '',
        mobile: (p as any).mobile ?? '',
        email: p.email ?? '',
        website: (p as any).website ?? '',
        street: (p as any).street ?? '',
        city: p.city ?? '',
        state_region: (p as any).state_region ?? '',
        postal_code: (p as any).postal_code ?? '',
        country: p.country ?? '',
        payment_terms: p.payment_terms ?? '30_days',
        payment_terms_custom: (p as any).payment_terms_custom ?? '',
        opening_balance: (p as any).opening_balance ?? '',
        credit_limit: p.credit_limit ?? '',
        default_discount: (p as any).default_discount ?? '',
        tax_category: (p as any).tax_category ?? '',
        risk_level: p.risk_level,
        bank_name: (p as any).bank_name ?? '',
        account_iban: (p as any).account_iban ?? '',
        swift_bic: (p as any).swift_bic ?? '',
      })
    }
  }, [partnerData, reset])

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

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

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center gap-3">
        <Link href="/partners">
          <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('partners.edit') : t('partners.create')}
        </h1>
        {isEdit && partnerData?.data?.data && (
          <span className="premium-chip rounded-full px-3 py-0.5 font-mono text-xs text-[var(--premium-label)]">
            {(partnerData.data.data as any).client_code}
          </span>
        )}
        {isEdit && id && (
          <Link href={`/partners/${id}/ledger`}>
            <Button size="sm" variant="secondary" type="button">
              {t('finance.ledger')}
            </Button>
          </Link>
        )}
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
        <div className="animate-fade-in-up stagger-1">
          <Card elevated>
            <SectionHeader icon={Building2} title={t('partners.sections.identification')} />
            <div className="space-y-4">
              <FormRow>
                <FieldWrapper label={t('partners.name')} required>
                  <Input
                    {...register('name', { required: t('partners.validation.nameRequired') })}
                    placeholder={t('partners.placeholders.name')}
                  />
                  {errors.name && <p className="text-xs text-red-400">{errors.name.message}</p>}
                </FieldWrapper>
                <FieldWrapper label={t('partners.legalName')}>
                  <Input {...register('legal_name')} placeholder={t('partners.placeholders.legalName')} />
                </FieldWrapper>
              </FormRow>

              <FormRow3>
                <FieldWrapper label={t('partners.type')} required>
                  <Select {...register('partner_type', { required: true })} options={partnerTypes} />
                </FieldWrapper>
                <FieldWrapper label={t('common.status')} required>
                  <Select {...register('status', { required: true })} options={statuses} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.industry')}>
                  <Input {...register('industry')} placeholder={t('partners.placeholders.industry')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow3>
                <FieldWrapper label={t('partners.vatNumber')}>
                  <Input {...register('vat_number')} placeholder={t('partners.placeholders.vatNumber')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.registrationNumber')}>
                  <Input {...register('registration_number' as any)} placeholder={t('partners.placeholders.registrationNumber')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.dunsNumber')}>
                  <Input {...register('duns_number' as any)} placeholder={t('partners.placeholders.dunsNumber')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow>
                <FieldWrapper label={t('partners.leiCode')}>
                  <Input {...register('lei_code' as any)} placeholder={t('partners.placeholders.leiCode')} />
                </FieldWrapper>
              </FormRow>
            </div>
          </Card>
        </div>

        <div className="animate-fade-in-up stagger-2">
          <Card elevated>
            <SectionHeader icon={MapPin} title={t('partners.sections.contact')} />
            <div className="space-y-4">
              <FormRow3>
                <FieldWrapper label={t('partners.contact')}>
                  <Input {...register('contact_person')} placeholder={t('partners.placeholders.contactPerson')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.phone')}>
                  <Input {...register('phone')} type="tel" placeholder={t('partners.placeholders.phone')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.mobile')}>
                  <Input {...register('mobile' as any)} type="tel" placeholder={t('partners.placeholders.mobile')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow>
                <FieldWrapper label={t('partners.email')}>
                  <Input {...register('email')} type="email" placeholder={t('partners.placeholders.email')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.website')}>
                  <Input {...register('website' as any)} type="url" placeholder={t('partners.placeholders.website')} />
                </FieldWrapper>
              </FormRow>

              <FieldWrapper label={t('partners.street')}>
                <Input {...register('street' as any)} placeholder={t('partners.placeholders.street')} />
              </FieldWrapper>

              <FormRow3>
                <FieldWrapper label={t('partners.city')}>
                  <Input {...register('city')} placeholder={t('partners.placeholders.city')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.stateRegion')}>
                  <Input {...register('state_region' as any)} placeholder={t('partners.placeholders.stateRegion')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.postalCode')}>
                  <Input {...register('postal_code' as any)} placeholder={t('partners.placeholders.postalCode')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow>
                <FieldWrapper label={t('partners.country')}>
                  <Input {...register('country')} placeholder={t('partners.placeholders.country')} />
                </FieldWrapper>
              </FormRow>
            </div>
          </Card>
        </div>

        <div className="animate-fade-in-up stagger-3">
          <Card elevated>
            <SectionHeader icon={Banknote} title={t('partners.sections.financial')} />
            <div className="space-y-4">
              <FormRow3>
                <FieldWrapper label={t('partners.paymentTerms')} required>
                  <Select {...register('payment_terms', { required: true })} options={paymentTerms} />
                </FieldWrapper>
                {paymentTermsValue === 'custom' && (
                  <FieldWrapper label={t('partners.paymentTermsCustom')}>
                    <Input
                      {...register('payment_terms_custom' as any)}
                      placeholder={t('partners.placeholders.paymentTermsCustom')}
                    />
                  </FieldWrapper>
                )}
                <FieldWrapper label={t('partners.riskLevel')} required>
                  <Select {...register('risk_level', { required: true })} options={riskLevels} />
                </FieldWrapper>
              </FormRow3>

              <FormRow3>
                <FieldWrapper label={t('partners.openingBalance')}>
                  <Input {...register('opening_balance' as any)} type="number" step="0.01" placeholder={t('partners.placeholders.openingBalance')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.creditLimit')}>
                  <Input {...register('credit_limit')} type="number" step="0.01" placeholder={t('partners.placeholders.creditLimit')} />
                </FieldWrapper>
                <FieldWrapper label={t('partners.defaultDiscount')}>
                  <Input {...register('default_discount' as any)} type="number" step="0.01" min="0" max="100" placeholder={t('partners.placeholders.defaultDiscount')} />
                </FieldWrapper>
              </FormRow3>

              <FormRow>
                <FieldWrapper label={t('partners.taxCategory')}>
                  <Input {...register('tax_category' as any)} placeholder={t('partners.placeholders.taxCategory')} />
                </FieldWrapper>
              </FormRow>
            </div>
          </Card>
        </div>

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

        <div className="animate-fade-in-up stagger-5 flex items-center justify-end gap-3 pb-4">
          <Link href="/partners">
            <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('partners.createButton')}
          </Button>
        </div>
      </form>
    </div>
  )
}