'use client'

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

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

  const [editMode, setEditMode] = useState(false)
  const [form, setForm] = useState({
    accepts_dine_in: profile?.accepts_dine_in ?? false,
    accepts_takeaway: profile?.accepts_takeaway ?? false,
    accepts_delivery: profile?.accepts_delivery ?? false
  })

  const { mutate, isPending } = useUpdateOrderTypes()

  const handleChange = (field: 'accepts_dine_in' | 'accepts_takeaway' | 'accepts_delivery', value: boolean) => {
    setForm(prev => ({ ...prev, [field]: value }))
  }

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    mutate(
      {
        accepts_dine_in: form.accepts_dine_in,
        accepts_takeaway: form.accepts_takeaway,
        accepts_delivery: form.accepts_delivery
      },
      {
        onSuccess: () => {
          enqueueSnackbar(t('status.successMessage'), { variant: 'success' })
          refetch()
          setEditMode(false)
        },
        onError: (error: any) => {
          enqueueSnackbar(error?.message || t('status.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('status.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='status-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>
        {editMode ? (
          <form id='status-form' onSubmit={handleSubmit}>
            <Stack spacing={2}>
              <Stack direction='row' alignItems='center' justifyContent='space-between'>
                <Typography>
                  <strong>{t('status.dineIn')}</strong>
                </Typography>
                <Switch
                  checked={form.accepts_dine_in}
                  onChange={(_, checked) => handleChange('accepts_dine_in', checked)}
                  color='primary'
                />
              </Stack>
              <Stack direction='row' alignItems='center' justifyContent='space-between'>
                <Typography>
                  <strong>{t('status.takeaway')}</strong>
                </Typography>
                <Switch
                  checked={form.accepts_takeaway}
                  onChange={(_, checked) => handleChange('accepts_takeaway', checked)}
                  color='primary'
                />
              </Stack>
              <Stack direction='row' alignItems='center' justifyContent='space-between'>
                <Typography>
                  <strong>{t('status.delivery')}</strong>
                </Typography>
                <Switch
                  checked={form.accepts_delivery}
                  onChange={(_, checked) => handleChange('accepts_delivery', checked)}
                  color='primary'
                />
              </Stack>
            </Stack>
          </form>
        ) : (
          <Stack spacing={2}>
            <Typography>
              <strong>{t('status.active')}</strong> {profile.is_active ? '✅' : '❌'}
            </Typography>
            <Typography>
              <strong>{t('status.dineIn')}</strong> {profile.accepts_dine_in ? '✅' : '❌'}
            </Typography>
            <Typography>
              <strong>{t('status.takeaway')}</strong> {profile.accepts_takeaway ? '✅' : '❌'}
            </Typography>
            <Typography>
              <strong>{t('status.delivery')}</strong> {profile.accepts_delivery ? '✅' : '❌'}
            </Typography>
          </Stack>
        )}
      </CardContent>
    </Card>
  )
}
