import React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../../../src/components/ui/dialog";
import { Badge } from "../../../../../src/components/ui/badge";
import { Button } from "../../../../../src/components/ui/button";
import { Label } from "../../../../../src/components/ui/label";
import { Edit, Trash2, X } from "lucide-react";

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  viewingStore: any;
  handleEdit: (store: any) => void;
  handleDelete: (id: string) => void;
}

const StoreViewDialog = ({ open, onOpenChange, viewingStore, handleEdit, handleDelete }: Props) => {
  if (!viewingStore) return null;
  const formatTime = (time: string) => {
    return new Date(`1970-01-01T${time}`).toLocaleTimeString([], {
        hour: "numeric",
        minute: "2-digit",
        hour12: true,
    });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <div className="flex items-center max-w-lg min-h-[calc(100%-0.5rem)] my-1 mx-auto">
          <div className="relative flex flex-col w-full rounded-lg gap-0 border-0 bg-white p-0 shadow-lg dark:bg-[#1f2a37] dark:text-white">

            <DialogHeader className="flex-shrink-0">
              <DialogTitle>Store Details</DialogTitle>
              <X
                className="h-6 w-6 p-1 text-white cursor-pointer"
                onClick={() => onOpenChange(false)}
              />
            </DialogHeader>

            <div className="p-4 pl-2 pr-2 pb-0 flex flex-col flex-1">
              <div className="max-h-[60vh] min-h-[60vh] flex-1 pl-2 overflow-y-auto pr-2 pt-2 space-y-4 pb-4">
                <div className="space-y-6 pb-4">

                  <div className="grid grid-cols-2 gap-3">
                    <div className="col-span-2 space-y-0.5">
                      <Label className="text-xs text-gray-500">Store Name</Label>
                      <p className="text-sm font-medium">{viewingStore.name}</p>
                    </div>

                    <div className="col-span-2 space-y-0.5">
                      <Label className="text-xs text-gray-500">Address</Label>
                      <p className="text-sm">{viewingStore.address}</p>
                    </div>

                    {/* <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">City</Label>
                      <p className="text-sm">{viewingStore.city}</p>
                    </div> */}

                    {/* <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">State</Label>
                      <p className="text-sm">{viewingStore.state}</p>
                    </div> */}

                    {/* <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">Pincode</Label>
                      <p className="text-sm">{viewingStore.pincode}</p>
                    </div> */}

                    <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">Phone</Label>
                      <p className="text-sm">{viewingStore.phone}</p>
                    </div>

                    <div className="col-span-2 space-y-0.5">
                      <Label className="text-xs text-gray-500">Store Hours</Label>
                        <p className="text-sm">
                        {formatTime(viewingStore.openTime)} -{" "}
                        {formatTime(viewingStore.closeTime)}
                        </p>
                    </div>

                    {/* <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">Coordinates</Label>
                      <p className="text-sm">{viewingStore.coordinates?.lat}, {viewingStore.coordinates?.lng}</p>
                    </div> */}

                    {/* <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500">Brand</Label>
                      <p className="text-sm capitalize">{viewingStore.brand}</p>
                    </div> */}

                    <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500 mr-2">Status</Label>
                      <Badge variant={viewingStore.isActive ? "default" : "secondary"} className="mt-1">
                        {viewingStore.isActive ? "Active" : "Inactive"}
                      </Badge>
                    </div>

                    {/* <div className="space-y-0.5">
                      <Label className="text-xs text-gray-500 mr-2">Flagship</Label>
                      <Badge variant={viewingStore.isFlagship ? "default" : "secondary"} className="mt-1">
                        {viewingStore.isFlagship ? "Yes" : "No"}
                      </Badge>
                    </div> */}
                  </div>

                </div>
              </div>

              <div className="flex justify-end space-x-3 px-4 pb-3 pt-3 border-t -mx-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => { onOpenChange(false); handleEdit(viewingStore); }}
                >
                  <Edit className="w-4 h-4 mr-2" />
                  Edit
                </Button>
                <Button
                  variant="danger"
                  size="sm"
                  onClick={() => { onOpenChange(false); handleDelete(viewingStore._id); }}
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  Delete
                </Button>
              </div>
            </div>

          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default React.memo(StoreViewDialog);