import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import Sidebar from '../components/figma/Sidebar';

interface FAQItem {
    question: string;
    answer: string;
    isOpen: boolean;
}

const HelpNew: React.FC = () => {
    const { user } = useAuth();
    const navigate = useNavigate();

    const [faqItems, setFaqItems] = useState<FAQItem[]>([
        {
            question: "What is the process for submitting a support ticket?",
            answer: "Team members will undergo evaluations every three months, focusing on their performance, teamwork, and communication skills. Role advancements will be considered at these intervals.",
            isOpen: true
        },
        {
            question: "How can I reset my password?",
            answer: "To reset your password, click on the 'Forgot Password' link on the login page and follow the instructions sent to your email address.",
            isOpen: false
        },
        {
            question: "What are the criteria for performance reviews?",
            answer: "Performance reviews are based on multiple factors including goal achievement, collaboration, innovation, and adherence to company values. Reviews are conducted quarterly with detailed feedback sessions.",
            isOpen: false
        },
        {
            question: "How can I access the company's training resources?",
            answer: "Training resources are available through our internal learning portal. You can access them from the main dashboard under the 'Learning & Development' section.",
            isOpen: false
        },
        {
            question: "What should I do if I encounter a technical issue?",
            answer: "For technical issues, first check our troubleshooting guide. If the issue persists, contact our IT support team through the help desk or email support@company.com.",
            isOpen: false
        },
        {
            question: "How do I provide feedback on team projects?",
            answer: "Feedback can be provided through our project management system or during regular team meetings. We encourage constructive feedback that helps improve project outcomes.",
            isOpen: false
        }
    ]);

    const toggleFAQ = (index: number) => {
        setFaqItems(prev => prev.map((item, i) => ({
            ...item,
            isOpen: i === index ? !item.isOpen : item.isOpen
        })));
    };

    const handleContactUs = () => {
        // In a real app, this would open a contact form or support chat
        alert('Contact functionality would be implemented here');
    };

    if (!user) {
        navigate('/login');
        return null;
    }

    return (
        <div className="w-[1440px] h-[840px] p-4 bg-Neutrals-NeutralSlate200 inline-flex justify-start items-start overflow-hidden">
            <div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
                <Sidebar companyName="Zitlac Media" />
                <div className="flex-1 self-stretch pt-8 pb-6 bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-start items-center gap-6">
                    <div className="w-[680px] justify-start text-Text-Gray-800 text-2xl font-medium font-['Neue_Montreal'] leading-normal">Help & Support</div>
                    <div className="w-[680px] flex flex-col justify-start items-start gap-4">
                        {faqItems.map((item, index) => (
                            <div
                                key={index}
                                className="self-stretch p-3 bg-Text-Gray-100 rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden"
                            >
                                <div
                                    onClick={() => toggleFAQ(index)}
                                    className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2 cursor-pointer"
                                >
                                    <div className="flex-1 justify-start text-Text-Dark-950 text-base font-medium font-['Inter'] leading-normal">
                                        {item.question}
                                    </div>
                                    <div>
                                        {item.isOpen ? (
                                            <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M11 1L1 1" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </svg>
                                        ) : (
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M9.99996 4.16797V15.8346M4.16663 10.0013H15.8333" stroke="var(--Text-Gray-400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </svg>
                                        )}
                                    </div>
                                    <div className="w-5 h-5 opacity-0 border border-zinc-800" />
                                </div>
                                {item.isOpen && (
                                    <div className="self-stretch p-6 bg-Neutrals-NeutralSlate0 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start gap-4">
                                        <div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-base font-normal font-['Inter'] leading-normal">
                                            {item.answer}
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                    <div className="w-[680px] px-5 py-4 bg-Text-Gray-800 rounded-2xl backdrop-blur-blur inline-flex justify-center items-center gap-12 overflow-hidden">
                        <div className="flex-1 inline-flex flex-col justify-center items-start gap-2">
                            <div className="self-stretch justify-start text-Text-White-00 text-base font-medium font-['Inter'] leading-normal">Still have questions?</div>
                            <div className="self-stretch justify-start text-Text-Gray-400 text-sm font-normal font-['Inter'] leading-tight">We are available for 24/7</div>
                        </div>
                        <div
                            onClick={handleContactUs}
                            className="px-3 py-2.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden cursor-pointer hover:bg-Brand-Orange/90"
                        >
                            <div>
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.58685 5.90223C6.05085 6.86865 6.68337 7.77441 7.48443 8.57546C8.28548 9.37651 9.19124 10.009 10.1577 10.473C10.2408 10.5129 10.2823 10.5329 10.3349 10.5482C10.5218 10.6027 10.7513 10.5636 10.9096 10.4502C10.9542 10.4183 10.9923 10.3802 11.0685 10.304C11.3016 10.071 11.4181 9.95443 11.5353 9.87824C11.9772 9.59091 12.5469 9.59091 12.9889 9.87824C13.106 9.95443 13.2226 10.071 13.4556 10.304L13.5856 10.4339C13.9398 10.7882 14.117 10.9654 14.2132 11.1556C14.4046 11.534 14.4046 11.9809 14.2132 12.3592C14.117 12.5495 13.9399 12.7266 13.5856 13.0809L13.4805 13.186C13.1274 13.5391 12.9508 13.7156 12.7108 13.8505C12.4445 14.0001 12.0308 14.1077 11.7253 14.1068C11.45 14.1059 11.2619 14.0525 10.8856 13.9457C8.86333 13.3718 6.95509 12.2888 5.36311 10.6968C3.77112 9.10479 2.68814 7.19655 2.11416 5.17429C2.00735 4.79799 1.95395 4.60984 1.95313 4.33455C1.95222 4.02906 2.0598 3.6154 2.20941 3.34907C2.34424 3.10904 2.52078 2.9325 2.87386 2.57942L2.97895 2.47433C3.33325 2.12004 3.5104 1.94289 3.70065 1.84666C4.07903 1.65528 4.52587 1.65528 4.90424 1.84666C5.0945 1.94289 5.27164 2.12004 5.62594 2.47433L5.75585 2.60424C5.98892 2.83732 6.10546 2.95385 6.18165 3.07104C6.46898 3.51296 6.46898 4.08268 6.18165 4.52461C6.10546 4.6418 5.98892 4.75833 5.75585 4.9914C5.67964 5.06761 5.64154 5.10571 5.60965 5.15026C5.4963 5.30854 5.45717 5.53805 5.51165 5.72495C5.52698 5.77754 5.54694 5.81911 5.58685 5.90223Z" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                            <div className="px-1 flex justify-center items-center">
                                <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Contact Us</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HelpNew;