'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import PageLayout from '../../../components/PageLayout'
import useAuthStore from '../../../store/authStore'
import { useUserStatus } from '../../../hooks/useUserStatus'

interface CompanyProfileData {
  companyName: string
  vatNumber: string
  street: string
  postalCode: string
  city: string
  country: string
  accountHolder: string
  iban: string
  bic: string
  secondPhone: string
  emergencyName: string
  emergencyPhone: string
}

const init: CompanyProfileData = {
  companyName: '',
  vatNumber: '',
  street: '',
  postalCode: '',
  city: '',
  country: '',
  accountHolder: '',
  iban: '',
  bic: '',
  secondPhone: '',
  emergencyName: '',
  emergencyPhone: ''
}

export default function CompanyAdditionalInformationPage() {
  const router = useRouter()
  const { accessToken } = useAuthStore()
  const { refreshStatus } = useUserStatus()
  
  const [form, setForm] = useState(init)
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setForm(p => ({ ...p, [name]: value }))
    setError('')
  }

  const validate = () => {
    const required: (keyof CompanyProfileData)[] = [
      'companyName','vatNumber','street','postalCode','city','country','accountHolder','iban'
    ]
    for (const k of required) {
      if (!form[k].trim()) {
        setError('Bitte alle Pflichtfelder ausfüllen.')
        return false
      }
    }
    if (!/^([A-Z]{2}\d{2}[A-Z0-9]{10,30})$/i.test(form.iban.replace(/\s+/g,''))) {
      setError('Ungültige IBAN.')
      return false
    }
    setError('')
    return true
  }

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (loading || success) return
    if (!validate()) return
    
    if (!accessToken) {
      setError('Not authenticated. Please log in again.')
      return
    }
    
    setLoading(true)
    
    try {
      // Prepare data for backend with correct field names
      const profileData = {
        address: form.street, // Backend expects 'address', not nested object
        zip_code: form.postalCode, // Backend expects 'zip_code'
        city: form.city,
        country: form.country,
        registrationNumber: form.vatNumber, // Map VAT number to registration number
        businessType: 'company', // Default business type
        branch: null, // Not collected in form, set to null
        numberOfEmployees: null, // Not collected in form, set to null
        accountHolderName: form.accountHolder, // Backend expects 'accountHolderName'
        iban: form.iban.replace(/\s+/g, '') // Remove spaces from IBAN
      }

      const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/profile/company/complete`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(profileData)
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({ message: 'Save failed' }))
        throw new Error(errorData.message || 'Save failed')
      }

      setSuccess(true)
      
      // Refresh user status to update profile completion state
      await refreshStatus()
      
      // Redirect to next step after short delay
      setTimeout(() => {
        router.push('/quickaction-dashboard/register-sign-contract/company')
      }, 1500)
      
    } catch (error: any) {
      console.error('Company profile save error:', error)
      setError(error.message || 'Speichern fehlgeschlagen.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <PageLayout>
      <div className="relative flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
        {/* Background */}
        <div className="fixed inset-0 -z-10">
          <div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
            <svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
              <defs>
                <pattern id="company-additional-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
                  <path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
                </pattern>
              </defs>
              <rect fill="url(#company-additional-pattern)" width="100%" height="100%" strokeWidth={0} />
            </svg>
          <div aria-hidden="true" className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48">
            <div
              className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
              style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
            />
          </div>
        </div>

        <form
          onSubmit={submit}
          className="relative max-w-6xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10"
        >
          <div className="px-6 py-8 sm:px-10 lg:px-16">
            <h1 className="text-center text-xl sm:text-2xl font-semibold text-[#0F172A] mb-6">
              Complete Company Profile
            </h1>

            {/* Company Details */}
            <section>
              <h2 className="text-sm font-semibold text-[#0F2460] mb-4">
                Company Details
              </h2>
              <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                <div className="sm:col-span-2 lg:col-span-3">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Company Name *
                  </label>
                  <input
                    name="companyName"
                    value={form.companyName}
                    onChange={handleChange}
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    VAT / Reg No. *
                  </label>
                  <input
                    name="vatNumber"
                    value={form.vatNumber}
                    onChange={handleChange}
                    placeholder="e.g. DE123456789"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm uppercase focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div className="sm:col-span-2 lg:col-span-3">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Street & Number *
                  </label>
                  <input
                    name="street"
                    value={form.street}
                    onChange={handleChange}
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Postal Code *
                  </label>
                  <input
                    name="postalCode"
                    value={form.postalCode}
                    onChange={handleChange}
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    City *
                  </label>
                  <input
                    name="city"
                    value={form.city}
                    onChange={handleChange}
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Country *
                  </label>
                  <input
                    name="country"
                    value={form.country}
                    onChange={handleChange}
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
              </div>
            </section>

            <hr className="my-8 border-gray-200" />

            {/* Bank Details */}
            <section>
              <h2 className="text-sm font-semibold text-[#0F2460] mb-4">
                Bank Details
              </h2>
              <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                <div className="sm:col-span-2 lg:col-span-3">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Account Holder *
                  </label>
                  <input
                    name="accountHolder"
                    value={form.accountHolder}
                    onChange={handleChange}
                    placeholder="Company / Holder name"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div className="sm:col-span-2 lg:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    IBAN *
                  </label>
                  <input
                    name="iban"
                    value={form.iban}
                    onChange={handleChange}
                    placeholder="DE89 3704 0044 0532 0130 00"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tracking-wide uppercase focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    BIC (optional)
                  </label>
                  <input
                    name="bic"
                    value={form.bic}
                    onChange={handleChange}
                    placeholder="GENODEF1XXX"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm uppercase focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  />
                </div>
              </div>
            </section>

            <hr className="my-8 border-gray-200" />

            {/* Additional Information */}
            <section>
              <h2 className="text-sm font-semibold text-[#0F2460] mb-4">
                Additional Information
              </h2>
              <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                <div className="sm:col-span-2 lg:col-span-3">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Second Phone (optional)
                  </label>
                  <input
                    name="secondPhone"
                    value={form.secondPhone}
                    onChange={handleChange}
                    placeholder="+49 123 456 7890"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Emergency Contact Name
                  </label>
                  <input
                    name="emergencyName"
                    value={form.emergencyName}
                    onChange={handleChange}
                    placeholder="Contact name"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Emergency Contact Phone
                  </label>
                  <input
                    name="emergencyPhone"
                    value={form.emergencyPhone}
                    onChange={handleChange}
                    placeholder="+49 123 456 7890"
                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  />
                </div>
               <div className="hidden lg:block" />
              </div>
            </section>

            {error && (
              <div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-600">
                {error}
              </div>
            )}
            {success && (
              <div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-xs text-green-700">
                Daten gespeichert.
              </div>
            )}

            <div className="mt-10 flex justify-end">
              <button
                type="submit"
                disabled={loading || success}
                className="inline-flex items-center rounded-md bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
              >
                {loading ? 'Speichern…' : success ? 'Gespeichert' : 'Save & Continue'}
              </button>
            </div>
          </div>
        </form>
      </div>
    </PageLayout>
  )
}