'use client';

import { useState, useRef, useEffect } from 'react';
import { MessageSquare, Camera, X, Loader2, CheckCircle } from 'lucide-react';
import html2canvas from 'html2canvas';
import api from '../lib/api-client';
import { usePathname } from 'next/navigation';

interface FeedbackWidgetProps {
    isOpen?: boolean;
    onClose?: () => void;
    trigger?: React.ReactNode;
}

export function FeedbackWidget({ isOpen: controlledIsOpen, onClose: controlledOnClose, trigger }: FeedbackWidgetProps) {
    const [internalIsOpen, setInternalIsOpen] = useState(false);
    const [isCapturing, setIsCapturing] = useState(false);
    const [screenshot, setScreenshot] = useState<string | null>(null);
    const [description, setDescription] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [success, setSuccess] = useState(false);
    const pathname = usePathname();

    const isControlled = controlledIsOpen !== undefined;
    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;

    const handleClose = () => {
        if (isControlled && controlledOnClose) {
            controlledOnClose();
        } else {
            setInternalIsOpen(false);
        }
    };

    const handleOpen = () => {
        if (!isControlled) {
            setInternalIsOpen(true);
        }
    };

    const handleCapture = async () => {
        setIsCapturing(true);
        try {
            // Hide the widget temporarily so it doesn't appear in the screenshot
            const widget = document.getElementById('feedback-widget-modal');
            if (widget) widget.style.display = 'none';

            const canvas = await html2canvas(document.body, {
                useCORS: true,
                allowTaint: true,
                logging: false,
            });

            if (widget) widget.style.display = 'block';

            setScreenshot(canvas.toDataURL('image/jpeg', 0.7));
        } catch (error) {
            console.error('Screenshot failed:', error);
        } finally {
            setIsCapturing(false);
        }
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!description) return;

        setIsSubmitting(true);
        try {
            await api.post('/support/report-issue', {
                url: window.location.href,
                description,
                screenshot
            });
            setSuccess(true);
            setTimeout(() => {
                handleClose();
                setSuccess(false);
                setDescription('');
                setScreenshot(null);
            }, 2000);
        } catch (error) {
            console.error('Failed to submit report:', error);
            alert('Failed to submit report. Please try again.');
        } finally {
            setIsSubmitting(false);
        }
    };

    if (!isOpen) {
        if (trigger) {
            return <div onClick={handleOpen}>{trigger}</div>;
        }
        // Default floating button if no trigger provided and not controlled
        if (!isControlled) {
            return (
                <button
                    id="feedback-widget-trigger"
                    onClick={() => setInternalIsOpen(true)}
                    className="fixed bottom-4 right-4 z-50 flex items-center gap-2 rounded-full bg-slate-900 px-4 py-3 text-sm font-medium text-white shadow-lg hover:bg-slate-800 transition-all"
                >
                    <MessageSquare className="h-4 w-4" />
                    Report Issue
                </button>
            );
        }
        return null;
    }

    return (
        <div id="feedback-widget-modal" className="fixed bottom-4 right-4 z-50 w-80 rounded-2xl border border-slate-200 bg-white p-4 shadow-2xl animate-in slide-in-from-bottom-5">
            <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-900">Report an Issue</h3>
                <button onClick={handleClose} className="text-slate-400 hover:text-slate-600">
                    <X className="h-5 w-5" />
                </button>
            </div>

            {success ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                    <div className="mb-2 rounded-full bg-green-100 p-3">
                        <CheckCircle className="h-6 w-6 text-green-600" />
                    </div>
                    <p className="font-medium text-slate-900">Report Sent!</p>
                    <p className="text-sm text-slate-500">Thank you for your feedback.</p>
                </div>
            ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label className="block text-xs font-medium text-slate-500 mb-1">Description</label>
                        <textarea
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            placeholder="What went wrong? Please describe..."
                            className="w-full rounded-lg border border-slate-200 p-2 text-sm focus:border-brand focus:outline-none min-h-[100px]"
                            required
                        />
                    </div>

                    <div>
                        <div className="flex items-center justify-between mb-2">
                            <label className="block text-xs font-medium text-slate-500">Screenshot</label>
                            {screenshot && (
                                <button
                                    type="button"
                                    onClick={() => setScreenshot(null)}
                                    className="text-xs text-red-500 hover:text-red-600"
                                >
                                    Remove
                                </button>
                            )}
                        </div>

                        {screenshot ? (
                            <div className="relative rounded-lg border border-slate-200 overflow-hidden bg-slate-50">
                                <img src={screenshot} alt="Screenshot" className="w-full h-auto object-cover max-h-32" />
                            </div>
                        ) : (
                            <button
                                type="button"
                                onClick={handleCapture}
                                disabled={isCapturing}
                                className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-slate-300 bg-slate-50 py-3 text-sm text-slate-600 hover:bg-slate-100 hover:border-slate-400 transition-colors"
                            >
                                {isCapturing ? (
                                    <Loader2 className="h-4 w-4 animate-spin" />
                                ) : (
                                    <Camera className="h-4 w-4" />
                                )}
                                {isCapturing ? 'Capturing...' : 'Take Screenshot'}
                            </button>
                        )}
                    </div>

                    <button
                        type="submit"
                        disabled={isSubmitting || !description}
                        className="w-full rounded-lg bg-brand py-2 text-sm font-semibold text-white hover:bg-brand/90 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        {isSubmitting ? 'Sending...' : 'Submit Report'}
                    </button>
                </form>
            )}
        </div>
    );
}