import React from 'react';
import styled from 'styled-components';
import { Box } from '@material-ui/core';

import {
  BaseModal,
  Button,
  TranslatedReferenceData,
  TranslatedText,
  useDateTime,
} from '@tamanu/ui-components';
import { trimToDate } from '@tamanu/utils/dateTime';
import { Colors } from '../../constants/styles';
import { PatientNameDisplay } from '../PatientNameDisplay';
import { useTranslation } from '../../contexts/Translation';
import { useAuth } from '../../contexts/Auth';
import { getDrugUnitLabel } from '@tamanu/shared/utils/medication';
import { buildInstructionText, usePresetLabelsQuery } from '../../utils/medications';

const StyledModal = styled(BaseModal)`
  .MuiPaper-root {
    max-width: 620px;
  }
`;

const Container = styled.div`
  padding: 22px 8px 40px;
`;

const DetailsContainer = styled(Box)`
  padding: 12px 20px;
  border: 1px solid ${Colors.outline};
  border-radius: 3px;
  background-color: ${Colors.white};
`;

const MidText = styled(Box)`
  font-size: 14px;
  line-height: 18px;
  color: ${Colors.midText};
`;

const DarkestText = styled(Box)`
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: ${Colors.darkestText};
`;

const ActionRow = styled(Box)`
  margin: 0 -32px -8px;
  padding: 20px 40px 0 40px;
  border-top: 1px solid ${Colors.outline};
  display: flex;
  justify-content: flex-end;
`;

export const DispensedMedicationDetailsModal = ({ open, onClose, item }) => {
  const { formatShortest } = useDateTime();
  const { getTranslation, getEnumTranslation } = useTranslation();
  const { facilityId } = useAuth();
  const { hasPresetLabels } = usePresetLabelsQuery({ enabled: open, facilityId });
  if (!item || !open) return null;

  const {
    prescription,
    medication,
    quantity,
    instructions,
    remainingRepeats,
    displayId,
    dispensedAt,
    dispensedBy,
    patient,
    medicationPresetLabel,
  } = item;

  // The dispense stores the label text in `instructions`; the clinical Instructions
  // shown here are derived from the prescription, mirroring the dispense modals.
  const derivedInstructions = buildInstructionText(prescription, getTranslation, getEnumTranslation);

  const leftDetails = [
    {
      label: (
        <TranslatedText stringId="medication.dispenseDetails.patientId" fallback="Patient ID" />
      ),
      value: patient?.displayId || '-',
    },
    {
      label: (
        <TranslatedText stringId="medication.dispenseDetails.medication" fallback="Medication" />
      ),
      value: (
        <TranslatedReferenceData
          fallback={medication?.name}
          value={medication?.id}
          category={medication?.type}
        />
      ),
    },
    {
      label: (
        <TranslatedText
          stringId="medication.dispenseDetails.dateDispensed"
          fallback="Date dispensed"
        />
      ),
      value: dispensedAt ? formatShortest(dispensedAt) : '-',
    },
    {
      label: (
        <TranslatedText stringId="medication.dispenseDetails.dispensedBy" fallback="Dispensed by" />
      ),
      value: dispensedBy?.displayName || '-',
    },
    {
      label: (
        <TranslatedText
          stringId="medication.dispenseDetails.instructions"
          fallback="Instructions"
        />
      ),
      value: derivedInstructions || '-',
    },
    ...(hasPresetLabels
      ? [
          {
            label: (
              <TranslatedText
                stringId="medication.dispenseDetails.presetLabels"
                fallback="Preset labels"
              />
            ),
            value: medicationPresetLabel?.code || '-',
          },
        ]
      : []),
  ];

  const rightDetails = [
    {
      label: (
        <TranslatedText stringId="medication.dispenseDetails.patientName" fallback="Patient name" />
      ),
      value: patient ? <PatientNameDisplay patient={patient} /> : '-',
    },
    {
      label: (
        <TranslatedText
          stringId="medication.dispenseDetails.prescriptionDate"
          fallback="Prescription date"
        />
      ),
      value: prescription?.date ? formatShortest(trimToDate(prescription.date)) : '-',
    },
    {
      label: (
        <TranslatedText
          stringId="medication.dispenseDetails.qtyDispensed"
          fallback="Qty dispensed"
        />
      ),
      value: prescription?.dispensingUnit
        ? `${quantity} ${getDrugUnitLabel(prescription.dispensingUnit, quantity, getEnumTranslation)}`
        : (quantity ?? '-'),
    },
    {
      label: (
        <TranslatedText stringId="medication.dispenseDetails.requestNo" fallback="Request no." />
      ),
      value: displayId || '-',
    },
    {
      label: (
        <TranslatedText
          stringId="medication.dispenseDetails.remainingRepeats"
          fallback="Remaining repeats"
        />
      ),
      value: remainingRepeats ?? 0,
    },
    {
      label: (
        <TranslatedText stringId="medication.dispenseDetails.labelText" fallback="Label text" />
      ),
      value: instructions || '-',
    },
  ];

  return (
    <StyledModal
      open={open}
      title={
        <TranslatedText
          stringId="medication.dispenseDetails.title"
          fallback="Dispensed medication"
        />
      }
      onClose={onClose}
    >
      <Container>
        <DetailsContainer display="flex" justifyContent="space-between">
          <Box flex={1.1}>
            {leftDetails.map((detail, index) => (
              <Box key={index} mb={index === leftDetails.length - 1 ? 0 : 2}>
                <MidText>{detail.label}</MidText>
                <DarkestText mt={0.5}>{detail.value}</DarkestText>
              </Box>
            ))}
          </Box>
          <Box flex={1} pl={2.5} borderLeft={`1px solid ${Colors.outline}`}>
            {rightDetails.map((detail, index) => (
              <Box key={index} mb={index === rightDetails.length - 1 ? 0 : 2}>
                <MidText>{detail.label}</MidText>
                <DarkestText mt={0.5}>{detail.value}</DarkestText>
              </Box>
            ))}
          </Box>
        </DetailsContainer>
      </Container>

      <ActionRow>
        <Button onClick={onClose}>
          <TranslatedText stringId="general.action.close" fallback="Close" />
        </Button>
      </ActionRow>
    </StyledModal>
  );
};
