'use client';
import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { useParams, useRouter } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { FormProvider, useForm, useWatch } from 'react-hook-form';
import { useSnackbar } from 'notistack';
import {
  Box,
  Checkbox,
  Dialog,
  Drawer,
  FormControlLabel,
  MenuItem,
  Paper,
  Skeleton,
  Stack,
  Tab,
  Tabs,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
  useMediaQuery,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import {
  AppButton,
  AppIcon,
  ConfirmDialog,
  EmptyState,
  PatientHeader,
  RhfControlGroup,
  RhfTextField,
  VisitNoteCard,
} from '@/components';
import { ROUTES, bookingDetailPath } from '@/constants';
import { formatShamsiDate, formatShamsiMonthYear } from '@/utils';
import { bookingKeys } from '@/services/bookings/keys';
import { usePatient } from '@/services/patients';
import { birthDateToAge } from '@/services/patients/age';
import { useRecordAccess, usePatientCareRecord, usePatientHistory, useUpdateCareRecord } from '@/services/patientRecords';
import { CARE_RECORD_TABS, DOSE_UNITS, FREQUENCY_PRESETS, TIME_OF_DAY_CODES } from '@/services/patientRecords/types';
import type {
  CareRecordTab,
  CareTask,
  DoseUnit,
  FamilyCareRecord,
  FrequencyPreset,
  Medication,
  RoutineItem,
  TimeOfDayCode,
  VisitNote,
} from '@/services/patientRecords/types';

/**
 * E2 — Patient care-record viewer (پروندهٔ مراقبت). The **family-owned, patient-scoped** record with four
 * tabs: داروها / روتین / سوابق / وظایف. The customer owns and edits medications/routine/tasks via per-item
 * bottom sheets (never a whole-list edit mode — switching tabs mid-edit loses nothing by construction); the
 * **سوابق** (nurse visit notes) are read-only to everyone, grouped into a Shamsi month-by-month timeline. A
 * persistent ownership banner states the record belongs to the family. The clinical-access check gates the
 * whole screen (a `403` → a clear, non-leaking access-denied card — never partial clinical data).
 */
export default function PatientRecordPage() {
  const t = useTranslations('records');
  // Shared enum labels are reused from the onboarding/patients namespaces — never re-keyed.
  const to = useTranslations('onboarding');
  const tp = useTranslations('patients');

  const params = useParams<{ id: string }>();
  const rawId = Number(params.id);
  const patientId = Number.isInteger(rawId) && rawId > 0 ? rawId : -1;

  const access = useRecordAccess(patientId);
  const canView = access.data?.canView ?? false;
  const patient = usePatient(patientId, { enabled: canView });

  const [tab, setTab] = useState<CareRecordTab>('medications');

  if (access.isLoading) return <RecordSkeleton />;

  // Access-denied — a clear, non-leaking card (never any clinical data).
  if (access.data && !access.data.canView) {
    return (
      <Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%' }}>
        <EmptyState icon="lock" title={t('access_denied_title')} body={t('access_denied_body')} />
        <BackToPatients />
      </Stack>
    );
  }

  if (patient.isLoading) return <RecordSkeleton />;

  if (patient.isError || !patient.data) {
    return (
      <Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%' }}>
        <EmptyState title={t('not_found_title')} body={t('not_found_body')} />
        <BackToPatients />
      </Stack>
    );
  }

  const p = patient.data;
  const age = birthDateToAge(p.birthDate);

  return (
    <Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%' }}>
      <PatientHeader
        displayName={p.displayName}
        relationLabel={p.relation ? to(`relation_${p.relation}`) : undefined}
        genderLabel={to(`gender_${p.gender}`)}
        ageLabel={age == null ? undefined : tp('age_years', { age })}
        conditionLabels={p.conditions.map((code) => to(`condition_${code}`))}
        noConditionsLabel={tp('conditions_none')}
      />

      <Paper
        elevation={0}
        sx={{ p: 2, borderRadius: 'var(--bal-radius-md)', backgroundColor: 'var(--bal-primary-soft)', display: 'flex', gap: 1, alignItems: 'center' }}
      >
        <AppIcon icon="family" size={22} color="var(--bal-primary)" />
        <Typography variant="body2" sx={{ color: 'var(--bal-primary)', fontWeight: 500 }}>
          {t('ownership_banner')}
        </Typography>
      </Paper>

      <Tabs
        value={tab}
        onChange={(_, next: CareRecordTab) => setTab(next)}
        variant="scrollable"
        scrollButtons="auto"
        allowScrollButtonsMobile
        sx={{ borderBottom: 1, borderColor: 'divider' }}
      >
        {CARE_RECORD_TABS.map((value) => (
          <Tab key={value} value={value} label={t(`tab_${value}`)} sx={{ textTransform: 'none', fontWeight: 700 }} />
        ))}
      </Tabs>

      {tab === 'history' ? (
        <HistoryTab patientId={patientId} />
      ) : (
        <EditableTabs patientId={patientId} tab={tab} canEdit={access.data?.canEdit ?? false} />
      )}
    </Stack>
  );
}

/** The three customer-editable tabs (medications/routine/tasks) share one record read + one save mutation. */
function EditableTabs({ patientId, tab, canEdit }: { patientId: number; tab: CareRecordTab; canEdit: boolean }) {
  const t = useTranslations('records');
  const { enqueueSnackbar } = useSnackbar();
  const record = usePatientCareRecord(patientId);
  const update = useUpdateCareRecord(patientId);

  if (record.isLoading) {
    return (
      <Stack sx={{ gap: 1.5 }}>
        <Skeleton variant="rounded" height={72} />
        <Skeleton variant="rounded" height={72} />
      </Stack>
    );
  }
  if (record.isError || !record.data) {
    return (
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {t('load_error')}
      </Typography>
    );
  }

  const data = record.data;
  const save = (patch: Partial<Pick<FamilyCareRecord, 'medications' | 'routine' | 'tasks'>>, onDone: () => void) => {
    update.mutate(patch, {
      onSuccess: () => {
        enqueueSnackbar(t('saved'), { variant: 'success' });
        onDone();
      },
      onError: () => enqueueSnackbar(t('save_error'), { variant: 'error' }),
    });
  };

  if (tab === 'medications') {
    return (
      <MedicationsTab
        data={data.medications}
        canEdit={canEdit}
        saving={update.isPending}
        onSave={(meds, done) => save({ medications: meds }, done)}
      />
    );
  }
  if (tab === 'routine') {
    return (
      <RoutineTab data={data.routine} canEdit={canEdit} saving={update.isPending} onSave={(items, done) => save({ routine: items }, done)} />
    );
  }
  return <TasksTab data={data.tasks} canEdit={canEdit} saving={update.isPending} onSave={(tasks, done) => save({ tasks }, done)} />;
}

// ── The responsive per-item sheet: Drawer(bottom) on mobile, Dialog on desktop; dirty-gated close ─────────
function RecordItemSheet({
  open,
  title,
  dirty,
  onClose,
  children,
}: {
  open: boolean;
  title: string;
  dirty: boolean;
  onClose: () => void;
  children: ReactNode;
}) {
  const t = useTranslations('common');
  const theme = useTheme();
  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [discardOpen, setDiscardOpen] = useState(false);

  const requestClose = () => {
    if (dirty) setDiscardOpen(true);
    else onClose();
  };

  const body = (
    <Box sx={{ p: 2.5, display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Stack direction="row" sx={{ alignItems: 'center' }}>
        <Typography variant="subtitle1" sx={{ fontWeight: 700, flexGrow: 1 }}>
          {title}
        </Typography>
        <AppButton variant="text" color="inherit" onClick={requestClose} aria-label={t('close')} sx={{ minWidth: 0, p: 1 }}>
          <AppIcon icon="close" size={20} />
        </AppButton>
      </Stack>
      {children}
    </Box>
  );

  return (
    <>
      {mobile ? (
        <Drawer
          anchor="bottom"
          open={open}
          onClose={requestClose}
          slotProps={{ paper: { sx: { borderTopLeftRadius: 'var(--bal-radius-lg)', borderTopRightRadius: 'var(--bal-radius-lg)', maxHeight: '88vh' } } }}
        >
          {body}
        </Drawer>
      ) : (
        <Dialog open={open} onClose={requestClose} fullWidth maxWidth="xs">
          {body}
        </Dialog>
      )}
      <ConfirmDialog
        open={discardOpen}
        title={t('discard_title')}
        body={t('discard_body')}
        confirmLabel={t('discard_confirm')}
        cancelLabel={t('cancel')}
        confirmColor="error"
        onConfirm={() => {
          setDiscardOpen(false);
          onClose();
        }}
        onClose={() => setDiscardOpen(false)}
      />
    </>
  );
}

/**
 * Client-side id for a row that has never been saved. Module scope on purpose: `Date.now()` is impure
 * and the lint rule can't tell that a submit callback only ever runs from an event, so keeping the
 * call out of the component body states the same thing structurally.
 */
function newTempId(): string {
  return `new-${Date.now()}`;
}

/** Save submits the enclosing `<form>`, so each sheet body owns its submit handler rather than a callback. */
function SheetActions({
  onCancel,
  onDelete,
  saving,
  canSave,
}: {
  onCancel: () => void;
  onDelete?: () => void;
  saving: boolean;
  canSave: boolean;
}) {
  const t = useTranslations('records');
  const tc = useTranslations('common');
  return (
    <Stack direction="row" sx={{ gap: 1, justifyContent: onDelete ? 'space-between' : 'flex-end', alignItems: 'center' }}>
      {onDelete ? (
        <AppButton variant="text" color="error" onClick={onDelete} disabled={saving}>
          {t('remove')}
        </AppButton>
      ) : null}
      <Stack direction="row" sx={{ gap: 1 }}>
        <AppButton variant="text" onClick={onCancel} disabled={saving}>
          {tc('cancel')}
        </AppButton>
        <AppButton type="submit" variant="contained" color="primary" disabled={saving || !canSave}>
          {saving ? tc('saving') : tc('save')}
        </AppButton>
      </Stack>
    </Stack>
  );
}

// A tappable row surface shared by the three editable tabs — mirrors PatientCard's press affordance.
function RowCard({ onOpen, children }: { onOpen?: () => void; children: ReactNode }) {
  return (
    <Paper elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', overflow: 'hidden' }}>
      {onOpen ? (
        <AppButton
          variant="text"
          color="inherit"
          onClick={onOpen}
          sx={{ width: '100%', p: 1.5, justifyContent: 'flex-start', textAlign: 'start', borderRadius: 0, '&:hover': { bgcolor: 'action.hover' } }}
        >
          <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5, width: '100%' }}>
            <Box sx={{ flexGrow: 1, minWidth: 0 }}>{children}</Box>
            <AppIcon icon="forward" size={18} color="var(--bal-text-secondary)" />
          </Stack>
        </AppButton>
      ) : (
        <Box sx={{ p: 1.5 }}>{children}</Box>
      )}
    </Paper>
  );
}

function TimeOfDayChipRow({
  value,
  onChange,
  disabled,
}: {
  value: TimeOfDayCode[];
  onChange: (next: TimeOfDayCode[]) => void;
  disabled?: boolean;
}) {
  const t = useTranslations('records');
  return (
    <ToggleButtonGroup
      value={value}
      onChange={(_, next: TimeOfDayCode[]) => onChange(next)}
      disabled={disabled}
      sx={{ flexWrap: 'wrap', gap: 1, '& .MuiToggleButtonGroup-grouped': { border: '1px solid', borderColor: 'divider !important', borderRadius: '999px !important', mx: 0 } }}
    >
      {TIME_OF_DAY_CODES.map((code) => (
        <ToggleButton key={code} value={code} size="small" sx={{ textTransform: 'none', px: 1.5, borderRadius: '999px' }}>
          {t(`time_${code}`)}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
}

// ── Medications ───────────────────────────────────────────────────────────────────────────────────────────
function medicationSummary(m: Medication, t: ReturnType<typeof useTranslations>): string {
  const dose = m.doseAmount ? `${m.doseAmount} ${m.doseUnit ? t(`dose_unit_${m.doseUnit}`) : ''}`.trim() : null;
  const frequency = m.frequencyCode ? t(`frequency_${m.frequencyCode}`) : m.frequencyText;
  return [dose, frequency].filter(Boolean).join(' · ');
}

function MedicationsTab({
  data,
  canEdit,
  saving,
  onSave,
}: {
  data: Medication[];
  canEdit: boolean;
  saving: boolean;
  onSave: (medications: Medication[], onDone: () => void) => void;
}) {
  const t = useTranslations('records');
  const [sheetItem, setSheetItem] = useState<Medication | 'new' | null>(null);
  const [sheetDirty, setSheetDirty] = useState(false);
  const close = () => setSheetItem(null);

  const handleSave = (item: Medication) => {
    const next = sheetItem === 'new' ? [...data, item] : data.map((m) => (m.id === item.id ? item : m));
    onSave(next, close);
  };
  const handleDelete = (id: string) => onSave(data.filter((m) => m.id !== id), close);

  return (
    <Stack sx={{ gap: 1.5 }}>
      {data.length === 0 ? (
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {t('medications_empty')}
        </Typography>
      ) : (
        <Stack sx={{ gap: 1 }}>
          {data.map((m) => (
            <RowCard key={m.id} onOpen={canEdit ? () => setSheetItem(m) : undefined}>
              <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
                <AppIcon icon="medication" size={20} color="var(--bal-primary)" />
                <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
                  {m.name}
                </Typography>
              </Stack>
              {medicationSummary(m, t) ? (
                <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
                  {medicationSummary(m, t)}
                </Typography>
              ) : null}
              {m.timeOfDay.length > 0 ? (
                <Stack direction="row" sx={{ gap: 0.5, mt: 0.5, flexWrap: 'wrap' }}>
                  {m.timeOfDay.map((code) => (
                    <Typography
                      key={code}
                      variant="caption"
                      sx={{ px: 1, py: 0.25, borderRadius: '999px', bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)' }}
                    >
                      {t(`time_${code}`)}
                    </Typography>
                  ))}
                </Stack>
              ) : null}
            </RowCard>
          ))}
        </Stack>
      )}

      {canEdit ? (
        <AppButton variant="outlined" color="primary" startIcon="add" onClick={() => setSheetItem('new')} sx={{ alignSelf: 'flex-start' }}>
          {t('add_medication')}
        </AppButton>
      ) : null}

      <RecordItemSheet open={sheetItem != null} title={sheetItem === 'new' ? t('add_medication') : t('edit_medication')} dirty={sheetDirty} onClose={close}>
        {sheetItem != null ? (
          <MedicationSheetBody
            initial={sheetItem === 'new' ? null : sheetItem}
            saving={saving}
            onCancel={close}
            onSave={handleSave}
            onDelete={sheetItem !== 'new' ? () => handleDelete((sheetItem as Medication).id) : undefined}
            onDirtyChange={setSheetDirty}
          />
        ) : null}
      </RecordItemSheet>
    </Stack>
  );
}

interface MedicationFormValues {
  name: string;
  doseAmount: string;
  doseUnit: DoseUnit | '';
  frequencyCode: FrequencyPreset | null;
  frequencyText: string;
  timeOfDay: TimeOfDayCode[];
  timingNote: string;
}

function MedicationSheetBody({
  initial,
  saving,
  onCancel,
  onSave,
  onDelete,
  onDirtyChange,
}: {
  initial: Medication | null;
  saving: boolean;
  onCancel: () => void;
  onSave: (item: Medication) => void;
  onDelete?: () => void;
  onDirtyChange: (dirty: boolean) => void;
}) {
  const t = useTranslations('records');
  const form = useForm<MedicationFormValues>({
    mode: 'onTouched',
    defaultValues: {
      name: initial?.name ?? '',
      doseAmount: initial?.doseAmount ?? '',
      doseUnit: initial?.doseUnit ?? '',
      frequencyCode: initial?.frequencyCode ?? null,
      frequencyText: initial?.frequencyText ?? '',
      timeOfDay: initial?.timeOfDay ?? [],
      timingNote: initial?.timingNote ?? '',
    },
  });
  const { control, formState, handleSubmit, setValue } = form;
  const { isDirty } = formState;
  const name = useWatch({ control, name: 'name' });
  const frequencyCode = useWatch({ control, name: 'frequencyCode' });

  useEffect(() => {
    onDirtyChange(isDirty);
  }, [isDirty, onDirtyChange]);

  const submit = (values: MedicationFormValues) => {
    onSave({
      id: initial?.id ?? newTempId(),
      name: values.name.trim(),
      doseAmount: values.doseAmount.trim() || null,
      doseUnit: values.doseUnit || null,
      frequencyCode: values.frequencyCode,
      frequencyText: values.frequencyCode ? null : values.frequencyText.trim() || null,
      timeOfDay: values.timeOfDay,
      timingNote: values.timingNote.trim() || null,
    });
  };

  return (
    <FormProvider {...form}>
      <Stack component="form" noValidate onSubmit={handleSubmit(submit)} sx={{ gap: 2 }}>
        <RhfTextField<MedicationFormValues> name="name" label={t('med_name')} fullWidth required autoFocus />

        <Stack direction="row" sx={{ gap: 1.5 }}>
          <RhfTextField<MedicationFormValues> name="doseAmount" label={t('med_dose_amount')} sx={{ flex: 1 }} />
          <RhfTextField<MedicationFormValues> name="doseUnit" select label={t('med_dose_unit')} sx={{ flex: 1 }}>
            <MenuItem value="">{t('med_dose_unit_none')}</MenuItem>
            {DOSE_UNITS.map((unit) => (
              <MenuItem key={unit} value={unit}>
                {t(`dose_unit_${unit}`)}
              </MenuItem>
            ))}
          </RhfTextField>
        </Stack>

        <Stack sx={{ gap: 1 }}>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('med_frequency')}
          </Typography>
          <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
            {FREQUENCY_PRESETS.map((preset) => (
              <AppButton
                key={preset}
                variant={frequencyCode === preset ? 'contained' : 'outlined'}
                color="primary"
                size="small"
                onClick={() => {
                  const next = frequencyCode === preset ? null : preset;
                  setValue('frequencyCode', next, { shouldDirty: true });
                  // A preset and the free-text alternative are mutually exclusive by design.
                  if (next) setValue('frequencyText', '', { shouldDirty: true });
                }}
                sx={{ borderRadius: '999px' }}
              >
                {t(`frequency_${preset}`)}
              </AppButton>
            ))}
          </Stack>
          {!frequencyCode ? (
            <RhfTextField<MedicationFormValues>
              name="frequencyText"
              label={t('med_frequency_text')}
              fullWidth
              size="small"
            />
          ) : null}
        </Stack>

        <RhfControlGroup<MedicationFormValues> name="timeOfDay" hint={t('time_of_day')}>
          {({ field }) => <TimeOfDayChipRow value={(field.value as TimeOfDayCode[]) ?? []} onChange={field.onChange} />}
        </RhfControlGroup>

        <RhfTextField<MedicationFormValues> name="timingNote" label={t('med_timing')} fullWidth size="small" />

        <SheetActions onCancel={onCancel} onDelete={onDelete} saving={saving} canSave={name.trim().length > 0} />
      </Stack>
    </FormProvider>
  );
}

// ── Routine ───────────────────────────────────────────────────────────────────────────────────────────────
function RoutineTab({
  data,
  canEdit,
  saving,
  onSave,
}: {
  data: RoutineItem[];
  canEdit: boolean;
  saving: boolean;
  onSave: (routine: RoutineItem[], onDone: () => void) => void;
}) {
  const t = useTranslations('records');
  const [sheetItem, setSheetItem] = useState<RoutineItem | 'new' | null>(null);
  const [sheetDirty, setSheetDirty] = useState(false);
  const close = () => setSheetItem(null);

  const handleSave = (item: RoutineItem) => {
    const next = sheetItem === 'new' ? [...data, item] : data.map((r) => (r.id === item.id ? item : r));
    onSave(next, close);
  };
  const handleDelete = (id: string) => onSave(data.filter((r) => r.id !== id), close);

  return (
    <Stack sx={{ gap: 1.5 }}>
      {data.length === 0 ? (
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {t('routine_empty')}
        </Typography>
      ) : (
        <Stack sx={{ gap: 1 }}>
          {data.map((r) => (
            <RowCard key={r.id} onOpen={canEdit ? () => setSheetItem(r) : undefined}>
              <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
                <AppIcon icon="routine" size={20} color="var(--bal-primary)" />
                <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
                  {r.label}
                </Typography>
              </Stack>
              {r.timeOfDay.length > 0 ? (
                <Stack direction="row" sx={{ gap: 0.5, mt: 0.5, flexWrap: 'wrap' }}>
                  {r.timeOfDay.map((code) => (
                    <Typography
                      key={code}
                      variant="caption"
                      sx={{ px: 1, py: 0.25, borderRadius: '999px', bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)' }}
                    >
                      {t(`time_${code}`)}
                    </Typography>
                  ))}
                </Stack>
              ) : null}
              {r.note ? (
                <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
                  {r.note}
                </Typography>
              ) : null}
            </RowCard>
          ))}
        </Stack>
      )}

      {canEdit ? (
        <AppButton variant="outlined" color="primary" startIcon="add" onClick={() => setSheetItem('new')} sx={{ alignSelf: 'flex-start' }}>
          {t('add_routine')}
        </AppButton>
      ) : null}

      <RecordItemSheet open={sheetItem != null} title={sheetItem === 'new' ? t('add_routine') : t('edit_routine')} dirty={sheetDirty} onClose={close}>
        {sheetItem != null ? (
          <RoutineSheetBody
            initial={sheetItem === 'new' ? null : sheetItem}
            saving={saving}
            onCancel={close}
            onSave={handleSave}
            onDelete={sheetItem !== 'new' ? () => handleDelete((sheetItem as RoutineItem).id) : undefined}
            onDirtyChange={setSheetDirty}
          />
        ) : null}
      </RecordItemSheet>
    </Stack>
  );
}

function RoutineSheetBody({
  initial,
  saving,
  onCancel,
  onSave,
  onDelete,
  onDirtyChange,
}: {
  initial: RoutineItem | null;
  saving: boolean;
  onCancel: () => void;
  onSave: (item: RoutineItem) => void;
  onDelete?: () => void;
  onDirtyChange: (dirty: boolean) => void;
}) {
  const t = useTranslations('records');
  const form = useForm<{ label: string; timeOfDay: TimeOfDayCode[]; note: string }>({
    mode: 'onTouched',
    defaultValues: {
      label: initial?.label ?? '',
      timeOfDay: initial?.timeOfDay ?? [],
      note: initial?.note ?? '',
    },
  });
  const { control, formState, handleSubmit } = form;
  const { isDirty } = formState;
  const label = useWatch({ control, name: 'label' });

  useEffect(() => {
    onDirtyChange(isDirty);
  }, [isDirty, onDirtyChange]);

  return (
    <FormProvider {...form}>
      <Stack
        component="form"
        noValidate
        onSubmit={handleSubmit((values) =>
          onSave({
            id: initial?.id ?? newTempId(),
            label: values.label.trim(),
            timeOfDay: values.timeOfDay,
            note: values.note.trim() || null,
          }),
        )}
        sx={{ gap: 2 }}
      >
        <RhfTextField name="label" label={t('routine_label')} fullWidth required autoFocus />
        <RhfControlGroup name="timeOfDay" hint={t('time_of_day')}>
          {({ field }) => <TimeOfDayChipRow value={(field.value as TimeOfDayCode[]) ?? []} onChange={field.onChange} />}
        </RhfControlGroup>
        <RhfTextField name="note" label={t('routine_note')} fullWidth size="small" />
        <SheetActions onCancel={onCancel} onDelete={onDelete} saving={saving} canSave={label.trim().length > 0} />
      </Stack>
    </FormProvider>
  );
}

// ── Tasks ─────────────────────────────────────────────────────────────────────────────────────────────────
function TasksTab({
  data,
  canEdit,
  saving,
  onSave,
}: {
  data: CareTask[];
  canEdit: boolean;
  saving: boolean;
  onSave: (tasks: CareTask[], onDone: () => void) => void;
}) {
  const t = useTranslations('records');
  const [sheetItem, setSheetItem] = useState<CareTask | 'new' | null>(null);
  const [sheetDirty, setSheetDirty] = useState(false);
  const close = () => setSheetItem(null);

  const handleSave = (item: CareTask) => {
    const next = sheetItem === 'new' ? [...data, item] : data.map((task) => (task.id === item.id ? item : task));
    onSave(next, close);
  };
  const handleDelete = (id: string) => onSave(data.filter((task) => task.id !== id), close);
  const toggleDone = (task: CareTask) => onSave(data.map((t2) => (t2.id === task.id ? { ...t2, done: !t2.done } : t2)), () => {});

  return (
    <Stack sx={{ gap: 1.5 }}>
      {data.length === 0 ? (
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {t('tasks_empty')}
        </Typography>
      ) : (
        <Stack sx={{ gap: 1 }}>
          {data.map((task) => (
            <Paper key={task.id} elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)', p: 1 }}>
              <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
                <FormControlLabel
                  control={<Checkbox checked={task.done} onChange={() => (canEdit ? toggleDone(task) : undefined)} disabled={!canEdit || saving} />}
                  label=""
                  sx={{ m: 0 }}
                  aria-label={t('task_done')}
                />
                <AppButton
                  variant="text"
                  color="inherit"
                  disabled={!canEdit}
                  onClick={() => setSheetItem(task)}
                  sx={{ flexGrow: 1, justifyContent: 'flex-start', textAlign: 'start', minWidth: 0 }}
                >
                  <Typography variant="body2" sx={{ color: task.done ? 'text.secondary' : undefined }}>
                    {task.label}
                  </Typography>
                </AppButton>
                {canEdit ? <AppIcon icon="forward" size={16} color="var(--bal-text-secondary)" /> : null}
              </Stack>
            </Paper>
          ))}
        </Stack>
      )}

      {canEdit ? (
        <AppButton variant="outlined" color="primary" startIcon="add" onClick={() => setSheetItem('new')} sx={{ alignSelf: 'flex-start' }}>
          {t('add_task')}
        </AppButton>
      ) : null}

      <RecordItemSheet open={sheetItem != null} title={sheetItem === 'new' ? t('add_task') : t('edit_task')} dirty={sheetDirty} onClose={close}>
        {sheetItem != null ? (
          <TaskSheetBody
            initial={sheetItem === 'new' ? null : sheetItem}
            saving={saving}
            onCancel={close}
            onSave={handleSave}
            onDelete={sheetItem !== 'new' ? () => handleDelete((sheetItem as CareTask).id) : undefined}
            onDirtyChange={setSheetDirty}
          />
        ) : null}
      </RecordItemSheet>
    </Stack>
  );
}

function TaskSheetBody({
  initial,
  saving,
  onCancel,
  onSave,
  onDelete,
  onDirtyChange,
}: {
  initial: CareTask | null;
  saving: boolean;
  onCancel: () => void;
  onSave: (item: CareTask) => void;
  onDelete?: () => void;
  onDirtyChange: (dirty: boolean) => void;
}) {
  const t = useTranslations('records');
  const form = useForm<{ label: string; done: boolean }>({
    mode: 'onTouched',
    defaultValues: { label: initial?.label ?? '', done: initial?.done ?? false },
  });
  const { control, formState, handleSubmit } = form;
  const { isDirty } = formState;
  const label = useWatch({ control, name: 'label' });

  useEffect(() => {
    onDirtyChange(isDirty);
  }, [isDirty, onDirtyChange]);

  return (
    <FormProvider {...form}>
      <Stack
        component="form"
        noValidate
        onSubmit={handleSubmit((values) =>
          onSave({ id: initial?.id ?? newTempId(), label: values.label.trim(), done: values.done }),
        )}
        sx={{ gap: 2 }}
      >
        <RhfTextField name="label" label={t('task_label')} fullWidth required autoFocus />
        <RhfControlGroup name="done">
          {({ field }) => (
            <FormControlLabel
              control={
                <Checkbox checked={Boolean(field.value)} onChange={(event) => field.onChange(event.target.checked)} />
              }
              label={t('task_done')}
            />
          )}
        </RhfControlGroup>
        <SheetActions onCancel={onCancel} onDelete={onDelete} saving={saving} canSave={label.trim().length > 0} />
      </Stack>
    </FormProvider>
  );
}

// ── History (سوابق) — patient-scoped, read-only, month-grouped, paged ─────────────────────────────────────
// Best-effort read of the frozen variant display name from a cached booking snapshot — mirrors
// BookingDetailView's helper; never fetched (would be an N+1 against the booking detail per note).
function variantName(snapshotJson: string): string | null {
  try {
    const parsed = JSON.parse(snapshotJson) as { displayName?: string };
    return parsed?.displayName ?? null;
  } catch {
    return null;
  }
}

function HistoryTab({ patientId }: { patientId: number }) {
  const t = useTranslations('records');
  const locale = useLocale();
  const router = useRouter();
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const history = usePatientHistory(patientId, page);

  if (history.isLoading) {
    return (
      <Stack sx={{ gap: 1.5 }}>
        <Skeleton variant="rounded" height={96} />
        <Skeleton variant="rounded" height={96} />
      </Stack>
    );
  }
  if (history.isError || !history.data) {
    return (
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {t('load_error')}
      </Typography>
    );
  }

  const { items, total, pageSize } = history.data;
  if (items.length === 0) {
    return (
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {t('history_empty')}
      </Typography>
    );
  }

  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  // Group this page's notes by Shamsi month (notes already arrive newest-first from the server).
  const groups: Array<{ month: string; notes: VisitNote[] }> = [];
  for (const note of items) {
    const month = formatShamsiMonthYear(note.recordedAt, locale);
    const lastGroup = groups[groups.length - 1];
    if (lastGroup && lastGroup.month === month) lastGroup.notes.push(note);
    else groups.push({ month, notes: [note] });
  }

  return (
    <Stack sx={{ gap: 2 }}>
      {groups.map((group) => (
        <Stack key={group.month} direction="row" sx={{ gap: 1.5 }}>
          <Stack sx={{ alignItems: 'center', pt: 0.5 }}>
            <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'var(--bal-primary)' }} />
            <Box sx={{ width: '1px', flexGrow: 1, bgcolor: 'divider', mt: 0.5 }} />
          </Stack>
          <Stack sx={{ gap: 1.5, pb: 1, flexGrow: 1, minWidth: 0 }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: 'text.secondary' }}>
              {group.month}
            </Typography>
            {group.notes.map((note) => {
              const doneCount = note.taskResults.filter((task) => task.done).length;
              const booking = note.bookingId != null ? queryClient.getQueryData(bookingKeys.bookingDetail(note.bookingId)) : undefined;
              const service =
                booking && typeof booking === 'object' && 'variantSnapshotJson' in booking
                  ? variantName((booking as { variantSnapshotJson: string }).variantSnapshotJson)
                  : undefined;
              return (
                <VisitNoteCard
                  key={note.id}
                  note={note}
                  dateLabel={formatShamsiDate(note.recordedAt, locale)}
                  authorFallback={t('author_fallback')}
                  taskSummaryLabel={note.taskResults.length > 0 ? t('task_summary', { done: doneCount, total: note.taskResults.length }) : undefined}
                  serviceLabel={service ?? undefined}
                  bookingLinkLabel={note.bookingId != null ? t('view_booking') : undefined}
                  onOpenBooking={note.bookingId != null ? () => router.push(`/${locale}${bookingDetailPath(note.bookingId as number)}`) : undefined}
                />
              );
            })}
          </Stack>
        </Stack>
      ))}
      {totalPages > 1 ? (
        <Stack direction="row" sx={{ gap: 1, justifyContent: 'center', alignItems: 'center' }}>
          <AppButton variant="text" color="primary" disabled={page <= 1 || history.isFetching} onClick={() => setPage((n) => Math.max(1, n - 1))}>
            {t('prev')}
          </AppButton>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('page_of', { page, total: totalPages })}
          </Typography>
          <AppButton variant="text" color="primary" disabled={page >= totalPages || history.isFetching} onClick={() => setPage((n) => n + 1)}>
            {t('next')}
          </AppButton>
        </Stack>
      ) : null}
    </Stack>
  );
}

// ── Small shared bits ─────────────────────────────────────────────────────────────────────────────────────
function BackToPatients() {
  const t = useTranslations('records');
  const router = useRouter();
  const locale = useLocale();
  return (
    <AppButton
      variant="outlined"
      color="primary"
      onClick={() => router.push(`/${locale}${ROUTES.PATIENTS}`)}
      sx={{ alignSelf: 'flex-start' }}
    >
      {t('back_to_patients')}
    </AppButton>
  );
}

function RecordSkeleton() {
  return (
    <Stack sx={{ gap: 3, maxWidth: 640, mx: 'auto', width: '100%' }}>
      <Stack sx={{ gap: 1 }}>
        <Skeleton variant="text" width="50%" height={32} />
        <Skeleton variant="text" width="30%" />
      </Stack>
      <Skeleton variant="rounded" height={56} />
      <Skeleton variant="rounded" height={48} />
      <Skeleton variant="rounded" height={96} />
    </Stack>
  );
}
