'use client';
import { ChangeEvent, FunctionComponent, useEffect, useRef } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { useForm, FormProvider, useWatch } from 'react-hook-form';
import { useSnackbar } from 'notistack';
import { Avatar, Box, MenuItem, Stack, Typography } from '@mui/material';
import {
  AccentCard,
  AppButton,
  AppIcon,
  AppLoading,
  FormSection,
  PageHeader,
  RhfChipSelect,
  RhfTextField,
  TrustBadge,
} from '@/components';
import { CONTENT_MAX_WIDTH } from '@/components/config';
import { ROUTES } from '@/constants';
import { digitsOnly } from '@/utils';
import { useNurseProfile, useUpsertNurseProfile, useUploadAvatar } from '@/services/profiles';
import type { NurseProfile } from '@/services/profiles/types';
import { useVerificationStatus } from '@/services/verification';
import { ownBadgeState, SPECIALTY_PRESETS } from '@/services/verification/types';

const MAX_YEARS = 80;
const MAX_YEARS_DIGITS = 2;
const OTHER_CODE = '__other';
const EDUCATION_LEVELS = ['diploma', 'associate', 'bachelor', 'master', 'doctorate'] as const;
const EDUCATION_FIELDS = ['nursing', 'midwifery', 'anesthesia', 'operating_room', 'public_health'] as const;

interface ProfileFormValues {
  avatarUrl: string | null;
  bio: string;
  years: string;
  educationLevel: string;
  educationLevelOther: string;
  educationField: string;
  educationFieldOther: string;
  specializations: string[];
}

function parseSpecializations(json: string): string[] {
  try {
    const parsed = JSON.parse(json);
    return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === 'string') : [];
  } catch {
    return [];
  }
}

/**
 * Splits a stored free-text value into the (select code, "other" free-text) pair the form edits: a
 * value the preset list knows becomes the code, anything else becomes «سایر» + the raw text.
 */
function splitPreset(stored: string, presets: readonly string[]): { code: string; other: string } {
  if (presets.includes(stored)) return { code: stored, other: '' };
  return stored ? { code: OTHER_CODE, other: stored } : { code: '', other: '' };
}

/** Nurse profile bootstrap (B7 header): avatar + bio + experience + qualifications. */
export default function NurseProfilePage() {
  const { data: profile, isLoading } = useNurseProfile();
  if (isLoading) return <AppLoading />;
  return <NurseProfileForm initial={profile ?? null} />;
}

/**
 * The nurse's public-facing profile, rebuilt around three named questions instead of one undivided
 * column of inputs.
 *
 * What it replaced: a flat stack of avatar → bio → years → two selects → two conditional "other"
 * fields → a chip row → a save button, with no headings and no statement of what any of it was for.
 * The nurse could not tell which fields families actually see, which were required, or how much was
 * left — and every keystroke re-rendered the trust badge, the verification banner and the uploader
 * along with the field being typed into, because each input owned a `useState` at page level.
 *
 * Now: `FormSection` groups the fields into معرفی / تجربه و تحصیلات / تخصص‌ها, each saying who the
 * answer is for; react-hook-form owns the values so a keystroke re-renders one field; and validation
 * lives on the field it governs rather than in a hand-rolled block at the top of the submit handler.
 */
const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({ initial }) => {
  const t = useTranslations('nurseProfile');
  const tv = useTranslations('verification');
  const tc = useTranslations('common');
  const locale = useLocale();
  const { enqueueSnackbar } = useSnackbar();
  const upsert = useUpsertNurseProfile();
  const uploadAvatar = useUploadAvatar();
  const { data: verificationStatus } = useVerificationStatus();
  const badgeState = ownBadgeState(verificationStatus);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const level = splitPreset(initial?.educationLevel ?? '', EDUCATION_LEVELS);
  const field = splitPreset(initial?.educationField ?? '', EDUCATION_FIELDS);

  const form = useForm<ProfileFormValues>({
    mode: 'onTouched',
    defaultValues: {
      avatarUrl: initial?.avatarUrl ?? null,
      bio: initial?.bio ?? '',
      years: initial ? String(initial.yearsOfExperience) : '',
      educationLevel: level.code,
      educationLevelOther: level.other,
      educationField: field.code,
      educationFieldOther: field.other,
      specializations: parseSpecializations(initial?.specializationsJson ?? '[]'),
    },
  });
  const { control, handleSubmit, setValue, getValues } = form;

  // Only these three drive conditional rendering, so they are the only fields worth subscribing the
  // page to — the rest re-render nothing but themselves.
  const avatarUrl = useWatch({ control, name: 'avatarUrl' });
  const educationLevel = useWatch({ control, name: 'educationLevel' });
  const educationField = useWatch({ control, name: 'educationField' });

  // A staged-but-unsaved avatar must never be silently discarded — warn on reload/tab-close.
  const avatarDirty = avatarUrl !== (initial?.avatarUrl ?? null);
  useEffect(() => {
    if (!avatarDirty) return;
    const handler = (event: BeforeUnloadEvent) => {
      event.preventDefault();
      // Chrome (and most engines) only show the native confirm dialog when returnValue is set.
      event.returnValue = '';
    };
    window.addEventListener('beforeunload', handler);
    return () => window.removeEventListener('beforeunload', handler);
  }, [avatarDirty]);

  const onFileSelected = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = '';
    if (!file) return;
    uploadAvatar.mutate(file, {
      onSuccess: (result) => setValue('avatarUrl', result.url, { shouldDirty: true }),
      onError: () => enqueueSnackbar(t('avatar_upload_error'), { variant: 'error' }),
    });
  };

  const save = (values: ProfileFormValues) => {
    const resolvedLevel =
      values.educationLevel === OTHER_CODE ? values.educationLevelOther.trim() : values.educationLevel;
    const resolvedField =
      values.educationField === OTHER_CODE ? values.educationFieldOther.trim() : values.educationField;

    upsert.mutate(
      {
        bio: values.bio.trim(),
        yearsOfExperience: values.years.trim() === '' ? 0 : Number(values.years),
        educationLevel: resolvedLevel,
        educationField: resolvedField,
        specializationsJson: JSON.stringify(values.specializations),
        avatarUrl: values.avatarUrl,
      },
      {
        onSuccess: () => {
          enqueueSnackbar(t('saved'), { variant: 'success' });
          // Re-baseline so the beforeunload guard and `isDirty` stop reporting saved work as unsaved.
          form.reset(getValues());
        },
        onError: () => enqueueSnackbar(t('save_error'), { variant: 'error' }),
      },
    );
  };

  return (
    <FormProvider {...form}>
      <Box
        component="form"
        noValidate
        onSubmit={handleSubmit(save)}
        sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}
      >
        <PageHeader title={t('title')} subtitle={t('subtitle')} meta={<TrustBadge state={badgeState} />} />

        {/* Blocked-until-verified nudge — shown until the aggregate is approved (incl. the expired state). */}
        {badgeState !== 'verified' ? (
          <AccentCard tone="warning" padding="sm">
            <Stack sx={{ gap: 1 }}>
              <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
                <AppIcon icon="warning" size={20} color="var(--bal-warning)" />
                <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
                  {t('unverified_title')}
                </Typography>
              </Stack>
              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                {t('unverified_body')}
              </Typography>
              <AppButton
                color="primary"
                variant="text"
                endIcon="forward"
                to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
                sx={{ alignSelf: 'flex-start' }}
              >
                {t('unverified_cta')}
              </AppButton>
            </Stack>
          </AccentCard>
        ) : null}

        <FormSection title={t('section_intro_title')} description={t('section_intro_description')} icon="account">
          <Stack direction="row" sx={{ gap: 2, alignItems: 'center' }}>
            <Avatar src={avatarUrl ?? undefined} sx={{ width: 64, height: 64, bgcolor: 'var(--bal-primary-soft)' }}>
              {avatarUrl ? null : <AppIcon icon="account" size={32} color="var(--bal-primary)" />}
            </Avatar>
            <Stack sx={{ gap: 0.5, minWidth: 0 }}>
              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                {t('photo_hint')}
              </Typography>
              <AppButton
                variant="outlined"
                color="primary"
                startIcon="camera"
                onClick={() => fileInputRef.current?.click()}
                disabled={uploadAvatar.isPending}
                sx={{ alignSelf: 'flex-start' }}
              >
                {uploadAvatar.isPending ? t('uploading') : t('upload')}
              </AppButton>
              <input ref={fileInputRef} type="file" accept="image/*" hidden onChange={onFileSelected} />
            </Stack>
          </Stack>

          <RhfTextField<ProfileFormValues>
            name="bio"
            label={t('bio')}
            helperText={t('bio_hint')}
            multiline
            minRows={3}
            fullWidth
          />
        </FormSection>

        <FormSection
          title={t('section_experience_title')}
          description={t('section_experience_description')}
          icon="license"
        >
          <RhfTextField<ProfileFormValues>
            name="years"
            label={t('years')}
            transform={(raw) => digitsOnly(raw).slice(0, MAX_YEARS_DIGITS)}
            rules={{
              validate: (value) => {
                const trimmed = String(value ?? '').trim();
                if (trimmed === '') return true;
                const parsed = Number(trimmed);
                return (Number.isInteger(parsed) && parsed >= 0 && parsed <= MAX_YEARS) || t('years_invalid');
              },
            }}
            slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
            sx={{ maxWidth: 200 }}
          />

          <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
            <RhfTextField<ProfileFormValues> name="educationLevel" select label={t('education_level_label')} fullWidth>
              {EDUCATION_LEVELS.map((code) => (
                <MenuItem key={code} value={code}>
                  {t(`education_level_${code}`)}
                </MenuItem>
              ))}
              <MenuItem value={OTHER_CODE}>{t('education_other')}</MenuItem>
            </RhfTextField>
            <RhfTextField<ProfileFormValues> name="educationField" select label={t('education_field_label')} fullWidth>
              {EDUCATION_FIELDS.map((code) => (
                <MenuItem key={code} value={code}>
                  {t(`education_field_${code}`)}
                </MenuItem>
              ))}
              <MenuItem value={OTHER_CODE}>{t('education_other')}</MenuItem>
            </RhfTextField>
          </Stack>

          {educationLevel === OTHER_CODE ? (
            <RhfTextField<ProfileFormValues>
              name="educationLevelOther"
              label={t('education_level_other_label')}
              rules={{ required: t('education_other_required') }}
              fullWidth
            />
          ) : null}
          {educationField === OTHER_CODE ? (
            <RhfTextField<ProfileFormValues>
              name="educationFieldOther"
              label={t('education_field_other_label')}
              rules={{ required: t('education_other_required') }}
              fullWidth
            />
          ) : null}
        </FormSection>

        <FormSection
          title={t('specializations_label')}
          description={t('section_specializations_description')}
          icon="clinical"
          optional
          optionalLabel={tc('optional')}
        >
          <RhfChipSelect<ProfileFormValues>
            name="specializations"
            options={SPECIALTY_PRESETS.map((code) => ({
              code,
              label: tv.has(`specialty_${code}`) ? tv(`specialty_${code}`) : code,
            }))}
            allowCustomValues
          />
        </FormSection>

        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
          <AppButton type="submit" color="primary" variant="contained" disabled={upsert.isPending}>
            {upsert.isPending ? tc('saving') : t('save')}
          </AppButton>
          <AppButton variant="text" color="primary" startIcon="account" to={`/${locale}${ROUTES.NURSE_PROFILE_PREVIEW}`}>
            {t('preview_cta')}
          </AppButton>
        </Stack>

        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {t('deferred_services')}
        </Typography>
      </Box>
    </FormProvider>
  );
};