import Link from 'next/link';
import { DashboardShell } from '../../../components/dashboard-shell';

const helpCategories = [
  {
    icon: 'rocket_launch',
    title: 'Getting Started',
    description: 'Set up your BizOne account, connect channels, and prepare your first workspace.',
    href: '/dashboard/settings/whatsapp-api',
  },
  {
    icon: 'api',
    title: 'Messaging API',
    description: 'REST API basics, authentication, webhook callbacks, and delivery status flows.',
    href: '/dashboard/settings/whatsapp-api',
  },
  {
    icon: 'campaign',
    title: 'Campaign Management',
    description: 'Create broadcasts, segment audiences, schedule messages, and review performance.',
    href: '/dashboard/campaigns',
  },
  {
    icon: 'manage_accounts',
    title: 'User Roles',
    description: 'Invite teammates, assign permissions, and keep administrator access controlled.',
    href: '/dashboard/roles',
  },
  {
    icon: 'payments',
    title: 'Billing & Subscription',
    description: 'Understand quota, balance alerts, invoices, and subscription-related operations.',
    href: '/dashboard/settings/audit-trail',
  },
  {
    icon: 'security',
    title: 'Security & Webhooks',
    description: 'Secure tokens, signing secrets, audit history, and webhook delivery monitoring.',
    href: '/dashboard/settings/security',
  },
];

const popularArticles = [
  {
    icon: 'description',
    title: 'Setting up your first campaign',
    description: 'A practical walkthrough for preparing recipients, templates, and broadcasts.',
    href: '/dashboard/campaigns',
  },
  {
    icon: 'sync_alt',
    title: 'Managing webhook notifications',
    description: 'Track real-time status updates and inspect webhook delivery logs.',
    href: '/dashboard/settings/webhook-logs',
  },
  {
    icon: 'lock',
    title: 'Security configuration guide',
    description: 'Keep your integration safe with secrets, token rotation, and audit review.',
    href: '/dashboard/settings/security',
  },
  {
    icon: 'group',
    title: 'Bulk user management',
    description: 'Organize team members and permissions for operational roles.',
    href: '/dashboard/users',
  },
];

export default async function HelpPage() {
  return (
    <DashboardShell currentPath="/dashboard/help" title="Help & Support">
      <section className="help-hero">
        <div className="help-hero-copy">
          <span className="page-eyebrow">Support Center</span>
          <h1>How can we help you today?</h1>
          <p>
            Search the knowledge base or browse common BizOne Enterprise topics for API, campaign, security, and
            operational guidance.
          </p>
        </div>
        <form className="help-hero-search" action="/dashboard/help">
          <span className="material-symbols-outlined">search</span>
          <input name="q" type="search" placeholder="Type keywords like API integration, billing, or webhooks..." />
          <button type="submit">Search</button>
        </form>
      </section>

      <section className="help-section-head">
        <div>
          <span className="page-eyebrow">Knowledge Base</span>
          <h2>Browse by Category</h2>
        </div>
        <Link href="/dashboard/help" className="dashboard-link-button">
          View all topics
        </Link>
      </section>

      <section className="help-category-grid">
        {helpCategories.map((item) => (
          <Link key={item.title} href={item.href} className="surface-card help-card">
            <span className="help-card-icon material-symbols-outlined">{item.icon}</span>
            <h3>{item.title}</h3>
            <p>{item.description}</p>
          </Link>
        ))}
      </section>

      <section className="help-bento-grid">
        <article className="surface-card help-articles-card">
          <div className="card-head">
            <div className="help-card-title-row">
              <span className="material-symbols-outlined">star</span>
              <h3>Popular Articles</h3>
            </div>
          </div>
          <div className="help-article-list">
            {popularArticles.map((item) => (
              <Link key={item.title} href={item.href} className="help-article-link">
                <span className="material-symbols-outlined">{item.icon}</span>
                <div>
                  <strong>{item.title}</strong>
                  <p>{item.description}</p>
                </div>
                <span className="material-symbols-outlined help-article-chevron">chevron_right</span>
              </Link>
            ))}
          </div>
        </article>

        <aside className="help-support-stack">
          <article className="help-support-card">
            <h3>Need expert help?</h3>
            <p>Our support team can help with enterprise setup, webhook debugging, and messaging operations.</p>
            <div className="help-support-actions">
              <Link href="/dashboard/conversations" className="help-support-button">
                <span className="material-symbols-outlined">chat</span>
                Live Chat
                <small>Online</small>
              </Link>
              <Link href="mailto:support@bizone.id" className="help-support-button">
                <span className="material-symbols-outlined">mail</span>
                Email Support
              </Link>
              <Link href="/dashboard/settings/whatsapp-api" className="help-support-button">
                <span className="material-symbols-outlined">menu_book</span>
                Developer Documentation
              </Link>
            </div>
          </article>

          <article className="surface-card help-status-card">
            <div className="help-card-title-row">
              <span className="material-symbols-outlined">update</span>
              <h3>System Status</h3>
            </div>
            <div className="help-status-row">
              <span />
              All systems operational
            </div>
          </article>
        </aside>
      </section>
    </DashboardShell>
  );
}
