'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ChevronDown, ChevronUp, HelpCircle, Mail, MessageCircle, ArrowRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const FAQS = [
  {
    category: 'Getting Started',
    questions: [
      { q: 'How do I create an account?', a: 'Click "Get Started" on the homepage, fill in your email and password, verify your email, and accept the terms. The process takes less than 2 minutes.' },
      { q: 'What do I need to verify my account?', a: 'You will need to verify your email address. Additional verification may be required for certain features like withdrawals.' },
      { q: 'Is there a fee to sign up?', a: 'No, creating an account is completely free. There are no hidden fees for account maintenance.' },
    ],
  },
  {
    category: 'Wallet & Trading',
    questions: [
      { q: 'How do I deposit funds?', a: 'Navigate to your Wallet page and click "Deposit". Follow the instructions to complete your deposit. Most deposits are processed within minutes.' },
      { q: 'How long do withdrawals take?', a: 'Withdrawal processing times vary depending on the method. Most withdrawals are processed within 24 hours.' },
      { q: 'What are the trading fees?', a: 'We offer transparent, competitive pricing. Check our Fees page for detailed breakdowns based on your tier and trading volume.' },
      { q: 'Can I cancel an order?', a: 'Open orders can typically be cancelled from the Orders page. Once an order is fully matched, it cannot be reversed.' },
    ],
  },
  {
    category: 'Security',
    questions: [
      { q: 'How is my account protected?', a: 'We use bank-grade encryption, two-factor authentication (2FA), device tracking, and advanced fraud monitoring to protect your account.' },
      { q: 'What is two-factor authentication?', a: '2FA adds an extra layer of security by requiring a verification code from your authenticator app in addition to your password when signing in.' },
      { q: 'How do I enable 2FA?', a: 'Go to Security settings in your dashboard and click "Enable 2FA". Follow the instructions to scan the QR code with your authenticator app.' },
    ],
  },
  {
    category: 'Referrals & Rewards',
    questions: [
      { q: 'How does the referral program work?', a: 'Share your unique referral link. When friends sign up and complete eligible activity, you earn referral rewards.' },
      { q: 'Where can I find my referral link?', a: 'Your referral link is available in the Referral Center under "Share & Invite".' },
      { q: 'When do I receive referral rewards?', a: 'Rewards are credited after your referral completes eligible activity, as defined in our referral program terms.' },
    ],
  },
  {
    category: 'Support',
    questions: [
      { q: 'How do I contact support?', a: 'You can create a support ticket from the Support page in your dashboard. Our team will respond as soon as possible.' },
      { q: 'What are the support hours?', a: 'Our support team is available 24/7 via the ticket system. Response times vary based on your subscription tier.' },
      { q: 'I have a billing issue. Who do I contact?', a: 'Create a support ticket with the category set to "Billing" and our team will assist you promptly.' },
    ],
  },
];

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="rounded-xl border border-line bg-surface">
      <button
        onClick={() => setOpen(!open)}
        className="flex w-full items-center justify-between p-4 text-left"
      >
        <span className="text-sm font-medium text-ink">{q}</span>
        {open ? <ChevronUp className="h-4 w-4 text-ink-faint" /> : <ChevronDown className="h-4 w-4 text-ink-faint" />}
      </button>
      {open && (
        <div className="px-4 pb-4 text-sm text-ink-muted">
          {a}
        </div>
      )}
    </div>
  );
}

export default function FaqPage() {
  const sysConfig = useSystemConfig();
  return (
    <div className="bg-surface-sunken min-h-screen">
      <div className="mx-auto max-w-4xl px-4 py-12">
        <div className="text-center mb-10">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary-100 text-primary-600 dark:bg-primary-500/15 dark:text-primary-300">
            <HelpCircle className="h-6 w-6" />
          </div>
          <h1 className="text-3xl font-bold text-ink">Frequently Asked Questions</h1>
          <p className="mt-2 text-ink-muted">Quick answers to common questions about {sysConfig.projectName}</p>
        </div>

        <div className="space-y-8">
          {FAQS.map((category) => (
            <div key={category.category}>
              <h2 className="text-lg font-semibold text-ink mb-4">{category.category}</h2>
              <div className="space-y-3">
                {category.questions.map((item) => (
                  <FaqItem key={item.q} q={item.q} a={item.a} />
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 text-center">
          <Card className="inline-block p-6 text-left">
            <div className="flex items-center gap-3 mb-3">
              <MessageCircle className="h-5 w-5 text-primary-500" />
              <h3 className="text-base font-semibold text-ink">Still have questions?</h3>
            </div>
            <p className="text-sm text-ink-muted mb-4">Can&apos;t find what you&apos;re looking for? Our support team is here to help.</p>
            <div className="flex flex-wrap gap-3">
              <Link href="/contact">
                <Button size="sm">
                  Contact Support <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/dashboard/support">
                <Button variant="outline" size="sm">Create Ticket</Button>
              </Link>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}