"use client";
import { useState, useRef } from "react";
import { MessageSquare, Camera, X, Mail, Phone, CheckCircle } from "lucide-react";
import PageHeader from "@/components/modals/ui/PageHeader";
import { useFeedbackStore } from "@/app/store/feedBackStore";

export default function FeedbackPage({
  onClose,
}: {
  onClose: () => void;
}) {
    const { loading, submitFeedback } = useFeedbackStore();

    const [description, setDescription] = useState("");
    const [image, setImage] =
    useState<File | null>(null);
    const [submitted, setSubmitted] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleImagePick = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        setImage(file);
    };

    const handleSubmit = async () => {
    if (!description.trim()) return;

    const success = await submitFeedback({
        description: description.trim(),
        image: image || undefined,
    });

    if (success) {
        setSubmitted(true);
        setDescription("");
        setImage(null);
    }
};

    if (submitted) {
        return (
            <div className="min-h-screen bg-[#f7f7f8]">
                <PageHeader
                    icon={<MessageSquare size={20} />}
                    title="Provide Feedback/Suggestion"
                    subtitle="Share your thoughts with us"
                            onClose={onClose}


                    />
                <main className="max-w-[680px] mx-auto p-7 flex flex-col items-center justify-center py-24 text-center">
                    <div className="w-16 h-16 rounded-full bg-[#e8f8ee] text-[#16a34a] flex items-center justify-center mb-4">
                        <CheckCircle size={32} />
                    </div>
                    <p className="text-xl font-semibold text-[#111111]">Thank you!</p>
                    <p className="text-sm text-[#6b7280] mt-2 max-w-xs">
                        Your feedback has been submitted. We'll use it to improve the app.
                    </p>
                    <button
                        onClick={() => setSubmitted(false)}
                        className="mt-8 bg-[#d4537e] text-white px-8 py-3 rounded-xl font-medium"
                    >
                        Submit Another
                    </button>
                </main>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-[#f7f7f8]">
            <PageHeader
                icon={<MessageSquare size={20} />}
                title="Provide Feedback/Suggestion"
                subtitle="Share your thoughts with us"
            />

            <main className="max-w-[680px] mx-auto p-7 flex flex-col gap-5">

                {/* Description */}
                <div>
                    <textarea
                        rows={8}
                        placeholder="Enter Description"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                        className="w-full bg-white border border-[#e5e7eb] rounded-2xl px-4 py-4 text-base text-[#111111] placeholder:text-[#9ca3af] outline-none resize-none"
                    />
                </div>

                {/* Screenshot upload */}
                <div>
                    <p className="text-sm text-[#374151] mb-2 font-medium">
                        Attach Screenshot <span className="text-[#9ca3af] font-normal">(optional)</span>
                    </p>

                    <input
                        ref={fileInputRef}
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={handleImagePick}
                    />

                    {image ? (
                        <div className="relative w-full rounded-2xl overflow-hidden border border-[#e5e7eb]">
                            <img
                                src={URL.createObjectURL(image)}
                                alt="Screenshot preview"
                                className="w-full object-cover max-h-48"
                            />

                            <button
                                onClick={() => setImage(null)}
                                className="absolute top-2 right-2 w-7 h-7 bg-black/50 rounded-full flex items-center justify-center text-white border-none cursor-pointer"
                            >
                                <X size={14} />
                            </button>
                        </div>
                    ) : (
                        <button
                            type="button"
                            onClick={() => fileInputRef.current?.click()}
                            className="w-full border-2 border-dashed border-[#d4537e] rounded-2xl py-10 flex flex-col items-center justify-center gap-2 bg-white cursor-pointer hover:bg-[#fceef3] transition-colors"
                        >
                            <Camera size={28} className="text-[#d4537e]" />

                            <p className="text-sm text-[#d4537e]">
                                Tap to add a screenshot related to your feedback
                            </p>
                        </button>
                    )}
                </div>

                {/* Submit */}
                <button
                    disabled={!description.trim() || loading}
                    onClick={handleSubmit}
                    className="w-full bg-[#d4537e] hover:bg-[#993556] text-white py-4 rounded-2xl font-semibold text-base disabled:opacity-50 transition-colors"
                >
                    {loading ? "Submitting..." : "Submit"}
                </button>

                {/* Contact info */}
                <div className="flex flex-col items-center gap-3 mt-2">
                    <p className="text-sm font-semibold text-[#111111]">
                        Or reach us directly
                    </p>

                    <a
                        href="mailto:info@encodework.com"
                        className="flex items-center gap-2 text-sm text-[#374151] no-underline"
                    >
                        <Mail size={16} className="text-[#d4537e]" />
                        info@encodework.com
                    </a>

                    <a
                        href="tel:+919033352303"
                        className="flex items-center gap-2 text-sm text-[#374151] no-underline"
                    >
                        <Phone size={16} className="text-[#d4537e]" />
                        +91 90333 52303
                    </a>
                </div>

            </main>
        </div>
    );
}