'use client';
import { FunctionComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AppIcon, SurfaceCard } from '@/components/common';
import type { VisitNote } from '@/services/patientRecords/types';

export interface VisitNoteCardProps {
  /** One nurse-authored visit note (read-only from the client's perspective). */
  note: VisitNote;
  /** Pre-formatted Shamsi date/time — the caller owns locale. */
  dateLabel: string;
  /** Shown when the note has no recorded nurse name. */
  authorFallback: string;
}

/**
 * One read-only visit note in the longitudinal history — the nurse's display name, the Shamsi date, the note
 * body, and (if any) the checklist the nurse ticked as done/not-done chips. Purely presentational (the caller
 * formats the date and supplies the author fallback); reused by the customer سوابق tab and the nurse
 * continuity view. Clinical text is rendered verbatim and never logged.
 * @component VisitNoteCard
 */
const VisitNoteCard: FunctionComponent<VisitNoteCardProps> = ({ note, dateLabel, authorFallback }) => {
  return (
    <SurfaceCard padding="sm">
      <Stack direction="row" sx={{ alignItems: 'center', gap: 1, mb: 1, flexWrap: 'wrap' }}>
        <AppIcon icon="notes" size={18} color="var(--bal-primary)" />
        <Typography variant="body2" sx={{ fontWeight: 700 }}>
          {note.nurseDisplayName?.trim() || authorFallback}
        </Typography>
        <Typography variant="caption" sx={{ color: 'text.secondary', marginInlineStart: 'auto' }}>
          {dateLabel}
        </Typography>
      </Stack>

      <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
        {note.body}
      </Typography>

      {note.taskResults.length > 0 ? (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 1 }}>
          {note.taskResults.map((task, index) => (
            <Chip
              key={`${task.label}-${index}`}
              size="small"
              variant="outlined"
              icon={
                <AppIcon
                  icon={task.done ? 'verified' : 'pending'}
                  size={14}
                  color={task.done ? 'var(--bal-success)' : 'var(--bal-text-secondary)'}
                />
              }
              label={task.label}
              sx={{ color: task.done ? undefined : 'text.secondary' }}
            />
          ))}
        </Box>
      ) : null}
    </SurfaceCard>
  );
};

/** Matches the real card's anatomy (author/date row, body lines, task-chip row) for the visit-note history. */
const VisitNoteCardSkeleton: FunctionComponent = () => (
  <SurfaceCard padding="sm">
    <Stack direction="row" sx={{ alignItems: 'center', gap: 1, mb: 1 }}>
      <Skeleton variant="circular" width={18} height={18} />
      <Skeleton variant="text" width={100} height={20} />
      <Skeleton variant="text" width={80} height={16} sx={{ marginInlineStart: 'auto' }} />
    </Stack>
    <Skeleton variant="text" width="100%" height={18} />
    <Skeleton variant="text" width="80%" height={18} />
    <Stack direction="row" sx={{ gap: 0.5, mt: 1 }}>
      <Skeleton variant="rounded" width={70} height={24} />
      <Skeleton variant="rounded" width={70} height={24} />
    </Stack>
  </SurfaceCard>
);

export default Object.assign(VisitNoteCard, { Skeleton: VisitNoteCardSkeleton });
