// function LetterViewer() {
//     return (
//        {/* Record Details Display */}
//             {selectedLetterId && (
//               <div className="mt-6 space-y-4">
//                 <h3 className="text-lg font-semibold text-gray-800">
//                   {t("delegation.letterDetails")}
//                 </h3>

//                 {isLoadingRecord ? (
//                   <div className="flex items-center justify-center py-8">
//                     <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
//                     <span className="ml-2">{t("common.loading")}</span>
//                   </div>
//                 ) : selectedRecord ? (
//                   <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">

//                     <Card className="xl:col-span-1">
//                       <CardHeader>
//                         <CardTitle className="flex items-center gap-2">
//                           <FileText className="h-5 w-5" />
//                           {t("delegation.recordInformation")}
//                         </CardTitle>
//                       </CardHeader>
//                       <CardContent className="space-y-4">
//                         <div className="border-b border-gray-100 pb-3">
//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                             {t("common.referenceNumber")}
//                           </label>
//                           <p className="text-sm text-gray-900 mt-1 font-medium">
//                             {selectedRecord.referenceNumber ||
//                               t("common.notAvailable")}
//                           </p>
//                         </div>

//                         <div className="border-b border-gray-100 pb-3">
//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                             {t("common.subject")}
//                           </label>
//                           <p className="text-sm text-gray-900 mt-1 line-clamp-2">
//                             {selectedRecord.content?.[0]?.subject ||
//                               t("common.notAvailable")}
//                           </p>
//                         </div>

//                         {selectedRecord.content?.[0]?.receiverPositions &&
//                           selectedRecord.content[0].receiverPositions.length >
//                           0 && (
//                             <div className="border-b border-gray-100 pb-3">
//                               <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                                 {t("delegation.receiverPositions")}
//                               </label>
//                               <div className="text-sm text-gray-900 mt-1">
//                                 {selectedRecord.content[0].receiverPositions.map(
//                                   (receiver, index) => (
//                                     <span
//                                       key={receiver.id}
//                                       className="inline-block">
//                                       <span className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs mr-1 mb-1 inline-block">
//                                         {localizedName(
//                                           receiver?.position?.name
//                                         ) || t("common.notAvailable")}
//                                       </span>
//                                     </span>
//                                   )
//                                 )}
//                               </div>
//                             </div>
//                           )}

//                         {selectedRecord.initiator && (
//                           <div className="border-b border-gray-100 pb-3">
//                             <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                               {t("delegation.initiator")}
//                             </label>
//                             <p className="text-sm text-gray-900 mt-1">
//                               {localizedName(selectedRecord?.initiator?.name) ||
//                                 t("common.notAvailable")}
//                             </p>
//                           </div>
//                         )}

//                         <div className="border-b border-gray-100 pb-3">
//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                             {t("common.status")}
//                           </label>
//                           <div className="mt-1">
//                             <Badge
//                               variant={
//                                 selectedRecord.statusKey === "Dispatched"
//                                   ? "default"
//                                   : selectedRecord.statusKey === "Draft"
//                                     ? "secondary"
//                                     : selectedRecord.statusKey === "Submitted"
//                                       ? "outline"
//                                       : "secondary"
//                               }>
//                               {t(
//                                 `status.${selectedRecord.statusKey.toLowerCase()}`,
//                                 selectedRecord.statusKey
//                               )}
//                             </Badge>
//                           </div>
//                         </div>

//                         <div className="border-b border-gray-100 pb-3">
//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                             {t("common.createdDate")}
//                           </label>
//                           <p className="text-sm text-gray-900 mt-1">
//                             {selectedRecord.createdAt
//                               ? formatDate(
//                                 selectedRecord.createdAt,
//                                 lang === "am" ? "am-ET" : "en-US"
//                               )
//                               : t("common.notAvailable")}
//                           </p>
//                         </div>

//                         {selectedRecord.dispatchedDate && (
//                           <div>
//                             <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
//                               {t("common.dispatchedDate")}
//                             </label>
//                             <p className="text-sm text-gray-900 mt-1">
//                               {formatDate(
//                                 selectedRecord.dispatchedDate,
//                                 lang === "am" ? "am-ET" : "en-US"
//                               )}
//                             </p>
//                           </div>
//                         )}
//                       </CardContent>
//                     </Card>

//                     {/* PDF Viewer */}
//                     <Card className="lg:col-span-2">
//                       <CardHeader>
//                         <CardTitle className="flex items-center gap-2">
//                           <Eye className="h-5 w-5" />
//                           {t("delegation.letterPreview")}
//                         </CardTitle>
//                       </CardHeader>
//                       <CardContent>
//                         {isLoadingPdf ? (
//                           <div className="flex items-center justify-center h-[600px] bg-gray-50 rounded-md">
//                             <div className="text-center">
//                               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
//                               <p className="text-sm text-gray-500">
//                                 {t("delegation.loadingPdf")}
//                               </p>
//                             </div>
//                           </div>
//                         ) : pdfUrl ? (
//                           <div className="space-y-3">
//                             <iframe
//                               src={pdfUrl}
//                               className="w-full h-[600px] border rounded-md"
//                               title={t("delegation.letterPreview")}
//                               onError={() =>
//                                 setPdfError(t("delegation.pdfLoadError"))
//                               }
//                             />
//                             <Button
//                               type="button"
//                               variant="outline"
//                               size="sm"
//                               onClick={() => window.open(pdfUrl, "_blank")}
//                               className="w-full">
//                               <Eye className="h-4 w-4 mr-2" />
//                               {t("delegation.openInNewTab")}
//                             </Button>
//                           </div>
//                         ) : (
//                           <div className="flex items-center justify-center h-[600px] bg-gray-50 rounded-md">
//                             <div className="text-center">
//                               <FileText className="h-12 w-12 text-gray-400 mx-auto mb-2" />
//                               <p className="text-sm text-gray-500">
//                                 {pdfError || t("delegation.pdfNotAvailable")}
//                               </p>
//                               {pdfError &&
//                                 pdfError !==
//                                 t("delegation.pdfNotAvailable") && (
//                                   <Button
//                                     type="button"
//                                     variant="outline"
//                                     size="sm"
//                                     onClick={() => {
//                                       // Retry PDF loading
//                                       const fetchPdf = async () => {
//                                         if (
//                                           selectedRecord &&
//                                           selectedLetterId
//                                         ) {
//                                           setIsLoadingPdf(true);
//                                           setPdfError(null);
//                                           try {
//                                             const isDispatched =
//                                               selectedRecord.statusKey ===
//                                               "Dispatched";
//                                             const isDraft = [
//                                               "Draft",
//                                               "Adjustment",
//                                             ].includes(
//                                               selectedRecord.statusKey
//                                             );
//                                             let pdfResponse;

//                                             if (isDispatched) {
//                                               // For dispatched records, use fetchLetterById (returns MinIO presigned URL)
//                                               pdfResponse =
//                                                 await fetchLetterById(
//                                                   selectedLetterId
//                                                 );
//                                             } else if (isDraft) {
//                                               // For draft/adjustment records, use preview endpoint (returns ArrayBuffer)
//                                               pdfResponse =
//                                                 await fetchLetterPreview(
//                                                   selectedLetterId
//                                                 );
//                                             } else {
//                                               // For other statuses, try fetchLetterById first
//                                               pdfResponse =
//                                                 await fetchLetterById(
//                                                   selectedLetterId
//                                                 );
//                                             }

//                                             // Handle different response types
//                                             let finalPdfUrl = null;

//                                             if (pdfResponse) {
//                                               if (
//                                                 pdfResponse instanceof
//                                                 ArrayBuffer
//                                               ) {
//                                                 // Handle ArrayBuffer response (from preview endpoint)
//                                                 if (
//                                                   pdfResponse.byteLength > 0
//                                                 ) {
//                                                   const blob = new Blob(
//                                                     [pdfResponse],
//                                                     { type: "application/pdf" }
//                                                   );
//                                                   finalPdfUrl =
//                                                     URL.createObjectURL(blob);
//                                                 }
//                                               } else if (
//                                                 typeof pdfResponse ===
//                                                 "object" &&
//                                                 pdfResponse.presigned
//                                               ) {
//                                                 // Handle MinIO presigned URL response
//                                                 finalPdfUrl =
//                                                   pdfResponse.presigned;
//                                               } else if (
//                                                 typeof pdfResponse ===
//                                                 "string" &&
//                                                 pdfResponse.startsWith("http")
//                                               ) {
//                                                 // Handle direct URL response
//                                                 finalPdfUrl = pdfResponse;
//                                               }
//                                             }

//                                             if (finalPdfUrl) {
//                                               setPdfUrl(finalPdfUrl);
//                                               setPdfError(null);
//                                             } else {
//                                               setPdfError(
//                                                 t("delegation.pdfNotAvailable")
//                                               );
//                                             }
//                                           } catch (error: any) {
//                                             setPdfError(
//                                               t("delegation.pdfLoadError")
//                                             );
//                                           } finally {
//                                             setIsLoadingPdf(false);
//                                           }
//                                         }
//                                       };
//                                       fetchPdf();
//                                     }}
//                                     className="mt-2">
//                                     {t("delegation.retryPdf")}
//                                   </Button>
//                                 )}
//                             </div>
//                           </div>
//                         )}
//                       </CardContent>
//                     </Card>
//                   </div>
//                 ) : (
//                   <Card>
//                     <CardContent className="py-8">
//                       <div className="text-center">
//                         <FileText className="h-12 w-12 text-gray-400 mx-auto mb-2" />
//                         <p className="text-sm text-gray-500">
//                           {t("delegation.recordNotFound")}
//                         </p>
//                       </div>
//                     </CardContent>
//                   </Card>
//                 )}
//               </div>
//             )}
//     );
// }

// export default LetterViewer;