"use client";

import { AlertCircle, Calendar, CheckCircle, XCircle } from "lucide-react";
import moment from "moment";
import { Badge } from "~/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog";
import { ScrollArea } from "~/components/ui/scroll-area";

interface HistoryModalProps {
  data: IHistory[];
  open: boolean;
  setOpen: (value: boolean) => void;
}

export function HistoryModal({ data, open, setOpen }: HistoryModalProps) {
  const getStatusIcon = (published: boolean, hasError: boolean) => {
    if (hasError) return <XCircle className="h-4 w-4 text-red-500" />;
    if (published) return <CheckCircle className="h-4 w-4 text-green-500" />;
    return <AlertCircle className="h-4 w-4 text-yellow-500" />;
  };

  const getStatusBadge = (published: boolean, hasError: boolean) => {
    if (hasError) return <Badge variant="destructive">Error</Badge>;
    if (published)
      return (
        <Badge variant="default" className="bg-green-500">
          Published
        </Badge>
      );
    return <Badge variant="secondary">Not Published</Badge>;
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-w-2xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            Activity History ({data.length} items)
          </DialogTitle>
        </DialogHeader>
        <ScrollArea className="h-[500px] pr-4">
          <div className="space-y-4">
            {data.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                No history data available
              </div>
            ) : (
              data.map((item) => (
                <div
                  key={item.id}
                  className="border rounded-lg p-4 space-y-3 hover:bg-muted/50 transition-colors"
                >
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-2">
                      {getStatusIcon(item.published, !!item.error)}
                      <span className="font-medium">ID: {item.id}</span>
                    </div>
                    {getStatusBadge(item.published, !!item.error)}
                  </div>

                  {item.error && (
                    <div className="bg-red-50 border border-red-200 rounded-md p-3">
                      <div className="flex items-start gap-2">
                        <AlertCircle className="h-4 w-4 text-red-500 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-medium text-red-800">
                            Error:
                          </p>
                          <p className="text-sm text-red-700 mt-1">
                            {item.error}
                          </p>
                        </div>
                      </div>
                    </div>
                  )}

                  {item.message && (
                    <div className=" border border-gray-200 rounded-md p-3">
                      <div className="flex items-start gap-2">
                        <AlertCircle className="h-4 w-4  mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-medium ">Message:</p>
                          <p className="text-sm  mt-1">{item.message}</p>
                        </div>
                      </div>
                    </div>
                  )}

                  <div className="flex justify-between text-sm text-muted-foreground">
                    <span></span>
                    <span>
                      Created: {moment(item.created_at).format("dd/MM/yyyy")}
                    </span>
                  </div>
                </div>
              ))
            )}
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  );
}
