'use client'

import { useState } from 'react'
import { Card, CardHeader, CardContent, TextField, Stack, Typography, CircularProgress } from '@mui/material'
import Button from '@/@core/components/mui/Button'
import { useTranslations } from 'next-intl'
import { useGetEntityProfile } from '@/@core/hooks/data/profile'
import { useUpdateBasicInfo } from '@/@core/hooks/data/profile/useUpdateBasicInfo'
import { useSnackbar } from 'notistack'

export default function BasicInfoCard() {
  const t = useTranslations('PROFILE')
  const { enqueueSnackbar } = useSnackbar()
  const { data, refetch } = useGetEntityProfile()
  const profile = data?.data

  const [editMode, setEditMode] = useState(false)
  const [form, setForm] = useState({
    name_ar: profile?.name_ar || '',
    name_en: profile?.name_en || '',
    description_ar: profile?.description_ar || '',
    description_en: profile?.description_en || ''
  })

  const { mutate, isPending } = useUpdateBasicInfo()

  const handleChange = (field: string, value: string) => {
    setForm(prev => ({ ...prev, [field]: value }))
  }

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    mutate(form, {
      onSuccess: () => {
        enqueueSnackbar(t('basicInfo.successMessage'), { variant: 'success' })
        refetch()
        setEditMode(false)
      },
      onError: (error: any) => {
        enqueueSnackbar(error?.message || t('basicInfo.errorMessage'), { variant: 'error' })
      }
    })
  }

  if (!profile) return <Typography>{t('loading')}</Typography>

  return (
    <Card className='rounded-xl shadow-sm border border-gray-200 h-full'>
      <CardHeader
        title={t('basicInfo.title')}
        action={
          editMode ? (
            <Stack direction='row' spacing={1}>
              <Button size='small' variant='outlined' onClick={() => setEditMode(false)} disabled={isPending}>
                {t('cancel')}
              </Button>
              <Button
                size='small'
                variant='contained'
                type='submit'
                form='basic-info-form'
                disabled={isPending}
                startIcon={isPending ? <CircularProgress size={16} color='inherit' /> : null}
              >
                {isPending ? t('saving') : t('save')}
              </Button>
            </Stack>
          ) : (
            <Button size='small' onClick={() => setEditMode(true)}>
              {t('edit')}
            </Button>
          )
        }
      />

      <CardContent className='space-y-2'>
        {editMode ? (
          <form id='basic-info-form' onSubmit={handleSubmit}>
            <Stack spacing={2}>
              <TextField
                label={t('basicInfo.nameAr')}
                value={form.name_ar}
                onChange={e => handleChange('name_ar', e.target.value)}
                fullWidth
              />
              <TextField
                label={t('basicInfo.nameEn')}
                value={form.name_en}
                onChange={e => handleChange('name_en', e.target.value)}
                fullWidth
              />
              <TextField
                label={t('basicInfo.descAr')}
                value={form.description_ar}
                onChange={e => handleChange('description_ar', e.target.value)}
                fullWidth
                multiline
                rows={2}
              />
              <TextField
                label={t('basicInfo.descEn')}
                value={form.description_en}
                onChange={e => handleChange('description_en', e.target.value)}
                fullWidth
                multiline
                rows={2}
              />
            </Stack>
          </form>
        ) : (
          <>
            <Typography>
              <strong>{t('basicInfo.nameAr')}</strong> {profile.name_ar}
            </Typography>
            <Typography>
              <strong>{t('basicInfo.nameEn')}</strong> {profile.name_en}
            </Typography>
            <Typography color='text.secondary'>{profile.description_en}</Typography>
            <Typography color='text.secondary'>{profile.description_ar}</Typography>
          </>
        )}
      </CardContent>
    </Card>
  )
}
