import { useState } from 'react';
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import moment from 'moment';

const ShowDialog = () => {
  const { showDetailDialog, setShowDetailDialog, selectedNotification } =
    useManageNotificationContext();
  const [isLoading, setIsLoading] = useState(false);

  return (
    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
      <DialogContent className="max-w-[95vw] sm:max-w-[1000px] p-4 overflow-hidden">
        <DialogHeader>
          <DialogTitle>Notification Details</DialogTitle>
        </DialogHeader>
        <DialogBody>
          <div className="py-4 max-h-[70vh] overflow-y-auto">
            {isLoading ? (
              <div className="text-center text-gray-500">Loading details...</div>
            ) : (
              <div className="w-full">
                {/* Mobile View (Card Layout) */}
                <div className="md:hidden space-y-3">
                  {selectedNotification ? (
                    <div className="border rounded-lg p-4 space-y-2">
                      <div>
                        <p className="text-xs text-gray-500">Send</p>
                        <p className="text-sm font-medium">
                          {selectedNotification.all_customers === 'Y'
                            ? 'All Customers'
                            : selectedNotification.customer_name || '-'}
                        </p>
                      </div>
                      <div>
                        <p className="text-xs text-gray-500">Content</p>
                        <p className="text-sm break-words whitespace-normal">
                          {selectedNotification.content}
                        </p>
                      </div>
                      {/* Field lainnya... */}
                    </div>
                  ) : null}
                </div>

                {/* Desktop View (Table) */}
                <div className="hidden md:block overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="bg-gray-100 text-left">
                        <th className="p-3 text-sm min-w-[120px] max-w-[180px]">Send</th>
                        <th className="p-3 text-sm min-w-[200px]">Content</th>
                        <th className="p-3 text-sm min-w-[100px]">Subject</th>
                        <th className="p-3 text-sm min-w-[80px]">Type</th>
                        <th className="p-3 text-sm min-w-[80px]">Via</th>
                        <th className="p-3 text-sm min-w-[150px]">Date Create</th>
                      </tr>
                    </thead>
                    <tbody>
                      {selectedNotification && (
                        <tr className="border-b">
                          <td className="p-3 text-sm max-w-[180px] overflow-hidden text-ellipsis">
                            {selectedNotification.all_customers === 'Y'
                              ? 'All Customers'
                              : selectedNotification.customer_name || '-'}
                          </td>
                          <td className="p-3 text-sm break-words whitespace-pre-wrap max-w-[300px]">
                            {selectedNotification.content}
                          </td>
                          <td className="p-3 text-sm">{selectedNotification.subject}</td>
                          <td className="p-3 text-sm">{selectedNotification.type}</td>
                          <td className="p-3 text-sm">{selectedNotification.via}</td>
                          <td className="p-3 text-sm">
                            {moment(selectedNotification.created_at).format('YYYY-MM-DD HH:mm:ss')}
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        </DialogBody>
      </DialogContent>
    </Dialog>
  );
};

export default ShowDialog;
