/**
 * SharePanel — universal share dialog for ANY document URL.
 *
 * Channels: WhatsApp · Email · Direct Download · Google Drive · Copy Link · QR Code
 *
 * Usage:
 *   const [open, setOpen] = useState(false);
 *   <SharePanel
 *      open={open}
 *      onOpenChange={setOpen}
 *      url="https://my.cdn.com/inv-001.pdf"
 *      title="Invoice INV-001"
 *      message="Aapka invoice attached hai 🧾"
 *      phone="9876543210"   // optional, pre-fills WhatsApp
 *      email="customer@x.com"
 *   />
 *
 * Pure presentational — no API calls, no state outside the dialog.
 */
import React, { useEffect, useMemo, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
    MessageCircle, Mail, Download, Cloud, Copy as CopyIcon, QrCode, CheckCircle2, Share2, Link2, ExternalLink,
} from "lucide-react";
import { toast } from "sonner";

export default function SharePanel({
    open,
    onOpenChange,
    url,
    title = "Document",
    message = "",
    phone = "",
    email = "",
    fileName = "",
}) {
    const [waPhone, setWaPhone] = useState("");
    const [waMessage, setWaMessage] = useState("");
    const [emailTo, setEmailTo] = useState("");
    const [emailSubject, setEmailSubject] = useState("");
    const [emailBody, setEmailBody] = useState("");
    const [qrSrc, setQrSrc] = useState("");

    // Reset state every time the dialog opens with new content
    useEffect(() => {
        if (!open) return;
        setWaPhone(phone || "");
        setWaMessage(message || `Aapka ${title} ka link: ${url}`);
        setEmailTo(email || "");
        setEmailSubject(title);
        setEmailBody(message || `Namaste,\n\n${title} ka link niche diya hai:\n${url}\n\nThanks,\nRGE REGALGOA`);
        // Build QR code (lazy import qrcode lib)
        setQrSrc("");
        if (url) {
            import("qrcode").then((mod) => {
                mod.default.toDataURL(url, { width: 320, margin: 1, errorCorrectionLevel: "M" })
                    .then(setQrSrc)
                    .catch(() => setQrSrc(""));
            }).catch(() => setQrSrc(""));
        }
    }, [open, url, title, message, phone, email]);

    // Pre-build wa.me + mailto URLs
    const waLink = useMemo(() => {
        const digits = String(waPhone || "").replace(/\D/g, "");
        const normalised = digits.length === 10 ? "91" + digits : digits;
        return `https://wa.me/${normalised}?text=${encodeURIComponent(waMessage)}`;
    }, [waPhone, waMessage]);

    const mailtoLink = useMemo(() => {
        return `mailto:${encodeURIComponent(emailTo)}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
    }, [emailTo, emailSubject, emailBody]);

    const copyLink = async () => {
        try {
            await navigator.clipboard.writeText(url);
            toast.success("Link copied ✓");
        } catch (e) { toast.error("Copy failed"); }
    };

    const downloadFile = () => {
        const a = document.createElement("a");
        a.href = url;
        a.download = fileName || (title || "document").replace(/\s+/g, "-").toLowerCase();
        a.target = "_blank";
        a.click();
    };

    const downloadQR = () => {
        if (!qrSrc) return;
        const a = document.createElement("a");
        a.href = qrSrc;
        a.download = `${(title || "share").replace(/\s+/g, "-").toLowerCase()}-qr.png`;
        a.click();
    };

    const driveSearch = () => {
        // Open Google Drive search for the file name — user can upload manually
        window.open("https://drive.google.com/drive/my-drive", "_blank", "noopener,noreferrer");
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-lg" data-testid="share-panel">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Share2 className="h-5 w-5 text-emerald-600" />
                        Share {title}
                    </DialogTitle>
                    <DialogDescription>WhatsApp / Email / Drive / QR — kisi bhi tareeke se share karein</DialogDescription>
                </DialogHeader>

                {/* Link bar */}
                <div className="flex items-center gap-1.5 rounded-md border bg-muted/40 px-2 py-1.5 text-xs">
                    <Link2 className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                    <code className="flex-1 truncate font-mono">{url || "—"}</code>
                    <Button size="sm" variant="ghost" onClick={copyLink} className="h-7 px-2" data-testid="share-copy">
                        <CopyIcon className="h-3.5 w-3.5" />
                    </Button>
                </div>

                <Tabs defaultValue="whatsapp">
                    <TabsList className="grid grid-cols-5 w-full">
                        <TabsTrigger value="whatsapp" data-testid="share-tab-whatsapp"><MessageCircle className="h-3.5 w-3.5 mr-1" />WA</TabsTrigger>
                        <TabsTrigger value="email" data-testid="share-tab-email"><Mail className="h-3.5 w-3.5 mr-1" />Email</TabsTrigger>
                        <TabsTrigger value="download" data-testid="share-tab-download"><Download className="h-3.5 w-3.5 mr-1" />File</TabsTrigger>
                        <TabsTrigger value="drive" data-testid="share-tab-drive"><Cloud className="h-3.5 w-3.5 mr-1" />Drive</TabsTrigger>
                        <TabsTrigger value="qr" data-testid="share-tab-qr"><QrCode className="h-3.5 w-3.5 mr-1" />QR</TabsTrigger>
                    </TabsList>

                    {/* WhatsApp */}
                    <TabsContent value="whatsapp" className="space-y-3 mt-3">
                        <div>
                            <Label className="text-[10px]">Phone (10 digit ya 91XXXXXXXXXX)</Label>
                            <Input value={waPhone} onChange={(e) => setWaPhone(e.target.value)} placeholder="9876543210" className="h-9" data-testid="share-wa-phone" />
                        </div>
                        <div>
                            <Label className="text-[10px]">Message (link included)</Label>
                            <Textarea rows={4} value={waMessage} onChange={(e) => setWaMessage(e.target.value)} className="font-mono text-xs" data-testid="share-wa-msg" />
                        </div>
                        <a href={waLink} target="_blank" rel="noopener noreferrer" className="block">
                            <Button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white" data-testid="share-wa-send">
                                <MessageCircle className="h-4 w-4 mr-1.5" /> Open WhatsApp
                            </Button>
                        </a>
                    </TabsContent>

                    {/* Email */}
                    <TabsContent value="email" className="space-y-3 mt-3">
                        <div>
                            <Label className="text-[10px]">To</Label>
                            <Input value={emailTo} onChange={(e) => setEmailTo(e.target.value)} placeholder="customer@example.com" className="h-9" data-testid="share-email-to" />
                        </div>
                        <div>
                            <Label className="text-[10px]">Subject</Label>
                            <Input value={emailSubject} onChange={(e) => setEmailSubject(e.target.value)} className="h-9" data-testid="share-email-subj" />
                        </div>
                        <div>
                            <Label className="text-[10px]">Body</Label>
                            <Textarea rows={4} value={emailBody} onChange={(e) => setEmailBody(e.target.value)} className="font-mono text-xs" data-testid="share-email-body" />
                        </div>
                        <a href={mailtoLink} className="block">
                            <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" data-testid="share-email-send">
                                <Mail className="h-4 w-4 mr-1.5" /> Open Email Client
                            </Button>
                        </a>
                    </TabsContent>

                    {/* Direct Download */}
                    <TabsContent value="download" className="space-y-3 mt-3">
                        <div className="rounded-lg border p-4 text-center">
                            <Download className="h-10 w-10 mx-auto text-emerald-600 mb-2" />
                            <p className="text-sm">File directly download karein</p>
                            <p className="text-[10px] text-muted-foreground mt-1 font-mono">{fileName || "auto-detected"}</p>
                            <Button onClick={downloadFile} className="mt-3 bg-emerald-600 hover:bg-emerald-700 text-white" data-testid="share-download">
                                <Download className="h-4 w-4 mr-1.5" /> Download Now
                            </Button>
                        </div>
                    </TabsContent>

                    {/* Drive Link */}
                    <TabsContent value="drive" className="space-y-3 mt-3">
                        <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 p-3 text-xs text-blue-700 dark:text-blue-400">
                            💡 Google Drive integration ke through file upload Backup Center se hota hai. Yahaan se aap link copy karke Drive mein paste kar sakte hain.
                        </div>
                        <Button onClick={copyLink} variant="outline" className="w-full" data-testid="share-drive-copy"><CopyIcon className="h-4 w-4 mr-1.5" /> Copy Link First</Button>
                        <Button onClick={driveSearch} className="w-full bg-yellow-600 hover:bg-yellow-700 text-white" data-testid="share-drive-open"><ExternalLink className="h-4 w-4 mr-1.5" /> Open Google Drive</Button>
                    </TabsContent>

                    {/* QR Code */}
                    <TabsContent value="qr" className="space-y-3 mt-3">
                        <div className="flex flex-col items-center gap-2">
                            {qrSrc ? (
                                <img src={qrSrc} alt="QR" className="rounded-lg border bg-white p-2" style={{ width: 220, height: 220 }} data-testid="share-qr-img" />
                            ) : (
                                <div className="border rounded-lg bg-muted flex items-center justify-center" style={{ width: 220, height: 220 }}>
                                    <QrCode className="h-12 w-12 text-muted-foreground" />
                                </div>
                            )}
                            <p className="text-[11px] text-muted-foreground text-center">Customer ko yeh QR scan karne dein</p>
                            <Button onClick={downloadQR} variant="outline" disabled={!qrSrc} data-testid="share-qr-download">
                                <Download className="h-4 w-4 mr-1.5" /> Download QR PNG
                            </Button>
                        </div>
                    </TabsContent>
                </Tabs>
            </DialogContent>
        </Dialog>
    );
}