'use client';

import { useState, useMemo } from 'react';
import {
  HelpCircle,
  Search,
  Shield,
  ShieldAlert,
  User,
  Lock,
  AlertTriangle,
  MessageSquare,
  CreditCard,
  ArrowRight,
  ChevronDown,
} from 'lucide-react';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { useAppStore } from '@/store/app-store';
import { useLangStore } from '@/store/lang-store';

// ─── FAQ Data ────────────────────────────────────────────────────────────────

interface FaqItem {
  id: string;
  questionEn: string;
  questionBn: string;
  answerEn: string;
  answerBn: string;
  category: 'general' | 'reporting' | 'account' | 'safety';
}

const faqItems: FaqItem[] = [
  {
    id: '1',
    questionEn: 'What is ScamChecker BD?',
    questionBn: 'ScamChecker BD কী?',
    answerEn: 'ScamChecker BD is a community-powered scam intelligence platform for Bangladesh. It allows users to report scams, search for suspicious phone numbers, bKash/Nagad accounts, and Facebook pages, and check risk levels before making transactions. Our goal is to protect Bangladeshis from financial fraud and online scams.',
    answerBn: 'ScamChecker BD বাংলাদেশের জন্য একটি কমিউনিটি-চালিত স্ক্যাম ইন্টেলিজেন্স প্ল্যাটফর্ম। এটি ব্যবহারকারীদের স্ক্যাম রিপোর্ট করতে, সন্দেহজনক ফোন নম্বর, বিকাশ/নগদ অ্যাকাউন্ট এবং ফেসবুক পেজ অনুসন্ধান করতে এবং লেনদেনের আগে ঝুঁকি স্তর পরীক্ষা করতে সাহায্য করে।',
    category: 'general',
  },
  {
    id: '2',
    questionEn: 'Is ScamChecker BD free to use?',
    questionBn: 'ScamChecker BD কি বিনামূল্যে ব্যবহার করা যায়?',
    answerEn: 'Yes, ScamChecker BD is completely free to use. You can search for scam reports, view risk levels, and browse the database without creating an account. However, to submit a report or save bookmarks, you need to create a free account.',
    answerBn: 'হ্যাঁ, ScamChecker BD সম্পূর্ণ বিনামূল্যে ব্যবহার করা যায়। অ্যাকাউন্ট তৈরি না করেই আপনি স্ক্যাম রিপোর্ট অনুসন্ধান, ঝুঁকি স্তর দেখতে এবং ডাটাবেস ব্রাউজ করতে পারবেন। তবে রিপোর্ট জমা দিতে বা বুকমার্ক সংরক্ষণ করতে একটি বিনামূল্যে অ্যাকাউন্ট প্রয়োজন।',
    category: 'general',
  },
  {
    id: '3',
    questionEn: 'How does the risk level system work?',
    questionBn: 'ঝুঁকি স্তর সিস্টেম কিভাবে কাজ করে?',
    answerEn: 'Each reported entity (phone number, bKash, Nagad, Facebook page) receives a risk level based on the number of reports, evidence provided, and verification status. Low Risk means one unverified report. Medium Risk means multiple reports with some evidence. High Risk means many reports with confirmed evidence. Critical Risk means a verified scam with numerous victims and significant financial losses.',
    answerBn: 'প্রতিটি রিপোর্ট করা সত্তা (ফোন নম্বর, বিকাশ, নগদ, ফেসবুক পেজ) রিপোর্টের সংখ্যা, প্রদত্ত প্রমাণ এবং যাচাই অবস্থার উপর ভিত্তি করে একটি ঝুঁকি স্তর পায়। নিম্ন ঝুঁকি মানে একটি অযাচাইকৃত রিপোর্ট। মাঝারি ঝুঁকি মানে কিছু প্রমাণ সহ একাধিক রিপোর্ট। উচ্চ ঝুঁকি মানে নিশ্চিত প্রমাণ সহ অনেক রিপোর্ট। সংকটময় ঝুঁকি মানে অসংখ্য ভুক্তভোগী এবং উল্লেখযোগ্য আর্থিক ক্ষতি সহ একটি যাচাইকৃত স্ক্যাম।',
    category: 'general',
  },
  {
    id: '4',
    questionEn: 'How do I report a scam?',
    questionBn: 'আমি কিভাবে একটি স্ক্যাম রিপোর্ট করব?',
    answerEn: 'To report a scam, create a free account and click "Report a Scam". Fill in the scam details including the scammer\'s phone number, bKash/Nagad number, Facebook page, and any evidence like screenshots. Your report will be reviewed by our moderators and once verified, it will help protect others from the same scammer.',
    answerBn: 'একটি স্ক্যাম রিপোর্ট করতে, একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন এবং "স্ক্যাম রিপোর্ট করুন" এ ক্লিক করুন। প্রতারকের ফোন নম্বর, বিকাশ/নগদ নম্বর, ফেসবুক পেজ এবং স্ক্রিনশটের মতো যেকোনো প্রমাণ সহ স্ক্যামের বিবরণ পূরণ করুন। আপনার রিপোর্ট আমাদের মডারেটরদের দ্বারা পর্যালোচনা করা হবে এবং একবার যাচাই হলে এটি অন্যদের একই প্রতারক থেকে রক্ষা করতে সাহায্য করবে।',
    category: 'reporting',
  },
  {
    id: '5',
    questionEn: 'What kind of evidence should I provide?',
    questionBn: 'আমি কী ধরনের প্রমাণ দিতে পারি?',
    answerEn: 'The best evidence includes screenshots of conversations (WhatsApp, Messenger, SMS), payment receipts (bKash/Nagad transaction screenshots), fake product photos, and any messages from the scammer. You can upload multiple images up to 5MB each. More evidence helps verify your report faster and increases the risk level of the scammer.',
    answerBn: 'সেরা প্রমাণের মধ্যে রয়েছে কথোপকথনের স্ক্রিনশট (হোয়াটসঅ্যাপ, মেসেঞ্জার, এসএমএস), পেমেন্ট রসিদ (বিকাশ/নগদ লেনদেনের স্ক্রিনশট), নকল পণ্যের ছবি এবং প্রতারকের যেকোনো বার্তা। আপনি প্রতিটি ৫এমবি পর্যন্ত একাধিক ছবি আপলোড করতে পারেন। বেশি প্রমাণ আপনার রিপোর্ট দ্রুত যাচাই করতে এবং প্রতারকের ঝুঁকি স্তর বাড়াতে সাহায্য করে।',
    category: 'reporting',
  },
  {
    id: '6',
    questionEn: 'Will my identity be revealed when I report?',
    questionBn: 'রিপোর্ট করলে কি আমার পরিচয় প্রকাশ পাবে?',
    answerEn: 'No, your identity is kept private. Other users can only see the report details, not who submitted it. Your name and email are never displayed publicly. Only our admin team can see reporter information for verification purposes, and we never share it with third parties.',
    answerBn: 'না, আপনার পরিচয় গোপন রাখা হয়। অন্য ব্যবহারকারীরা শুধুমাত্র রিপোর্টের বিবরণ দেখতে পারে, কে জমা দিয়েছে তা নয়। আপনার নাম এবং ইমেইল কখনই প্রকাশ্যে প্রদর্শিত হয় না। শুধুমাত্র আমাদের অ্যাডমিন টিম যাচাইয়ের উদ্দেশ্যে রিপোর্টারের তথ্য দেখতে পারে, এবং আমরা এটি কখনই তৃতীয় পক্ষের সাথে শেয়ার করি না।',
    category: 'reporting',
  },
  {
    id: '7',
    questionEn: 'How do I create an account?',
    questionBn: 'আমি কিভাবে একটি অ্যাকাউন্ট তৈরি করব?',
    answerEn: 'Click the "Sign Up" button in the header. You\'ll need to provide your name, email address, and a password (minimum 6 characters). Once registered, you can submit scam reports, save bookmarks, and access your personal dashboard.',
    answerBn: 'হেডারে "নিবন্ধন" বোতামে ক্লিক করুন। আপনাকে আপনার নাম, ইমেইল ঠিকানা এবং একটি পাসওয়ার্ড (ন্যূনতম ৬ অক্ষর) দিতে হবে। একবার নিবন্ধিত হলে, আপনি স্ক্যাম রিপোর্ট জমা দিতে, বুকমার্ক সংরক্ষণ করতে এবং আপনার ব্যক্তিগত ড্যাশবোর্ড অ্যাক্সেস করতে পারবেন।',
    category: 'account',
  },
  {
    id: '8',
    questionEn: 'Can I edit or delete my reports?',
    questionBn: 'আমি কি আমার রিপোর্ট সম্পাদনা বা মুছতে পারি?',
    answerEn: 'Currently, you cannot directly edit or delete submitted reports. If you need to correct information in your report, you can submit a new report with the updated details and our moderators will merge them. If you need a report removed, please contact our admin team.',
    answerBn: 'বর্তমানে, আপনি সরাসরি জমা দেওয়া রিপোর্ট সম্পাদনা বা মুছতে পারবেন না। আপনার রিপোর্টে তথ্য সংশোধন করতে হলে, আপডেট করা বিবরণ সহ একটি নতুন রিপোর্ট জমা দিন এবং আমাদের মডারেটররা সেগুলি একত্রিত করবে। আপনি যদি কোনো রিপোর্ট সরাতে চান, তাহলে আমাদের অ্যাডমিন টিমের সাথে যোগাযোগ করুন।',
    category: 'account',
  },
  {
    id: '9',
    questionEn: 'How can I protect myself from mobile banking scams?',
    questionBn: 'আমি কিভাবে মোবাইল ব্যাংকিং স্ক্যাম থেকে নিজেকে রক্ষা করব?',
    answerEn: 'Never share your OTP, PIN, or password with anyone — legitimate organizations will never ask for these. Always verify the recipient before sending money via bKash or Nagad. Don\'t click on suspicious links in SMS or emails claiming your account is suspended. Use ScamChecker BD to search numbers before making transactions with unknown persons.',
    answerBn: 'কারও সাথে আপনার OTP, PIN বা পাসওয়ার্ড কখনই শেয়ার করবেন না — বৈধ সংস্থাগুলি কখনই এগুলি চাইবে না। বিকাশ বা নগদের মাধ্যমে টাকা পাঠানোর আগে সবসময় প্রাপককে যাচাই করুন। আপনার অ্যাকাউন্ট স্থগিত বলে দাবি করে SMS বা ইমেইলে সন্দেহজনক লিঙ্কে ক্লিক করবেন না। অপরিচিত ব্যক্তিদের সাথে লেনদেনের আগে নম্বর অনুসন্ধান করতে ScamChecker BD ব্যবহার করুন।',
    category: 'safety',
  },
  {
    id: '10',
    questionEn: 'What should I do if I\'ve been scammed?',
    questionBn: 'আমি প্রতারিত হলে কী করব?',
    answerEn: 'If you\'ve been scammed: 1) Don\'t panic. 2) Report it immediately on ScamChecker BD to warn others. 3) Contact your bank or mobile banking provider to block further transactions. 4) File a complaint with the Cyber Crime Investigation Division of Bangladesh Police. 5) Save all evidence including screenshots, messages, and transaction records. 6) Warn your friends and family about the scammer.',
    answerBn: 'আপনি প্রতারিত হলে: ১) আতঙ্কিত হবেন না। ২) অন্যদের সতর্ক করতে অবিলম্বে ScamChecker BD-তে রিপোর্ট করুন। ৩) আরও লেনদেন ব্লক করতে আপনার ব্যাংক বা মোবাইল ব্যাংকিং প্রদানকারীর সাথে যোগাযোগ করুন। ৪) বাংলাদেশ পুলিশের সাইবার ক্রাইম ইনভেস্টিগেশন ডিভিশনে অভিযোগ দায়ের করুন। ৫) স্ক্রিনশট, বার্তা এবং লেনদেনের রেকর্ড সহ সমস্ত প্রমাণ সংরক্ষণ করুন। ৬) প্রতারক সম্পর্কে আপনার বন্ধু এবং পরিবারকে সতর্ক করুন।',
    category: 'safety',
  },
  {
    id: '11',
    questionEn: 'How does the AI Scam Detector work?',
    questionBn: 'এআই স্ক্যাম ডিটেক্টর কিভাবে কাজ করে?',
    answerEn: 'The AI Scam Detector analyzes text messages for common scam indicators including urgency language, payment requests, too-good-to-be-true offers, requests for personal information, and suspicious contact methods. It uses advanced AI to provide a scam probability score and specific recommendations. It\'s especially trained to detect Bangladesh-specific scam patterns like bKash/Nagad phishing and job scams.',
    answerBn: 'এআই স্ক্যাম ডিটেক্টর জরুরি ভাষা, পেমেন্ট অনুরোধ, অতিরিক্ত ভালো অফার, ব্যক্তিগত তথ্যের অনুরোধ এবং সন্দেহজনক যোগাযোগের পদ্ধতি সহ সাধারণ স্ক্যাম সূচকগুলির জন্য টেক্সট বার্তা বিশ্লেষণ করে। এটি একটি স্ক্যাম সম্ভাবনা স্কোর এবং নির্দিষ্ট সুপারিশ প্রদান করতে উন্নত AI ব্যবহার করে। এটি বিকাশ/নগদ ফিশিং এবং চাকরির স্ক্যামের মতো বাংলাদেশ-নির্দিষ্ট স্ক্যাম প্যাটার্ন সনাক্ত করতে বিশেষভাবে প্রশিক্ষিত।',
    category: 'general',
  },
  {
    id: '12',
    questionEn: 'Are the reports on ScamChecker BD verified?',
    questionBn: 'ScamChecker BD-এর রিপোর্টগুলো কি যাচাইকৃত?',
    answerEn: 'Reports go through a verification process. New reports are marked as "Pending" and are reviewed by our moderator team. Reports with sufficient evidence are marked as "Verified". Some reports may be marked as "Suspicious" if they lack evidence or "Rejected" if they are found to be false. Always check the status badge on reports to understand their verification level.',
    answerBn: 'রিপোর্টগুলি একটি যাচাই প্রক্রিয়ার মধ্য দিয়ে যায়। নতুন রিপোর্টগুলি "অপেক্ষমান" হিসাবে চিহ্নিত হয় এবং আমাদের মডারেটর টিম দ্বারা পর্যালোচনা করা হয়। পর্যাপ্ত প্রমাণ সহ রিপোর্টগুলি "যাচাইকৃত" হিসাবে চিহ্নিত হয়। প্রমাণের অভাব থাকলে কিছু রিপোর্ট "সন্দেহজনক" বা মিথ্যা পাওয়া গেলে "প্রত্যাখ্যাত" হিসাবে চিহ্নিত হতে পারে। তাদের যাচাই স্তর বুঝতে সবসময় রিপোর্টের স্ট্যাটাস ব্যাজ পরীক্ষা করুন।',
    category: 'reporting',
  },
  {
    id: '13',
    questionEn: 'How can I stay safe from online shopping scams?',
    questionBn: 'আমি কিভাবে অনলাইন শপিং স্ক্যাম থেকে নিরাপদ থাকতে পারি?',
    answerEn: 'To stay safe from online shopping scams: 1) Always search the seller\'s number on ScamChecker BD before ordering. 2) Use cash on delivery (COD) when possible. 3) Be cautious of extremely low prices or deals that seem too good to be true. 4) Check for verified reviews and social media presence. 5) Never send advance payment to unknown sellers. 6) Report suspicious sellers immediately.',
    answerBn: 'অনলাইন শপিং স্ক্যাম থেকে নিরাপদ থাকতে: ১) অর্ডার করার আগে সবসময় ScamChecker BD-তে বিক্রেতার নম্বর অনুসন্ধান করুন। ২) সম্ভব হলে ক্যাশ অন ডেলিভারি (COD) ব্যবহার করুন। ৩) অত্যন্ত কম দাম বা অতিরিক্ত ভালো ডিলে সতর্ক থাকুন। ৪) যাচাইকৃত রিভিউ এবং সোশ্যাল মিডিয়া উপস্থিতি পরীক্ষা করুন। ৫) অজানা বিক্রেতাদের কখনই অগ্রিম পেমেন্ট পাঠাবেন না। ৬) সন্দেহজনক বিক্রেতাদের অবিলম্বে রিপোর্ট করুন।',
    category: 'safety',
  },
  {
    id: '14',
    questionEn: 'Can I use the Auto-Fill feature to extract info from screenshots?',
    questionBn: 'আমি কি স্ক্রিনশট থেকে তথ্য বের করতে অটো-ফিল বৈশিষ্ট্য ব্যবহার করতে পারি?',
    answerEn: 'Yes! When submitting a report, the "Auto-Fill from Screenshot" feature uses AI to analyze your screenshot and automatically extract scam-related information like phone numbers, bKash/Nagad numbers, Facebook profiles, and amounts mentioned. This saves time and ensures accuracy. Simply click the Auto-Fill button in the Evidence section and upload your screenshot.',
    answerBn: 'হ্যাঁ! রিপোর্ট জমা দেওয়ার সময়, "স্ক্রিনশট থেকে স্বয়ংক্রিয় পূরণ" বৈশিষ্ট্য AI ব্যবহার করে আপনার স্ক্রিনশট বিশ্লেষণ করে এবং স্বয়ংক্রিয়ভাবে ফোন নম্বর, বিকাশ/নগদ নম্বর, ফেসবুক প্রোফাইল এবং উল্লিখিত পরিমাণের মতো স্ক্যাম-সম্পর্কিত তথ্য বের করে। এটি সময় বাঁচায় এবং নির্ভুলতা নিশ্চিত করে। প্রমাণ বিভাগে অটো-ফিল বোতামে ক্লিক করুন এবং আপনার স্ক্রিনশট আপলোড করুন।',
    category: 'reporting',
  },
];

// ─── Category Config ─────────────────────────────────────────────────────────

const categoryConfig: Record<string, { labelKey: string; icon: React.ElementType; color: string; bg: string }> = {
  general: { labelKey: 'faq.category.general', icon: HelpCircle, color: 'text-emerald-500', bg: 'bg-emerald-500/10' },
  reporting: { labelKey: 'faq.category.reporting', icon: ShieldAlert, color: 'text-orange-500', bg: 'bg-orange-500/10' },
  account: { labelKey: 'faq.category.account', icon: User, color: 'text-teal-500', bg: 'bg-teal-500/10' },
  safety: { labelKey: 'faq.category.safety', icon: Shield, color: 'text-red-500', bg: 'bg-red-500/10' },
};

// ─── Main Component ───────────────────────────────────────────────────────────

export function FaqPage() {
  const navigate = useAppStore((s) => s.navigate);
  const { lang, t } = useLangStore();
  const [searchQuery, setSearchQuery] = useState('');
  const [activeCategory, setActiveCategory] = useState<string>('all');

  const filteredFaqs = useMemo(() => {
    let items = faqItems;

    // Filter by category
    if (activeCategory !== 'all') {
      items = items.filter((item) => item.category === activeCategory);
    }

    // Filter by search query
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      items = items.filter(
        (item) =>
          item.questionEn.toLowerCase().includes(query) ||
          item.questionBn.toLowerCase().includes(query) ||
          item.answerEn.toLowerCase().includes(query) ||
          item.answerBn.toLowerCase().includes(query)
      );
    }

    return items;
  }, [searchQuery, activeCategory]);

  const categories = ['all', 'general', 'reporting', 'account', 'safety'];

  return (
    <div className="max-w-4xl mx-auto px-4 py-8 sm:py-12">
      {/* Header */}
      <div className="text-center mb-10">
        <div className="inline-flex items-center justify-center p-3 rounded-2xl bg-emerald-500/10 mb-4">
          <HelpCircle className="h-8 w-8 text-emerald-500" />
        </div>
        <h1 className="text-3xl sm:text-4xl font-bold mb-3">
          {t('faq.title')}
        </h1>
        <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
          {t('faq.subtitle')}
        </p>
      </div>

      {/* Search */}
      <div className="relative mb-6 max-w-xl mx-auto">
        <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
        <Input
          type="text"
          placeholder={t('faq.searchPlaceholder')}
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="h-12 pl-12 text-base rounded-xl border-emerald-500/20 focus-visible:border-emerald-500/50 focus-visible:ring-emerald-500/20"
        />
      </div>

      {/* Category Tabs */}
      <div className="flex flex-wrap items-center justify-center gap-2 mb-8">
        {categories.map((cat) => {
          const isActive = activeCategory === cat;
          const config = cat === 'all' ? null : categoryConfig[cat];
          const Icon = config?.icon || HelpCircle;
          return (
            <button
              key={cat}
              onClick={() => setActiveCategory(cat)}
              className={`inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
                isActive
                  ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30'
                  : 'bg-emerald-500/5 text-muted-foreground border border-transparent hover:bg-emerald-500/10 hover:text-foreground'
              }`}
            >
              <Icon className="h-4 w-4" />
              {cat === 'all' ? t('faq.allCategories') : t(config?.labelKey || cat)}
            </button>
          );
        })}
      </div>

      {/* FAQ Accordion */}
      {filteredFaqs.length === 0 ? (
        <Card className="border-dashed">
          <CardContent className="py-12 text-center">
            <Search className="h-12 w-12 text-muted-foreground mx-auto mb-3" />
            <p className="text-muted-foreground text-lg mb-2">{t('common.noResults')}</p>
            <p className="text-sm text-muted-foreground">
              Try a different search term or category
            </p>
          </CardContent>
        </Card>
      ) : (
        <Accordion type="single" collapsible className="space-y-3">
          {filteredFaqs.map((item) => {
            const config = categoryConfig[item.category];
            const CategoryIcon = config?.icon || HelpCircle;
            return (
              <AccordionItem
                key={item.id}
                value={item.id}
                className="border rounded-xl px-4 sm:px-6 data-[state=open]:border-emerald-500/30 data-[state=open]:shadow-lg data-[state=open]:shadow-emerald-500/5 transition-all duration-200"
              >
                <AccordionTrigger className="hover:no-underline py-4 sm:py-5">
                  <div className="flex items-start gap-3 text-left flex-1">
                    <div className={`p-1.5 rounded-lg ${config?.bg || 'bg-muted'} shrink-0 mt-0.5`}>
                      <CategoryIcon className={`h-4 w-4 ${config?.color || 'text-muted-foreground'}`} />
                    </div>
                    <span className="font-medium text-sm sm:text-base leading-relaxed">
                      {lang === 'bn' ? item.questionBn : item.questionEn}
                    </span>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="pb-5">
                  <div className="pl-9 sm:pl-10">
                    <p className="text-muted-foreground text-sm sm:text-base leading-relaxed">
                      {lang === 'bn' ? item.answerBn : item.answerEn}
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>
            );
          })}
        </Accordion>
      )}

      {/* Still have questions CTA */}
      <div className="mt-12 text-center">
        <Card className="border-emerald-500/20 bg-emerald-500/5">
          <CardContent className="py-8 sm:py-10">
            <div className="inline-flex items-center justify-center p-3 rounded-2xl bg-emerald-500/10 mb-4">
              <MessageSquare className="h-6 w-6 text-emerald-500" />
            </div>
            <h3 className="text-xl font-bold mb-2">{t('faq.stillQuestions')}</h3>
            <p className="text-muted-foreground mb-6 max-w-md mx-auto">
              {t('faq.stillQuestionsDesc')}
            </p>
            <Button
              onClick={() => navigate('report')}
              size="lg"
              className="bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 shadow-lg shadow-emerald-500/20 gap-2"
            >
              <ShieldAlert className="h-5 w-5" />
              {t('faq.goToReport')}
              <ArrowRight className="h-4 w-4" />
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
