import Link from "next/link";
import type { Metadata } from "next";
import { TICKET_FORMS, TICKET_CATEGORIES, getFormsByCategory } from "@/lib/ticket-forms";

const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "https://www.adultworld.ai";

export const metadata: Metadata = {
  title: "Support Center",
  description:
    "Get help with your AdultWorld account. Browse support topics, chat with AI, or open a support ticket.",
  alternates: { canonical: `${baseUrl}/support` },
  openGraph: {
    title: "Support Center | AdultWorld",
    description:
      "Get help with your AdultWorld account. Browse support topics, chat with AI, or open a support ticket.",
    url: `${baseUrl}/support`,
  },
  twitter: {
    card: "summary",
    title: "Support Center | AdultWorld",
    description: "Get help with your AdultWorld account.",
  },
};

type Props = {
  searchParams: Promise<{ q?: string }>;
};

const CATEGORY_ICONS: Record<string, React.ReactNode> = {
  verification: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
    </svg>
  ),
  payment: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
    </svg>
  ),
  account: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
    </svg>
  ),
  safety: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
    </svg>
  ),
  technical: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
    </svg>
  ),
  profile: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  agency: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
    </svg>
  ),
  general: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
};

export default async function SupportPage({ searchParams }: Props) {
  const { q } = await searchParams;

  const filteredForms = q
    ? TICKET_FORMS.filter(
        (f) =>
          f.title.toLowerCase().includes(q.toLowerCase()) ||
          f.description.toLowerCase().includes(q.toLowerCase()) ||
          f.category.toLowerCase().includes(q.toLowerCase())
      )
    : null;

  // FAQPage JSON-LD built from the canonical TICKET_FORMS — gives AI crawlers
  // clean Q&A pairs to cite when users ask "how do I X on AdultWorld".
  const faqLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: TICKET_FORMS.slice(0, 20).map((f) => ({
      "@type": "Question",
      name: f.title,
      acceptedAnswer: { "@type": "Answer", text: f.description },
    })),
  };

  return (
    <div className="max-w-5xl mx-auto space-y-10">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
      {/* Hero */}
      <div className="text-center">
        <h1 className="text-3xl md:text-4xl font-bold mb-3">How can we help?</h1>
        <p className="text-text-muted text-lg">
          Search for answers, browse support topics, or open a ticket.
        </p>
      </div>

      {/* Quick links */}
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Link
          href="/support/tickets"
          className="inline-flex items-center gap-2 bg-surface hover:bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-sm font-medium transition-colors"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          My Tickets
        </Link>
        <Link
          href="/help"
          className="inline-flex items-center gap-2 bg-surface hover:bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-sm font-medium transition-colors"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
          </svg>
          Help Articles
        </Link>
      </div>

      {/* Search */}
      <form className="max-w-2xl mx-auto">
        <div className="relative">
          <svg
            className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-text-muted"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          <input
            type="search"
            name="q"
            defaultValue={q ?? ""}
            placeholder="Search support topics..."
            className="w-full bg-surface border border-surface-light rounded-lg pl-12 pr-4 py-3 text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          />
        </div>
      </form>

      {/* Search results */}
      {filteredForms && (
        <section>
          <h2 className="text-xl font-bold mb-4">
            Results for &quot;{q}&quot;
            <span className="text-text-muted font-normal text-base ml-2">
              ({filteredForms.length} found)
            </span>
          </h2>
          {filteredForms.length === 0 ? (
            <div className="bg-surface rounded-lg p-8 text-center">
              <p className="text-text-muted">No matching support topics found.</p>
            </div>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2">
              {filteredForms.map((form) => (
                <Link
                  key={form.slug}
                  href={`/support/new/${form.slug}`}
                  className="bg-surface rounded-lg p-4 hover:ring-1 hover:ring-primary transition-all"
                >
                  <h3 className="font-semibold text-sm">{form.title}</h3>
                  <p className="text-text-muted text-xs mt-1">{form.description}</p>
                  <span className="inline-block mt-2 text-xs bg-surface-light text-text-muted px-2 py-0.5 rounded capitalize">
                    {form.category}
                  </span>
                </Link>
              ))}
            </div>
          )}
        </section>
      )}

      {/* Category sections */}
      {!filteredForms && (
        <div className="space-y-8">
          {TICKET_CATEGORIES.map((cat) => {
            const forms = getFormsByCategory(cat.value);
            if (forms.length === 0) return null;

            return (
              <section key={cat.value}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="text-primary">
                    {CATEGORY_ICONS[cat.value]}
                  </div>
                  <h2 className="text-xl font-bold">{cat.label}</h2>
                </div>
                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                  {forms.map((form) => (
                    <Link
                      key={form.slug}
                      href={`/support/new/${form.slug}`}
                      className="bg-surface rounded-lg p-4 hover:ring-1 hover:ring-primary transition-all group"
                    >
                      <h3 className="font-semibold text-sm group-hover:text-primary transition-colors">
                        {form.title}
                      </h3>
                      <p className="text-text-muted text-xs mt-1">{form.description}</p>
                    </Link>
                  ))}
                </div>
              </section>
            );
          })}
        </div>
      )}
    </div>
  );
}