import { Check, ShieldCheck } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { usePasswordReset } from '@/entities/password-reset'
import { routes } from '@/shared/config'
import { t } from '@/shared/i18n'
import { Button, FlowRequired, Heading } from '@/shared/ui'
import { AuthPanel } from '@/widgets/auth-panel'

export function ResetCompletePage() {
  const navigate = useNavigate()
  const { completed } = usePasswordReset()
  if (!completed)
    return (
      <FlowRequired
        icon={ShieldCheck}
        title={t('resetComplete.guardTitle')}
        description={t('resetComplete.guardDescription')}
        actionLabel={t('resetComplete.guardAction')}
        actionTo={routes.login}
        replace
      />
    )
  return (
    <AuthPanel
      heading={
        <Heading title={t('resetComplete.title')} description={t('resetComplete.description')} icon={Check} success />
      }
      footer={<p className="mt-4 text-center text-xs leading-[1.65] text-muted">{t('resetComplete.hint')}</p>}
    >
      <Button type="button" onClick={() => navigate(routes.login)}>
        {t('common.backToLogin')}
      </Button>
    </AuthPanel>
  )
}