import { useState, useMemo, useEffect, useCallback } from 'react';
import {
  Layout,
  Card,
  Row,
  Col,
  Table,
  Button,
  Space,
  Form,
  Input,
  Select,
  DatePicker,
  Switch,
  InputNumber,
  Modal,
  Alert,
  Typography,
  Descriptions,
  Tabs,
  AutoComplete,
  List,
  Grid,
  message
} from 'antd';
import {
  PlusOutlined,
  ArrowLeftOutlined,
  SaveOutlined,
  CheckCircleOutlined,
  PrinterOutlined,
  ExperimentOutlined,
  DeleteOutlined,
  EditOutlined,
  FilePdfOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { ClinicalService } from '@/services/clinical';
import { UsersService } from '@/services/users';
import { AppointmentsService } from '@/services/appointments';
import { PatientsService } from '@/services/patients';
import { ROUTES } from '@/constants/routes';
import { parseError } from '@/utils/errorHandler';

const { useBreakpoint } = Grid;

interface Consultation {
  id: string;
  appointment_id?: string;
  patient_id: string;
  doctor_id: string;
  consultation_date: string;
  chief_complaint?: string;
  present_illness?: string;
  examination_findings?: string;
  diagnosis?: string;
  treatment_plan?: string;
  notes?: string;
  follow_up_required: boolean;
  follow_up_date?: string;
  created_at: string;
  updated_at: string;
}

interface ConsultationDetail extends Consultation {
  patient?: {
    id: string;
    first_name: string;
    last_name: string;
    date_of_birth: string;
    gender: string;
    phone?: string;
    patient_number: string;
  };
  doctor?: {
    id: string;
    first_name: string;
    last_name: string;
    role: string;
  };
  appointment?: {
    id: string;
    appointment_date: string;
    status: string;
  };
  prescriptions?: Prescription[];
  lab_tests?: LabTest[];
}

interface VitalSign {
  id: string;
  patient_id: string;
  recorded_by_user_id: string;
  recorded_at: string;
  systolic_bp?: number;
  diastolic_bp?: number;
  pulse_rate?: number;
  temperature_celsius?: number;
  respiratory_rate?: number;
  weight_kg?: number;
  height_cm?: number;
  oxygen_saturation?: number;
  notes?: string;
  created_at: string;
  updated_at: string;
}

interface Prescription {
  id: string;
  consultation_id: string;
  patient_id: string;
  doctor_id: string;
  medication_name: string;
  dosage: string;
  frequency: string;
  duration: string;
  quantity?: number;
  route?: string;
  special_instructions?: string;
  is_active: boolean;
  prescribed_date: string;
  created_at: string;
  updated_at: string;
}

interface LabTest {
  id: string;
  patient_id: string;
  consultation_id?: string;
  ordered_by_doctor_id: string;
  test_name: string;
  test_type?: string;
  ordered_date: string;
  sample_collected_date?: string;
  result_date?: string;
  result_value?: string;
  result_unit?: string;
  reference_range?: string;
  status: 'ORDERED' | 'SAMPLE_COLLECTED' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED';
  notes?: string;
  created_at: string;
  updated_at: string;
}

interface PatientDetail {
  id: string;
  patient_number: string;
  first_name: string;
  last_name: string;
  date_of_birth: string;
  gender: string;
  phone?: string;
  email?: string;
  medical_record?: {
    id: string;
    blood_type?: string;
    allergies?: string;
    chronic_conditions?: string;
  };
  appointments?: Array<{
    id: string;
    appointment_date: string;
    status: string;
  }>;
}

interface User {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  role: string;
  phone?: string;
  department_id?: string;
  is_active: boolean;
}

interface Appointment {
  id: string;
  patient_id: string;
  doctor_id: string;
  department_id?: string;
  appointment_date: string;
  appointment_time: string;
  appointment_type: string;
  status: string;
  reason?: string;
}

const ClinicalPage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const screens = useBreakpoint();

  const [consultationForm] = Form.useForm();
  const [startConsultationForm] = Form.useForm();
  const [vitalSignsForm] = Form.useForm();
  const [prescriptionForm] = Form.useForm();
  const [labTestForm] = Form.useForm();
  const [labResultsForm] = Form.useForm();

  const [consultations, setConsultations] = useState<Consultation[]>([]);
  const [consultationsTotal, setConsultationsTotal] = useState(0);
  const [consultationsOffset, setConsultationsOffset] = useState(0);
  const [consultationsLimit, setConsultationsLimit] = useState(20);
  const [filterDateRange, setFilterDateRange] = useState<[any, any] | null>(null);
  const [filterDoctorId, setFilterDoctorId] = useState<string | null>(null);
  const [filterPatientSearch, setFilterPatientSearch] = useState('');
  const [filterStatus, setFilterStatus] = useState<string | null>(null);
  const [doctorsList, setDoctorsList] = useState<User[]>([]);
  const [consultationWorkspaceVisible, setConsultationWorkspaceVisible] = useState(false);
  const [selectedConsultationId, setSelectedConsultationId] = useState<string | null>(null);
  const [selectedConsultationDetail, setSelectedConsultationDetail] = useState<ConsultationDetail | null>(null);
  const [patientDetail, setPatientDetail] = useState<PatientDetail | null>(null);
  const [patientVitalSigns, setPatientVitalSigns] = useState<VitalSign[]>([]);
  const [patientPreviousConsultations, setPatientPreviousConsultations] = useState<Consultation[]>([]);
  const [prescriptions, setPrescriptions] = useState<Prescription[]>([]);
  const [labTests, setLabTests] = useState<LabTest[]>([]);
  const [checkedInAppointments, setCheckedInAppointments] = useState<Appointment[]>([]);
  const [vitalSignsModalVisible, setVitalSignsModalVisible] = useState(false);
  const [prescriptionModalVisible, setPrescriptionModalVisible] = useState(false);
  const [labTestModalVisible, setLabTestModalVisible] = useState(false);
  const [labResultsModalVisible, setLabResultsModalVisible] = useState(false);
  const [selectedLabTestId, setSelectedLabTestId] = useState<string | null>(null);
  const [startConsultationModalVisible, setStartConsultationModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [temperatureUnit] = useState('C');
  const [weightUnit] = useState('kg');
  const [heightUnit] = useState('cm');
  const [activeTab, setActiveTab] = useState('consultations');

  const { data: consultationsData, loading: consultationsLoading, execute: fetchConsultations } = useApi<{
    items: Consultation[];
    total: number;
    limit: number;
    offset: number;
  }>(ClinicalService.getConsultations);

  const { execute: fetchConsultationDetail } = useApi<ConsultationDetail>(ClinicalService.getConsultationsDetails);
  const { data: usersData, execute: fetchDoctors } = useApi<{ items: User[] }>(UsersService.list);
  const { data: appointmentsData, execute: fetchCheckedInAppointments } = useApi<{ items: Appointment[] }>(AppointmentsService.list);

  const bmi = useMemo(() => {
    if (patientVitalSigns.length > 0) {
      const vitals = patientVitalSigns[0];
      if (vitals?.weight_kg && vitals?.height_cm) {
        const heightM = vitals.height_cm / 100;
        return (vitals.weight_kg / Math.pow(heightM, 2)).toFixed(1);
      }
    }
    return null;
  }, [patientVitalSigns]);

  useEffect(() => {
    void fetchConsultations({
      limit: consultationsLimit,
      offset: consultationsOffset,
      patient_id: filterPatientSearch || undefined,
      doctor_id: filterDoctorId || undefined
    });
  }, [fetchConsultations, consultationsLimit, consultationsOffset, filterPatientSearch, filterDoctorId]);

  useEffect(() => {
    void fetchDoctors({ role: 'DOCTOR', is_active: true, limit: 100 });
  }, [fetchDoctors]);

  useEffect(() => {
    void fetchCheckedInAppointments({ status: 'CHECKED_IN', limit: 50 });
  }, [fetchCheckedInAppointments]);

  useEffect(() => {
    if (consultationsData?.items) {
      setConsultations(consultationsData.items);
      setConsultationsTotal(consultationsData.total ?? 0);
    }
  }, [consultationsData]);

  useEffect(() => {
    if (usersData?.items) {
      setDoctorsList(usersData.items);
    }
  }, [usersData]);

  useEffect(() => {
    if (appointmentsData?.items) {
      setCheckedInAppointments(appointmentsData.items);
    }
  }, [appointmentsData]);

  useEffect(() => {
    if (selectedConsultationId) {
      void loadConsultationDetail(selectedConsultationId);
    }
  }, [selectedConsultationId]);

  const loadConsultationDetail = async (consultationId: string) => {
    try {
      const detail = await fetchConsultationDetail(consultationId);
      setSelectedConsultationDetail(detail as ConsultationDetail);
      if (detail?.patient_id) {
        await loadPatientData(detail.patient_id);
      }
      consultationForm.setFieldsValue(detail);
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const loadPatientData = async (patientId: string) => {
    try {
      const patientResponse = await PatientsService.getDetails(patientId);
      setPatientDetail(patientResponse.data as PatientDetail);

      const vitalsResponse = await ClinicalService.getVitalSigns({ patient_id: patientId, limit: 50 });
      setPatientVitalSigns((vitalsResponse.data as { items: VitalSign[] })?.items ?? []);

      const consultationsResponse = await ClinicalService.getConsultations({ patient_id: patientId, limit: 50 });
      setPatientPreviousConsultations((consultationsResponse.data as { items: Consultation[] })?.items ?? []);
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleOpenStartConsultationModal = () => {
    setStartConsultationModalVisible(true);
  };

  const handleStartConsultation = async () => {
    try {
      const values = await startConsultationForm.validateFields();
      const response = await ClinicalService.createConsultations({
        appointment_id: values.appointment_id,
        patient_id: values.patient_id,
        doctor_id: values.doctor_id,
        consultation_date: values.consultation_date?.toISOString(),
        chief_complaint: ''
      });
      setSelectedConsultationDetail(response.data as ConsultationDetail);
      setSelectedConsultationId((response.data as ConsultationDetail).id);
      setStartConsultationModalVisible(false);
      setConsultationWorkspaceVisible(true);
      messageApi.success('Consultation started successfully');
      startConsultationForm.resetFields();
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleRowClick = async (record: Consultation) => {
    setSelectedConsultationId(record.id);
    setConsultationWorkspaceVisible(true);
  };

  const handleSaveConsultationDraft = async () => {
    try {
      const values = await consultationForm.validateFields();
      if (selectedConsultationId) {
        await ClinicalService.updateConsultationsById(selectedConsultationId, values);
        messageApi.success('Consultation saved as draft');
      }
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleCompleteConsultation = async () => {
    try {
      const values = await consultationForm.validateFields();
      if (!values.chief_complaint) {
        messageApi.error('Chief complaint is required to complete consultation');
        return;
      }
      if (!values.diagnosis) {
        messageApi.error('At least one diagnosis is required to complete consultation');
        return;
      }

      Modal.confirm({
        title: 'Complete Consultation',
        content: 'Are you sure you want to mark this consultation as complete?',
        onOk: async () => {
          if (selectedConsultationId) {
            await ClinicalService.createConsultationsComplete(selectedConsultationId);
            messageApi.success('Consultation completed successfully');
            void fetchConsultations({
              limit: consultationsLimit,
              offset: consultationsOffset,
              patient_id: filterPatientSearch || undefined,
              doctor_id: filterDoctorId || undefined
            });
          }
        }
      });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleOpenVitalSignsModal = () => {
    setVitalSignsModalVisible(true);
  };

  const handleRecordVitalSigns = async () => {
    try {
      const values = await vitalSignsForm.validateFields();
      await ClinicalService.createVitalSigns({
        patient_id: patientDetail?.id,
        recorded_by_user_id: '',
        recorded_at: new Date().toISOString(),
        ...values
      });
      setVitalSignsModalVisible(false);
      messageApi.success('Vital signs recorded successfully');
      vitalSignsForm.resetFields();
      if (patientDetail?.id) {
        const vitalsResponse = await ClinicalService.getVitalSigns({ patient_id: patientDetail.id, limit: 50 });
        setPatientVitalSigns((vitalsResponse.data as { items: VitalSign[] })?.items ?? []);
      }
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleOpenPrescriptionModal = () => {
    setPrescriptionModalVisible(true);
  };

  const handleAddPrescription = async () => {
    try {
      const values = await prescriptionForm.validateFields();
      await ClinicalService.createPrescriptions({
        consultation_id: selectedConsultationId,
        patient_id: patientDetail?.id,
        doctor_id: selectedConsultationDetail?.doctor_id,
        prescribed_date: new Date().toISOString().split('T')[0],
        is_active: true,
        ...values
      });
      setPrescriptionModalVisible(false);
      messageApi.success('Prescription added successfully');
      prescriptionForm.resetFields();
      if (selectedConsultationId) {
        const response = await ClinicalService.getPrescriptions({ consultation_id: selectedConsultationId, limit: 50 });
        setPrescriptions((response.data as { items: Prescription[] })?.items ?? []);
      }
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleRemovePrescription = async (prescriptionId: string) => {
    Modal.confirm({
      title: 'Remove Prescription',
      content: 'Are you sure you want to remove this prescription?',
      onOk: async () => {
        try {
          await ClinicalService.deletePrescriptionsById(prescriptionId);
          messageApi.success('Prescription removed');
          if (selectedConsultationId) {
            const response = await ClinicalService.getPrescriptions({ consultation_id: selectedConsultationId, limit: 50 });
            setPrescriptions((response.data as { items: Prescription[] })?.items ?? []);
          }
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  };

  const handleOpenLabTestModal = () => {
    setLabTestModalVisible(true);
  };

  const handleOrderLabTest = async () => {
    try {
      const values = await labTestForm.validateFields();
      await ClinicalService.createLabTests({
        patient_id: patientDetail?.id,
        consultation_id: selectedConsultationId,
        ordered_by_doctor_id: selectedConsultationDetail?.doctor_id,
        ordered_date: new Date().toISOString(),
        status: 'ORDERED',
        ...values
      });
      setLabTestModalVisible(false);
      messageApi.success('Lab test ordered successfully');
      labTestForm.resetFields();
      if (selectedConsultationId) {
        const response = await ClinicalService.getLabTests({ consultation_id: selectedConsultationId, limit: 50 });
        setLabTests((response.data as { items: LabTest[] })?.items ?? []);
      }
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleCollectSample = async (labTestId: string) => {
    Modal.confirm({
      title: 'Collect Sample',
      content: 'Mark this sample as collected?',
      onOk: async () => {
        try {
          await ClinicalService.createLabTestsCollectSample(labTestId);
          messageApi.success('Sample collected successfully');
          if (selectedConsultationId) {
            const response = await ClinicalService.getLabTests({ consultation_id: selectedConsultationId, limit: 50 });
            setLabTests((response.data as { items: LabTest[] })?.items ?? []);
          }
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  };

  const handleOpenLabResultsModal = (labTestId: string) => {
    setSelectedLabTestId(labTestId);
    setLabResultsModalVisible(true);
  };

  const handleEnterLabResults = async () => {
    try {
      const values = await labResultsForm.validateFields();
      if (selectedLabTestId) {
        await ClinicalService.createLabTestsEnterResults(selectedLabTestId, {
          result_value: values.result_value,
          result_unit: values.result_unit,
          reference_range: values.reference_range
        });
        setLabResultsModalVisible(false);
        messageApi.success('Lab results entered successfully');
        labResultsForm.resetFields();
        if (selectedConsultationId) {
          const response = await ClinicalService.getLabTests({ consultation_id: selectedConsultationId, limit: 50 });
          setLabTests((response.data as { items: LabTest[] })?.items ?? []);
        }
      }
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  };

  const handleBackToList = () => {
    setConsultationWorkspaceVisible(false);
    setSelectedConsultationId(null);
    setSelectedConsultationDetail(null);
  };

  const consultationsColumns = useMemo(() => [
    {
      title: 'Consultation ID',
      dataIndex: 'id',
      key: 'id',
      ellipsis: true,
      width: 140
    },
    {
      title: 'Patient',
      dataIndex: 'patient_id',
      key: 'patient_id',
      width: 160
    },
    {
      title: 'Doctor',
      dataIndex: 'doctor_id',
      key: 'doctor_id',
      width: 160
    },
    {
      title: 'Date',
      dataIndex: 'consultation_date',
      key: 'consultation_date',
      width: 140,
      render: (date: string) => (date ? new Date(date).toLocaleDateString() : '—')
    },
    {
      title: 'Chief Complaint',
      dataIndex: 'chief_complaint',
      key: 'chief_complaint',
      ellipsis: true
    },
    {
      title: 'Diagnosis',
      dataIndex: 'diagnosis',
      key: 'diagnosis',
      ellipsis: true,
      width: 200
    }
  ], []);

  const prescriptionsColumns = useMemo(() => [
    {
      title: 'Medication',
      dataIndex: 'medication_name',
      key: 'medication_name'
    },
    {
      title: 'Dosage',
      dataIndex: 'dosage',
      key: 'dosage',
      width: 100
    },
    {
      title: 'Frequency',
      dataIndex: 'frequency',
      key: 'frequency',
      width: 140
    },
    {
      title: 'Duration',
      dataIndex: 'duration',
      key: 'duration',
      width: 100
    },
    {
      title: 'Route',
      dataIndex: 'route',
      key: 'route',
      width: 100
    },
    {
      title: 'Instructions',
      dataIndex: 'special_instructions',
      key: 'special_instructions',
      ellipsis: true
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 80,
      render: (_: unknown, record: Prescription) => (
        <Button
          danger
          icon={<DeleteOutlined />}
          size="small"
          onClick={() => handleRemovePrescription(record.id)}
        />
      )
    }
  ], []);

  const labTestsColumns = useMemo(() => [
    {
      title: 'Test Name',
      dataIndex: 'test_name',
      key: 'test_name'
    },
    {
      title: 'Type',
      dataIndex: 'test_type',
      key: 'test_type',
      width: 120
    },
    {
      title: 'Ordered Date',
      dataIndex: 'ordered_date',
      key: 'ordered_date',
      width: 140,
      render: (date: string) => (date ? new Date(date).toLocaleDateString() : '—')
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      width: 140
    },
    {
      title: 'Result',
      dataIndex: 'result_value',
      key: 'result_value',
      width: 120
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 200,
      render: (_: unknown, record: LabTest) => (
        <Space size="small">
          {record.status === 'ORDERED' && (
            <Button
              icon={<ExperimentOutlined />}
              size="small"
              onClick={() => handleCollectSample(record.id)}
            >
              Collect Sample
            </Button>
          )}
          {(record.status === 'SAMPLE_COLLECTED' || record.status === 'IN_PROGRESS') && (
            <Button
              icon={<EditOutlined />}
              size="small"
              onClick={() => handleOpenLabResultsModal(record.id)}
            >
              Enter Results
            </Button>
          )}
        </Space>
      )
    }
  ], []);

  const doctorsOptions = useMemo(() => 
    doctorsList.map(doc => ({
      label: `${doc.first_name ?? ''} ${doc.last_name ?? ''}`,
      value: doc.id
    })),
    [doctorsList]
  );

  const appointmentsOptions = useMemo(() => 
    checkedInAppointments.map(apt => ({
      label: `${apt.patient_id} - ${apt.appointment_date}`,
      value: apt.id
    })),
    [checkedInAppointments]
  );

  if (consultationWorkspaceVisible && selectedConsultationDetail) {
    return (
      <div style={{ padding: screens.xs ? 12 : 24, minHeight: '100%' }}>
        {contextHolder}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <Button icon={<ArrowLeftOutlined />} onClick={handleBackToList}>
            Back to Consultations
          </Button>
          <Space size="middle">
            <Button icon={<SaveOutlined />} onClick={handleSaveConsultationDraft}>
              Save as Draft
            </Button>
            <Button type="primary" icon={<CheckCircleOutlined />} onClick={handleCompleteConsultation}>
              Mark Complete
            </Button>
          </Space>
        </div>

        <Row gutter={[16, 16]}>
          <Col xs={24} lg={8}>
            <Card size="small" title="Patient Summary" style={{ marginBottom: 16 }}>
              <Typography.Title level={4}>
                {patientDetail?.first_name ?? ''} {patientDetail?.last_name ?? ''}
              </Typography.Title>
              <Descriptions column={1} size="small">
                <Descriptions.Item label="Age">
                  {patientDetail?.date_of_birth ? new Date().getFullYear() - new Date(patientDetail.date_of_birth).getFullYear() : '—'}
                </Descriptions.Item>
                <Descriptions.Item label="Gender">{patientDetail?.gender ?? '—'}</Descriptions.Item>
                <Descriptions.Item label="Phone">{patientDetail?.phone ?? '—'}</Descriptions.Item>
                <Descriptions.Item label="Patient #">{patientDetail?.patient_number ?? '—'}</Descriptions.Item>
              </Descriptions>
              <Descriptions column={1} size="small" title="Medical Info" style={{ marginTop: 16 }}>
                <Descriptions.Item label="Blood Type">{patientDetail?.medical_record?.blood_type ?? '—'}</Descriptions.Item>
                <Descriptions.Item label="Allergies">{patientDetail?.medical_record?.allergies ?? '—'}</Descriptions.Item>
                <Descriptions.Item label="Chronic Conditions">{patientDetail?.medical_record?.chronic_conditions ?? '—'}</Descriptions.Item>
              </Descriptions>
            </Card>

            <Card 
              size="small" 
              title="Current Vitals" 
              extra={<Button type="link" icon={<PlusOutlined />} size="small" onClick={handleOpenVitalSignsModal}>Record Vitals</Button>}
              style={{ marginBottom: 16 }}
            >
              {patientVitalSigns.length > 0 && (
                <Descriptions column={2} size="small">
                  <Descriptions.Item label="BP">
                    {patientVitalSigns[0]?.systolic_bp ?? '—'}/{patientVitalSigns[0]?.diastolic_bp ?? '—'} mmHg
                  </Descriptions.Item>
                  <Descriptions.Item label="Temp">{patientVitalSigns[0]?.temperature_celsius ?? '—'} °C</Descriptions.Item>
                  <Descriptions.Item label="Pulse">{patientVitalSigns[0]?.pulse_rate ?? '—'} bpm</Descriptions.Item>
                  <Descriptions.Item label="Resp Rate">{patientVitalSigns[0]?.respiratory_rate ?? '—'} /min</Descriptions.Item>
                  <Descriptions.Item label="SpO2">{patientVitalSigns[0]?.oxygen_saturation ?? '—'} %</Descriptions.Item>
                  <Descriptions.Item label="Weight">{patientVitalSigns[0]?.weight_kg ?? '—'} kg</Descriptions.Item>
                  <Descriptions.Item label="Height">{patientVitalSigns[0]?.height_cm ?? '—'} cm</Descriptions.Item>
                  <Descriptions.Item label="BMI">{bmi ?? '—'}</Descriptions.Item>
                </Descriptions>
              )}
            </Card>
          </Col>

          <Col xs={24} lg={16}>
            <Tabs 
              activeKey={activeTab} 
              onChange={setActiveTab}
              type="card"
              items={[
                {
                  key: 'consultation',
                  label: 'Consultation',
                  children: (
                    <Card title="Consultation Details">
                      <Form form={consultationForm} layout="vertical" name="consultation_form">
                        <Form.Item 
                          label="Chief Complaint" 
                          name="chief_complaint"
                          rules={[{ required: true, message: 'Chief complaint is required' }]}
                        >
                          <Input.TextArea rows={3} placeholder="Describe the patient's chief complaint..." />
                        </Form.Item>
                        <Form.Item label="History of Present Illness" name="present_illness">
                          <Input.TextArea rows={4} placeholder="Describe the history of present illness..." />
                        </Form.Item>
                        <Form.Item label="Physical Examination Findings" name="examination_findings">
                          <Input.TextArea rows={4} placeholder="Document physical examination findings..." />
                        </Form.Item>
                        <Form.Item 
                          label="Diagnosis (ICD-10)" 
                          name="diagnosis"
                          rules={[{ required: true, message: 'At least one diagnosis is required' }]}
                        >
                          <Select mode="tags" showSearch placeholder="Search ICD-10 codes or enter diagnosis..." />
                        </Form.Item>
                        <Form.Item label="Treatment Plan" name="treatment_plan">
                          <Input.TextArea rows={4} placeholder="Describe the treatment plan and recommendations..." />
                        </Form.Item>
                        <Form.Item label="Clinical Notes" name="notes">
                          <Input.TextArea rows={3} placeholder="Additional clinical notes..." />
                        </Form.Item>
                        <Form.Item label="Follow-up Required" name="follow_up_required" valuePropName="checked">
                          <Switch checkedChildren="Yes" unCheckedChildren="No" />
                        </Form.Item>
                        <Form.Item label="Follow-up Date" name="follow_up_date">
                          <DatePicker style={{ width: '100%' }} />
                        </Form.Item>
                      </Form>
                    </Card>
                  )
                },
                {
                  key: 'prescriptions',
                  label: 'Prescriptions',
                  children: (
                    <Card title="Prescriptions">
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                        <Space>
                          <Button type="primary" icon={<PlusOutlined />} onClick={handleOpenPrescriptionModal}>
                            Add Prescription
                          </Button>
                          <Button icon={<PrinterOutlined />}>Print Prescriptions</Button>
                        </Space>
                      </div>
                      <Alert 
                        type="warning" 
                        message="Drug-Allergy Warning"
                        description="Check patient allergies before prescribing. Patient allergies are listed in the Patient Summary panel."
                        showIcon
                        closable
                        style={{ marginBottom: 16 }}
                      />
                      <Table
                        rowKey="id"
                        dataSource={prescriptions}
                        columns={prescriptionsColumns}
                        size="small"
                        pagination={false}
                        scroll={{ x: 'max-content' }}
                      />
                    </Card>
                  )
                },
                {
                  key: 'lab_tests',
                  label: 'Lab Tests',
                  children: (
                    <Card title="Lab Tests">
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                        <Button type="primary" icon={<ExperimentOutlined />} onClick={handleOpenLabTestModal}>
                          Order Lab Test
                        </Button>
                      </div>
                      <Table
                        rowKey="id"
                        dataSource={labTests}
                        columns={labTestsColumns}
                        size="small"
                        pagination={false}
                        scroll={{ x: 'max-content' }}
                      />
                    </Card>
                  )
                },
                {
                  key: 'history',
                  label: 'Consultation History',
                  children: (
                    <Card 
                      title="Consultation History"
                      extra={<Button icon={<FilePdfOutlined />}>Export to PDF</Button>}
                    >
                      <List
                        itemLayout="vertical"
                        size="small"
                        dataSource={patientPreviousConsultations}
                        renderItem={(item) => (
                          <List.Item>
                            <List.Item.Meta
                              title={new Date(item.consultation_date).toLocaleDateString()}
                              description={item.diagnosis ?? '—'}
                            />
                            <div>{item.chief_complaint}</div>
                            <div>{item.treatment_plan}</div>
                          </List.Item>
                        )}
                      />
                    </Card>
                  )
                }
              ]}
            />
          </Col>
        </Row>

        <Modal
          title="Record Vital Signs"
          open={vitalSignsModalVisible}
          onCancel={() => setVitalSignsModalVisible(false)}
          onOk={handleRecordVitalSigns}
          width={700}
          okText="Save Vital Signs"
        >
          <Form form={vitalSignsForm} layout="vertical" name="vital_signs_form">
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Form.Item label="Systolic BP (mmHg)" name="systolic_bp">
                  <InputNumber min={0} max={300} placeholder="120" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Diastolic BP (mmHg)" name="diastolic_bp">
                  <InputNumber min={0} max={200} placeholder="80" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Form.Item label="Temperature (°C)" name="temperature_celsius">
                  <InputNumber min={30} max={45} step={0.1} placeholder="36.5" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Pulse Rate (bpm)" name="pulse_rate">
                  <InputNumber min={40} max={200} placeholder="72" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Form.Item label="Respiratory Rate (/min)" name="respiratory_rate">
                  <InputNumber min={0} max={60} placeholder="16" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="SpO2 (%)" name="oxygen_saturation">
                  <InputNumber min={70} max={100} placeholder="98" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Form.Item label="Weight (kg)" name="weight_kg">
                  <InputNumber min={0} max={500} step={0.1} placeholder="70" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Height (cm)" name="height_cm">
                  <InputNumber min={0} max={300} step={0.1} placeholder="170" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
            <Form.Item label="Notes" name="notes">
              <Input.TextArea rows={2} placeholder="Additional notes..." />
            </Form.Item>
          </Form>
        </Modal>

        <Modal
          title="Add Prescription"
          open={prescriptionModalVisible}
          onCancel={() => setPrescriptionModalVisible(false)}
          onOk={handleAddPrescription}
          width={700}
          okText="Add Medication"
        >
          <Form form={prescriptionForm} layout="vertical" name="prescription_form">
            <Form.Item 
              label="Medication Name" 
              name="medication_name"
              rules={[{ required: true, message: 'Medication name is required' }]}
            >
              <AutoComplete placeholder="Search medication or type name..." style={{ width: '100%' }} />
            </Form.Item>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Form.Item 
                  label="Dosage Strength" 
                  name="dosage"
                  rules={[{ required: true, message: 'Dosage is required' }]}
                >
                  <Input placeholder="e.g., 500mg" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Dosage Form" name="route">
                  <Select 
                    placeholder="Select form..."
                    options={[
                      { label: 'Tablet', value: 'Tablet' },
                      { label: 'Capsule', value: 'Capsule' },
                      { label: 'Syrup', value: 'Syrup' },
                      { label: 'Injection', value: 'Injection' },
                      { label: 'Cream', value: 'Cream' },
                      { label: 'Drops', value: 'Drops' },
                      { label: 'Inhaler', value: 'Inhaler' }
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <Form.Item 
                  label="Frequency" 
                  name="frequency"
                  rules={[{ required: true, message: 'Frequency is required' }]}
                >
                  <Select 
                    placeholder="Select frequency..."
                    options={[
                      { label: 'Once daily', value: 'Once daily' },
                      { label: 'Twice daily', value: 'Twice daily' },
                      { label: 'Thrice daily', value: 'Thrice daily' },
                      { label: 'Every 6 hours', value: 'Every 6 hours' },
                      { label: 'Every 8 hours', value: 'Every 8 hours' },
                      { label: 'Every 12 hours', value: 'Every 12 hours' },
                      { label: 'As needed', value: 'As needed' }
                    ]}
                  />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item 
                  label="Duration (days)" 
                  name="duration"
                  rules={[{ required: true, message: 'Duration is required' }]}
                >
                  <Input placeholder="e.g., 7 days" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="Quantity" name="quantity">
                  <InputNumber min={1} placeholder="Qty" style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
            <Form.Item label="Special Instructions" name="special_instructions">
              <Input.TextArea rows={2} placeholder="e.g., Take after meals, avoid alcohol..." />
            </Form.Item>
          </Form>
        </Modal>

        <Modal
          title="Order Lab Test"
          open={labTestModalVisible}
          onCancel={() => setLabTestModalVisible(false)}
          onOk={handleOrderLabTest}
          width={600}
          okText="Order Test"
        >
          <Form form={labTestForm} layout="vertical" name="lab_test_form">
            <Form.Item 
              label="Test Name" 
              name="test_name"
              rules={[{ required: true, message: 'Test name is required' }]}
            >
              <AutoComplete placeholder="Search test catalog..." style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item label="Test Type" name="test_type">
              <Select 
                placeholder="Select type..."
                options={[
                  { label: 'Blood Test', value: 'Blood Test' },
                  { label: 'Urine Test', value: 'Urine Test' },
                  { label: 'Imaging', value: 'Imaging' },
                  { label: 'Pathology', value: 'Pathology' },
                  { label: 'Microbiology', value: 'Microbiology' },
                  { label: 'Other', value: 'Other' }
                ]}
              />
            </Form.Item>
            <Form.Item label="Special Instructions" name="notes">
              <Input.TextArea rows={3} placeholder="Special instructions for the lab..." />
            </Form.Item>
          </Form>
        </Modal>

        <Modal
          title="Enter Lab Results"
          open={labResultsModalVisible}
          onCancel={() => setLabResultsModalVisible(false)}
          onOk={handleEnterLabResults}
          width={600}
          okText="Save Results"
        >
          <Form form={labResultsForm} layout="vertical" name="lab_results_form">
            <Form.Item 
              label="Result Value" 
              name="result_value"
              rules={[{ required: true, message: 'Result value is required' }]}
            >
              <Input placeholder="Enter result value..." />
            </Form.Item>
            <Form.Item label="Unit" name="result_unit">
              <Input placeholder="e.g., mg/dL, mmol/L..." />
            </Form.Item>
            <Form.Item label="Reference Range" name="reference_range">
              <Input placeholder="e.g., 70-110 mg/dL" />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }

  return (
    <div style={{ padding: screens.xs ? 12 : 24, minHeight: '100%' }}>
      {contextHolder}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <Typography.Title level={2} style={{ margin: 0 }}>
          Clinical & Consultation
        </Typography.Title>
        <Space size="middle">
          <Button type="primary" icon={<PlusOutlined />} size="large" onClick={handleOpenStartConsultationModal}>
            Start Consultation
          </Button>
        </Space>
      </div>

      <Card size="small" style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]} align="middle">
          <Col xs={24} sm={12} md={6}>
            <DatePicker.RangePicker 
              placeholder={['Start Date', 'End Date']}
              style={{ width: '100%' }}
              value={filterDateRange}
              onChange={setFilterDateRange}
            />
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Select
              placeholder="Select Doctor"
              allowClear
              showSearch
              optionFilterProp="label"
              style={{ width: '100%' }}
              value={filterDoctorId}
              onChange={setFilterDoctorId}
              options={doctorsOptions}
            />
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Input.Search
              placeholder="Search patient name or ID..."
              allowClear
              value={filterPatientSearch}
              onChange={(e) => setFilterPatientSearch(e.target.value)}
            />
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Select
              placeholder="All Statuses"
              allowClear
              style={{ width: '100%' }}
              value={filterStatus}
              onChange={setFilterStatus}
              options={[
                { label: 'Draft', value: 'DRAFT' },
                { label: 'Completed', value: 'COMPLETED' }
              ]}
            />
          </Col>
        </Row>
      </Card>

      <Card bodyStyle={{ padding: 0 }}>
        <Table
          rowKey="id"
          dataSource={consultations}
          columns={consultationsColumns}
          loading={consultationsLoading}
          size={screens.xs ? 'small' : 'middle'}
          onRow={(record) => ({
            onClick: () => handleRowClick(record)
          })}
          pagination={{
            current: Math.floor(consultationsOffset / consultationsLimit) + 1,
            pageSize: consultationsLimit,
            total: consultationsTotal,
            showSizeChanger: true,
            showTotal: (total) => `Total ${total} items`,
            onChange: (page, pageSize) => {
              setConsultationsOffset((page - 1) * pageSize);
              setConsultationsLimit(pageSize);
            }
          }}
          scroll={{ x: 'max-content' }}
        />
      </Card>

      <Modal
        title="Start New Consultation"
        open={startConsultationModalVisible}
        onCancel={() => setStartConsultationModalVisible(false)}
        onOk={handleStartConsultation}
        width={600}
        okText="Start Consultation"
      >
        <Form form={startConsultationForm} layout="vertical" name="start_consultation_form">
          <Form.Item 
            label="Select Checked-In Appointment" 
            name="appointment_id"
            rules={[{ required: true, message: 'Please select a checked-in appointment' }]}
          >
            <Select
              showSearch
              placeholder="Select a checked-in appointment..."
              optionFilterProp="label"
              style={{ width: '100%' }}
              options={appointmentsOptions}
            />
          </Form.Item>
          <Form.Item label="Doctor" name="doctor_id">
            <Select
              showSearch
              placeholder="Select doctor..."
              style={{ width: '100%' }}
              options={doctorsOptions}
            />
          </Form.Item>
          <Form.Item label="Consultation Date" name="consultation_date">
            <DatePicker showTime style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ClinicalPage;