
import React, { useState, useEffect, useRef } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import {
  Download,
  Printer,
  CheckCircle2,
  Clock,
  Eye,
  ZoomIn,
  ZoomOut,
  Maximize2,
  Minimize2,
  ChevronLeft,
  ChevronRight,
  FileText,
  RefreshCw,
  PenTool,
  Upload, // Added Upload icon
} from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import { useQuery } from "@tanstack/react-query"; // Added useQuery import
import { base44 } from "@/api/base44Client"; // Added base44 import

export default function DocumentViewer({
  documentUrl,
  documentName,
  documentType = "Contract",
  onAcknowledge,
  initialNotes = "",
  isAcknowledged = false,
  timeSpent = 0,
}) {
  const [notes, setNotes] = useState(initialNotes);
  const [startTime] = useState(Date.now());
  const [reviewTime, setReviewTime] = useState(timeSpent);
  const [pageNumber, setPageNumber] = useState(1);
  const [zoom, setZoom] = useState(100);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [signerName, setSignerName] = useState("");
  const [signatureData, setSignatureData] = useState(null);
  const [isDrawing, setIsDrawing] = useState(false);
  
  const canvasRef = useRef(null);
  const { toast } = useToast();

  // Fetch current user to check for saved signature
  const { data: currentUser } = useQuery({
    queryKey: ['current-user-doc-viewer'],
    queryFn: () => base44.auth.me(),
  });

  // Track time spent
  useEffect(() => {
    const interval = setInterval(() => {
      const elapsed = Math.floor((Date.now() - startTime) / 60000);
      setReviewTime(timeSpent + elapsed);
    }, 60000);

    return () => clearInterval(interval);
  }, [startTime, timeSpent]);

  // Initialize canvas
  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas) {
      const ctx = canvas.getContext('2d');
      ctx.strokeStyle = '#1C323E';
      ctx.lineWidth = 2;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
    }
  }, []);

  // Pre-fill signer name from user profile
  useEffect(() => {
    if (currentUser?.full_name && !signerName) {
      setSignerName(currentUser.full_name);
    }
  }, [currentUser, signerName]);

  const handlePrint = () => {
    const printWindow = window.open(documentUrl, '_blank');
    if (printWindow) {
      printWindow.addEventListener('load', () => {
        printWindow.focus();
        setTimeout(() => {
          printWindow.print();
        }, 500);
      });
    }
  };

  const handleDownloadPDF = () => {
    const link = document.createElement('a');
    link.href = documentUrl;
    link.download = `${documentName}.pdf`;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleAcknowledge = async () => {
    if (!signerName.trim()) {
      toast({
        title: "Name Required",
        description: "Please enter your full name before accepting.",
        variant: "destructive",
      });
      return;
    }

    if (!signatureData) {
      toast({
        title: "Signature Required",
        description: "Please sign the document before accepting.",
        variant: "destructive",
      });
      return;
    }

    // Save signature to user profile for future use
    if (currentUser?.id && signatureData) {
      try {
        await base44.auth.updateMe({ saved_signature: signatureData });
      } catch (error) {
        console.error("Failed to save signature to profile:", error);
      }
    }

    if (onAcknowledge) {
      onAcknowledge({
        notes,
        reviewTime,
        signerName,
        signature: signatureData,
        acknowledgedDate: new Date().toISOString()
      });
    }
  };

  const handleFullscreenToggle = () => {
    if (!isFullscreen) {
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.exitFullscreen(); // Corrected for webkit
      } else if (document.msExitFullscreen) {
        document.exitFullscreen(); // Corrected for ms
      }
    }
    setIsFullscreen(!isFullscreen);
  };

  // Signature pad functions
  const startDrawing = (e) => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    
    setIsDrawing(true);
    
    const x = (e.clientX || e.touches?.[0]?.clientX) - rect.left;
    const y = (e.clientY || e.touches?.[0]?.clientY) - rect.top;
    
    ctx.beginPath();
    ctx.moveTo(x, y);
  };

  const draw = (e) => {
    if (!isDrawing) return;
    
    e.preventDefault();
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    
    const x = (e.clientX || e.touches?.[0]?.clientX) - rect.left;
    const y = (e.clientY || e.touches?.[0]?.clientY) - rect.top;
    
    ctx.lineTo(x, y);
    ctx.stroke();
  };

  const stopDrawing = () => {
    if (isDrawing) {
      const canvas = canvasRef.current;
      if (canvas) {
        setSignatureData(canvas.toDataURL('image/png'));
      }
      setIsDrawing(false);
    }
  };

  const clearSignature = () => {
    const canvas = canvasRef.current;
    if (canvas) {
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    setSignatureData(null);
  };

  // NEW: Adopt saved signature
  const adoptSavedSignature = () => {
    if (!currentUser?.saved_signature) {
      toast({
        title: "No Saved Signature",
        description: "You don't have a saved signature yet.",
        variant: "destructive",
      });
      return;
    }

    const canvas = canvasRef.current;
    if (!canvas) {
      toast({
        title: "Error",
        description: "Signature pad not ready.",
        variant: "destructive",
      });
      return;
    }

    const ctx = canvas.getContext('2d');
    const img = new Image();
    
    img.onload = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      setSignatureData(currentUser.saved_signature);
      toast({
        title: "Signature Adopted",
        description: "Your saved signature has been loaded.",
      });
    };
    
    img.onerror = () => {
      toast({
        title: "Failed to Load Signature",
        description: "Could not load your saved signature.",
        variant: "destructive",
      });
    };
    
    img.src = currentUser.saved_signature;
  };

  const googleDocsViewerUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(documentUrl)}&embedded=true`;

  return (
    <div className="space-y-4">
      {/* Simplified Control Bar */}
      <Card className="border-2 border-[#0A39DF] shadow-2xl sticky top-4 z-20 bg-gradient-to-r from-[#0A39DF] to-[#1C323E]">
        <CardContent className="p-4">
          <div className="flex items-center justify-between gap-4">
            {/* Left: Document Info */}
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center">
                <FileText className="w-6 h-6 text-[#0A39DF]" />
              </div>
              <div>
                <h3 className="font-bold text-white">{documentName}</h3>
                <div className="flex items-center gap-3 mt-1">
                  <Badge variant="outline" className="text-xs bg-white/20 text-white border-white/30">
                    {documentType}
                  </Badge>
                  <span className="text-xs text-white/80 flex items-center gap-1">
                    <Clock className="w-3 h-3" />
                    {reviewTime} min
                  </span>
                </div>
              </div>
            </div>

            {/* Right: Actions */}
            <div className="flex items-center gap-2">
              <Button
                onClick={handleDownloadPDF}
                size="sm"
                variant="outline"
                className="bg-white/10 border-white/30 text-white hover:bg-white/20"
              >
                <Download className="w-4 h-4 mr-2" />
                Download
              </Button>
              <Button
                onClick={handlePrint}
                size="sm"
                variant="outline"
                className="bg-white/10 border-white/30 text-white hover:bg-white/20"
              >
                <Printer className="w-4 h-4 mr-2" />
                Print
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Full Width PDF Viewer */}
      <Card className="border-slate-200 shadow-xl">
        <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b border-slate-100 p-4">
          <div className="flex items-center justify-between">
            <CardTitle className="text-base flex items-center gap-2">
              <Eye className="w-5 h-5 text-[#0A39DF]" />
              Document Preview
            </CardTitle>
            
            {/* PDF Controls */}
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-1 bg-slate-100 rounded-lg p-1">
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-8 w-8"
                  onClick={() => setPageNumber(Math.max(1, pageNumber - 1))}
                >
                  <ChevronLeft className="w-4 h-4" />
                </Button>
                <Input
                  type="number"
                  value={pageNumber}
                  onChange={(e) => setPageNumber(parseInt(e.target.value) || 1)}
                  className="w-16 h-8 text-center text-sm"
                  min="1"
                />
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-8 w-8"
                  onClick={() => setPageNumber(pageNumber + 1)}
                >
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>

              <div className="flex items-center gap-1 bg-slate-100 rounded-lg p-1">
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-8 w-8"
                  onClick={() => setZoom(Math.max(50, zoom - 10))}
                >
                  <ZoomOut className="w-4 h-4" />
                </Button>
                <span className="text-xs font-medium px-2">{zoom}%</span>
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-8 w-8"
                  onClick={() => setZoom(Math.min(200, zoom + 10))}
                >
                  <ZoomIn className="w-4 h-4" />
                </Button>
              </div>

              <Button
                size="icon"
                variant="ghost"
                className="h-8 w-8"
                onClick={handleFullscreenToggle}
              >
                {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className={`w-full bg-slate-50 ${isFullscreen ? 'h-screen' : 'h-[800px]'}`}>
            <iframe
              src={googleDocsViewerUrl}
              className="w-full h-full"
              title={documentName}
              style={{ border: 'none' }}
            />
          </div>
        </CardContent>
      </Card>

      {/* Acknowledge Section */}
      {!isAcknowledged && (
        <Card className="border-slate-200 shadow-xl">
          <CardHeader className="bg-gradient-to-br from-green-50 to-white border-b border-slate-100">
            <CardTitle className="text-base flex items-center gap-2">
              <CheckCircle2 className="w-5 h-5 text-green-600" />
              Acknowledge & Accept
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-6">
            {/* Full Name Input */}
            <div>
              <Label className="text-sm font-medium">Full Name *</Label>
              <Input
                value={signerName}
                onChange={(e) => setSignerName(e.target.value)}
                placeholder="Enter your full legal name"
                className="mt-2"
                required
              />
            </div>

            {/* Signature Pad */}
            <div>
              <Label className="text-sm font-medium flex items-center gap-2">
                <PenTool className="w-4 h-4" />
                Digital Signature *
              </Label>
              <p className="text-xs text-slate-500 mt-1 mb-2">
                Sign using your mouse or fingertip on touch devices
              </p>
              <div className="border-2 border-dashed border-slate-300 rounded-lg p-4 bg-white">
                <canvas
                  ref={canvasRef}
                  width={600}
                  height={200}
                  className="w-full border border-slate-200 rounded cursor-crosshair touch-none"
                  style={{ touchAction: 'none' }}
                  onMouseDown={startDrawing}
                  onMouseMove={draw}
                  onMouseUp={stopDrawing}
                  onMouseLeave={stopDrawing}
                  onTouchStart={startDrawing}
                  onTouchMove={draw}
                  onTouchEnd={stopDrawing}
                />
                <div className="flex justify-between items-center mt-2">
                  {/* NEW: Adopt Signature Button */}
                  {currentUser?.saved_signature && (
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={adoptSavedSignature}
                      className="text-[#0A39DF] border-[#0A39DF] hover:bg-blue-50"
                    >
                      <Upload className="w-3 h-3 mr-2" />
                      Use Saved Signature
                    </Button>
                  )}
                  <div className={currentUser?.saved_signature ? "" : "ml-auto"}>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={clearSignature}
                      className="text-slate-600"
                    >
                      <RefreshCw className="w-3 h-3 mr-2" />
                      Clear Signature
                    </Button>
                  </div>
                </div>
              </div>
            </div>

            {/* Additional Notes */}
            <div>
              <Label className="text-sm font-medium">Additional Notes (Optional)</Label>
              <Textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                placeholder="Add any notes or comments about this document..."
                rows={3}
                className="mt-2"
              />
            </div>

            {/* Acknowledgment Statement */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <p className="text-sm text-blue-900">
                <strong>By signing below, I acknowledge that:</strong>
              </p>
              <ul className="text-sm text-blue-800 mt-2 space-y-1 list-disc list-inside">
                <li>I have read and understood this {documentType}</li>
                <li>I agree to the terms and conditions outlined</li>
                <li>My electronic signature is legally binding</li>
                <li>Review time: {reviewTime} {reviewTime === 1 ? 'minute' : 'minutes'}</li>
              </ul>
            </div>

            <Button
              onClick={handleAcknowledge}
              className="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white py-6 text-lg font-bold shadow-xl"
            >
              <CheckCircle2 className="w-6 h-6 mr-3" />
              I Have Read and Accept This {documentType}
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  );
}
