'use client'

import React from 'react'
import { useForm } from '@/app/hooks/useForm'
import Button from '@/components/ui/Button'
import showToast from '@/components/ui/Toast'
import useUserStore from '@/app/store/userStore'
import ContactUs from '@/components/ContactUs'
import TextInput from '@/components/ui/TextInput'
import PhoneInput from '@/components/ui/PhoneInput'

const validationRules = {
  firstName: { required: true },
  lastName: { required: false },
  phone_number: { required: true },
  email: { required: true },
}

const AccountPage = () => {
  const { user } = useUserStore()

  const { values, handleChange, handleSubmit } = useForm(
    {
      firstName: user?.name || '',
      lastName: user?.surname || '',
      phone_number: user?.phone_number || '',
      email: user?.email || '',
      country: user?.country || '',
      city: user?.city || '',
    },
    validationRules,
    async (values) => {
      try {
        // await updateMainTab(values)
        showToast({ type: 'success', message: 'Данные успешно обновлены!' })
      } catch {
        showToast({ type: 'error', message: 'Ой, что то пошло не так..' })
      }
    }
  )

  if (!user) {
    return null
  }

  return (
    <div className="space-y-3">
      <div className="rounded-2xl shadow overflow-hidden">
        <div className="p-6 bg-white sm:p-8">
          <div className="space-y-4">
            <h1 className="text-2xl">Личные данные</h1>
            <form className="space-y-4" onSubmit={handleSubmit}>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <TextInput
                  name="firstName"
                  value={values.firstName}
                  handleChange={handleChange}
                  label="Имя"
                  placeholder="Ваше имя"
                  style="register"
                />
                <TextInput
                  name="lastName"
                  value={values.lastName}
                  handleChange={handleChange}
                  label="Фамилия"
                  placeholder="Ваша фамилия"
                  style="register"
                />
                <TextInput
                  name="email"
                  value={values.email}
                  handleChange={handleChange}
                  label="Email"
                  placeholder="Ваш email"
                  style="register"
                />
                <PhoneInput
                  value={values.phone_number}
                  handleChange={handleChange}
                  operatorsInfo={false}
                />
                <TextInput
                  name="country"
                  value={values.country}
                  handleChange={handleChange}
                  label="Страна"
                  placeholder="Ваша страна проживания"
                  style="register"
                />
                <TextInput
                  name="city"
                  value={values.city}
                  handleChange={handleChange}
                  label="Город"
                  placeholder="Ваш город проживания"
                  style="register"
                />
              </div>

              <Button
                text="Сохранить изменения"
                className="text-sm font-semibold py-4 px-6 bg-orange text-white flex items-center rounded-2xl whitespace-nowrap"
                type="submit"
              />
            </form>
          </div>
        </div>
      </div>
      <ContactUs />
    </div>
  )
}

export default AccountPage