'use client';
import { ChangeEvent, FunctionComponent, useRef, useState } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { useSnackbar } from 'notistack';
import { Avatar, Box, Paper, Stack, TextField, Typography } from '@mui/material';
import { AppButton, AppIcon, AppLoading, TrustBadge } from '@/components';
import { ROUTES } from '@/constants';
import { useNurseProfile, useUpsertNurseProfile, useUploadAvatar } from '@/services/profiles';
import type { NurseProfile } from '@/services/profiles/types';
import { useVerificationStatus } from '@/services/verification';
import { ownBadgeState } from '@/services/verification/types';

const MAX_YEARS = 80;

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

const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({ initial }) => {
  const t = useTranslations('nurseProfile');
  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 [avatarUrl, setAvatarUrl] = useState<string | null>(initial?.avatarUrl ?? null);
  const [bio, setBio] = useState(initial?.bio ?? '');
  const [years, setYears] = useState(initial ? String(initial.yearsOfExperience) : '');
  const [yearsError, setYearsError] = useState(false);

  const pickFile = () => fileInputRef.current?.click();

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

  const handleSave = () => {
    const trimmed = years.trim();
    const yearsNum = trimmed === '' ? 0 : Number(trimmed);
    const yearsInvalid = !Number.isInteger(yearsNum) || yearsNum < 0 || yearsNum > MAX_YEARS;
    setYearsError(yearsInvalid);
    if (yearsInvalid) return;

    upsert.mutate(
      {
        bio: bio.trim(),
        yearsOfExperience: yearsNum,
        educationLevel: initial?.educationLevel ?? '',
        educationField: initial?.educationField ?? '',
        specializationsJson: initial?.specializationsJson ?? '[]',
        avatarUrl,
      },
      {
        onSuccess: () => enqueueSnackbar(t('saved'), { variant: 'success' }),
        onError: () => enqueueSnackbar(t('save_error'), { variant: 'error' }),
      },
    );
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 560 }}>
      <Box>
        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
          <Typography variant="h5" component="h1">
            {t('title')}
          </Typography>
          {/* The public trust signal on the nurse's own profile — the same badge f6 reuses in search. */}
          <TrustBadge state={badgeState} />
        </Stack>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {t('subtitle')}
        </Typography>
      </Box>

      {/* Blocked-until-verified banner — shown until the aggregate is approved (incl. the expired state). */}
      {badgeState !== 'verified' ? (
        <Paper
          elevation={0}
          sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider', borderInlineStartWidth: 4, borderInlineStartColor: 'var(--bal-warning)' }}
        >
          <Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
            <AppIcon icon="warning" size={24} color="var(--bal-warning)" />
            <Stack sx={{ gap: 1, flexGrow: 1 }}>
              <Box>
                <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                  {t('unverified_title')}
                </Typography>
                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                  {t('unverified_body')}
                </Typography>
              </Box>
              <AppButton
                color="primary"
                variant="outlined"
                to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
                sx={{ alignSelf: 'flex-start' }}
              >
                {t('unverified_cta')}
              </AppButton>
            </Stack>
          </Stack>
        </Paper>
      ) : null}

      <Stack direction="row" sx={{ gap: 2, alignItems: 'center' }}>
        <Avatar src={avatarUrl ?? undefined} sx={{ width: 72, height: 72, bgcolor: 'var(--bal-primary-soft)' }}>
          {avatarUrl ? null : <AppIcon icon="account" size={36} color="var(--bal-primary)" />}
        </Avatar>
        <Stack sx={{ gap: 0.5 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
            {t('photo')}
          </Typography>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('photo_hint')}
          </Typography>
          <AppButton
            variant="outlined"
            color="primary"
            startIcon="camera"
            onClick={pickFile}
            disabled={uploadAvatar.isPending}
            sx={{ mt: 0.5, alignSelf: 'flex-start' }}
          >
            {uploadAvatar.isPending ? t('uploading') : t('upload')}
          </AppButton>
          <input ref={fileInputRef} type="file" accept="image/*" hidden onChange={onFileSelected} />
        </Stack>
      </Stack>

      <TextField
        label={t('bio')}
        value={bio}
        onChange={(e) => setBio(e.target.value)}
        helperText={t('bio_hint')}
        multiline
        minRows={3}
        fullWidth
      />

      <TextField
        label={t('years')}
        value={years}
        onChange={(e) => {
          setYears(e.target.value.replace(/\D/g, '').slice(0, 2));
          if (yearsError) setYearsError(false);
        }}
        error={yearsError}
        helperText={yearsError ? t('years_invalid') : undefined}
        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
        sx={{ maxWidth: 200 }}
      />

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

      <AppButton
        color="primary"
        variant="contained"
        onClick={handleSave}
        disabled={upsert.isPending}
        sx={{ alignSelf: 'flex-start' }}
      >
        {upsert.isPending ? tc('saving') : t('save')}
      </AppButton>
    </Box>
  );
};
