import React, { useState } from 'react';
import { ArrowLeft, HelpCircle, Info, ExternalLink, ShieldQuestion } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Card } from '@/components/ui/card';
import { toast } from 'sonner';

const HelpSupport = () => {
  const navigate = useNavigate();
  const [messageText, setMessageText] = useState('');
  
  const faqItems = [
    {
      question: '앱을 어떻게 사용하나요?',
      answer: '앱은 간단합니다. 홈 화면에서 수입과 지출을 추가할 수 있으며, 거래 내역 화면에서 모든 거래를 확인할 수 있습니다. 분석 화면에서는 지출 패턴을 확인하세요.'
    }, 
    {
      question: '예산을 어떻게 설정하나요?',
      answer: '홈 화면에서 예산 카드를 찾아 카테고리별 예산을 설정할 수 있습니다. 각 카테고리에 원하는 금액을 입력하여 월별 예산을 관리하세요.'
    },
    {
      question: '지출을 어떻게 추가하나요?',
      answer: '홈 화면 하단의 "+" 버튼을 눌러 새 거래를 추가할 수 있습니다. 금액, 카테고리, 날짜를 입력하고 저장하세요.'
    }, 
    {
      question: '계정 정보를 어떻게 변경하나요?',
      answer: '설정 > 프로필 관리 메뉴에서 이름, 이메일, 전화번호 등의 개인 정보를 변경할 수 있습니다.'
    }, 
    {
      question: '알림 설정은 어디서 변경하나요?',
      answer: '설정 > 알림 설정 메뉴에서 원하는 알림 유형을 켜거나 끌 수 있습니다.'
    }
  ];
  
  const sendMessage = () => {
    if (!messageText.trim()) {
      toast.error('메시지를 입력해주세요.');
      return;
    }
    
    toast.success('문의가 접수되었습니다. 빠른 시일 내에 답변 드리겠습니다.');
    setMessageText('');
  };
  
  return (
    <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
        <header className="py-8">
          <div className="flex items-center mb-6">
            <Button variant="ghost" size="icon" onClick={() => navigate('/settings')} className="mr-2">
              <ArrowLeft size={20} />
            </Button>
            <h1 className="text-2xl font-bold neuro-text">도움말 및 지원</h1>
          </div>
        </header>
        
        {/* Help Categories */}
        <div className="grid grid-cols-2 gap-4 mb-8">
          <Card className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300">
            <div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
              <HelpCircle size={24} />
            </div>
            <h3 className="font-medium">자주 묻는 질문</h3>
          </Card>
          
          <Card className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300">
            <div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
              <Info size={24} />
            </div>
            <h3 className="font-medium">앱 정보</h3>
          </Card>
        </div>
        
        {/* FAQ Section */}
        <div className="neuro-flat p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4">자주 묻는 질문</h2>
          <Accordion type="single" collapsible className="w-full">
            {faqItems.map((item, index) => (
              <AccordionItem key={index} value={`item-${index}`}>
                <AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
                <AccordionContent className="text-left">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
        
        {/* Contact Support */}
        <div className="neuro-flat p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4">건의사항 및 문의하기</h2>
          <div className="space-y-4">
            <textarea 
              className="w-full p-3 rounded-md neuro-pressed resize-none min-h-[120px]" 
              placeholder="문의 내용을 입력해주세요..." 
              value={messageText} 
              onChange={e => setMessageText(e.target.value)} 
            />
            <Button 
              onClick={sendMessage} 
              className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
            >
              보내기
            </Button>
          </div>
        </div>
        
        {/* Resources */}
        <div className="neuro-flat p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4">유용한 자료</h2>
          <div className="space-y-3">
            <a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity">
              <ShieldQuestion size={20} className="mr-3 text-neuro-income" />
              <span>사용자 가이드</span>
              <ExternalLink size={16} className="ml-auto text-gray-400" />
            </a>
            <a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity">
              <Info size={20} className="mr-3 text-neuro-income" />
              <span>이용약관</span>
              <ExternalLink size={16} className="ml-auto text-gray-400" />
            </a>
            <a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity">
              <ShieldQuestion size={20} className="mr-3 text-neuro-income" />
              <span>개인정보 보호정책</span>
              <ExternalLink size={16} className="ml-auto text-gray-400" />
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HelpSupport;