"use client";

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import { Calendar as CalendarIcon, FileText, MapPin, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { format } from "date-fns";
import {
  DailyReportData,
  useDailyReportQuery,
} from "@/redux/services/reports.api";
import { useGetBranchQuery } from "@/redux/services/branchs.api";
import myHTML from "@/lib/htmlPDF";

// Dynamic import of html2pdf to prevent server-side issues
// const html2pdf = dynamic(() => import("html2pdf.js"), { ssr: false });

interface LocationCardProps {
  address: string;
  name: string;
  branchId?: string;
  onPreviewChange: (url: string) => void;
}

interface PreviewData {
  show: boolean;
  url: string;
}

const LocationCard: React.FC<LocationCardProps> = ({
  address,
  name,
  branchId,
  onPreviewChange,
}) => {
  const [date, setDate] = useState<Date>(new Date());
  const { data: dailyReportData, isLoading: dailyReportLoading } =
    useDailyReportQuery({
      date: date.toLocaleDateString(),
      branchId,
    });

  const handleViewReport = async () => {
    if (!dailyReportData) {
      console.error("No report data available");
      return;
    }

    const html = myHTML(dailyReportData as DailyReportData[], date);
    const options = {
      margin: [0.1, 0.1, 0.2, 0.1],
      filename: `${name}_report_${format(
        date,
        "yyyy-MM-dd"
      )}_${new Date().toLocaleTimeString()}.pdf`,
      image: { type: "jpeg", quality: 0.98 },
      html2canvas: { scale: 1 },
      pagebreak: { mode: ["css", "legacy"] },
      jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
    };

    try {
      // Dynamically import html2pdf.js only when needed
      const html2pdf = (await import("html2pdf.js")).default;
      html2pdf().set(options).from(html).save();
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  return (
    <Card className="w-full">
      <CardHeader className=" pb-4">
        {/* <CardTitle className="text-2xl font-bold">{name}</CardTitle>
        <div className="flex items-start gap-2 text-muted-foreground mt-1">
          <MapPin className="h-5 w-5 shrink-0 mt-0.5" />
          <span className="text-sm">{address}</span>
        </div> */}
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="h-[40px]">
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className="w-full justify-start text-left font-normal"
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {format(date, "PPP")}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
              <Calendar
                mode="single"
                selected={date}
                onSelect={(newDate) => newDate && setDate(newDate)}
                initialFocus
              />
            </PopoverContent>
          </Popover>
        </div>
        <div className="grid grid-cols-2 gap-2">
          <Button
            variant="appVariant"
            onClick={handleViewReport}
            disabled={dailyReportLoading}
          >
            <FileText className="mr-2 h-4 w-4" />
            {dailyReportLoading ? "Loading..." : "View Report"}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};

const PreviewModal: React.FC<{ url: string; onClose: () => void }> = ({
  url,
  onClose,
}) => (
  <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div className="bg-white p-4 rounded-lg w-full h-full max-w-4xl max-h-[90vh]">
      <div className="flex justify-end mb-2">
        <Button
          variant="outline"
          onClick={onClose}
          className="hover:bg-gray-100"
        >
          <X className="h-4 w-4" />
        </Button>
      </div>
      <iframe
        src={url}
        className="w-full h-[calc(100%-3rem)]"
        title="PDF Preview"
      />
    </div>
  </div>
);

const LocationReports: React.FC = () => {
  const { data: branches, isLoading: isBranchesLoading } = useGetBranchQuery();
  const [previewData, setPreviewData] = useState<PreviewData>({
    show: false,
    url: "",
  });

  const handlePreviewChange = (url: string) => {
    setPreviewData({ show: true, url });
  };

  const handleClosePreview = () => {
    if (previewData.url) {
      URL.revokeObjectURL(previewData.url);
    }
    setPreviewData({ show: false, url: "" });
  };

  if (isBranchesLoading) {
    return (
      <div className="container mx-auto p-6 flex justify-center items-center">
        <div>Loading branches...</div>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-6">
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {branches?.map((branch) => (
          <LocationCard
            key={branch._id}
            branchId={branch._id}
            address={branch.address}
            name={branch.name}
            onPreviewChange={handlePreviewChange}
          />
        ))}
      </div>

      {previewData.show && (
        <PreviewModal url={previewData.url} onClose={handleClosePreview} />
      )}
    </div>
  );
};

export default LocationReports;