import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { PatientTable } from "@/components/patients/patient-table";
import { BarcodeModal } from "@/components/chart/barcode-modal";
import { LabRxModal } from "@/components/chart/lab-rx-modal";
import { Barcode, FileText } from "lucide-react";

export function LabManagementTab() {
  const [selectedPatient, setSelectedPatient] = useState(null);
  const [barcodeOpen, setBarcodeOpen] = useState(false);
  const [labRxOpen, setLabRxOpen] = useState(false);

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Lab Actions</CardTitle>
          <CardDescription>
            {selectedPatient
              ? `Selected patient: ${selectedPatient.firstName} ${selectedPatient.lastName}`
              : "Select a patient below to get started."}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex gap-4">
            <Button
              variant="outline"
              className="gap-2"
              disabled={!selectedPatient}
              onClick={() => setBarcodeOpen(true)}
            >
              <Barcode className="h-4 w-4" />
              Create a Barcode
            </Button>
            <Button
              variant="outline"
              className="gap-2"
              disabled={!selectedPatient}
              onClick={() => setLabRxOpen(true)}
            >
              <FileText className="h-4 w-4" />
              Lab RX
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Patient Records</CardTitle>
          <CardDescription>Select a patient by clicking the checkbox.</CardDescription>
        </CardHeader>
        <CardContent>
          <PatientTable
            allowView={true}
            allowDelete={false}
            allowCheckbox={true}
            allowEdit={false}
            onSelectPatient={setSelectedPatient}
          />
        </CardContent>
      </Card>

      {selectedPatient && (
        <>
          <BarcodeModal
            open={barcodeOpen}
            onClose={() => setBarcodeOpen(false)}
            patient={selectedPatient}
          />
          <LabRxModal
            open={labRxOpen}
            onClose={() => setLabRxOpen(false)}
            patient={selectedPatient}
          />
        </>
      )}
    </div>
  );
}