import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { breadcrumbSchema, faqPageSchema } from '@/lib/schema';
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
import { FAQSection } from '@/components/aeo/FAQSection';

export const metadata: Metadata = {
  title: {
    absolute: 'Manage QR Codes - Dashboard, Edits, and Analytics',
  },
  description:
    'Manage QR codes in one dashboard. Review active codes, edit dynamic destinations, see scan totals and unique scans, and work within current Free, Pro, or Business limits.',
  keywords: [
    'manage qr codes',
    'qr code dashboard',
    'edit dynamic qr codes',
    'qr code analytics dashboard',
    'qr code management',
  ],
  alternates: {
    canonical: 'https://www.qrmaster.net/manage-qr-codes',
    languages: {
      'x-default': 'https://www.qrmaster.net/manage-qr-codes',
      en: 'https://www.qrmaster.net/manage-qr-codes',
    },
  },
  openGraph: {
    title: 'Manage QR Codes - Dashboard, Edits, and Analytics',
    description:
      'Use one dashboard to review QR codes, edit dynamic destinations, and check scan totals and unique scans.',
    url: 'https://www.qrmaster.net/manage-qr-codes',
    type: 'website',
    images: [
      {
        url: '/images/og/og-manage-qr-codes.png',
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    title: 'Manage QR Codes - Dashboard, Edits, and Analytics',
    description:
      'Use one dashboard to review QR codes, edit dynamic destinations, and check scan totals and unique scans.',
  },
};

const verifiedCapabilities = [
  {
    title: 'Central dashboard',
    description:
      'The dashboard lists your QR codes in one place instead of forcing you to manage separate files or links manually.',
  },
  {
    title: 'Dynamic destination edits',
    description:
      'Dynamic QR codes can be edited after print. Static QR codes remain fixed.',
  },
  {
    title: 'Scan reporting',
    description:
      'The current dashboard reports total scans, active codes, and unique scans, with analytics pages adding more context.',
  },
  {
    title: 'Plan-based limits',
    description:
      'Free includes 3 dynamic QR codes, Pro includes 50, and Business includes 500. Static QR codes remain unlimited.',
  },
  {
    title: 'Tags and status',
    description:
      'QR code records support tags and active status, which helps keep batches and single-code workflows easier to review.',
  },
  {
    title: 'Download and delete actions',
    description:
      'Each QR code card supports view, download, edit for dynamic QR codes, and delete actions from the dashboard surface.',
  },
];

const operationalUseCases = [
  {
    title: 'Marketing campaigns',
    description:
      'Review active dynamic QR codes, compare scan totals, and update destinations when campaigns or landing pages change.',
    points: ['One list of active codes', 'Scan totals and unique scans', 'Edit dynamic destinations'],
  },
  {
    title: 'Restaurants and hospitality',
    description:
      'Keep menu or table-card QR codes current from the dashboard instead of reprinting every time the destination changes.',
    points: ['Update menu destinations', 'Monitor scan activity', 'Keep print assets in use longer'],
  },
  {
    title: 'Product and packaging workflows',
    description:
      'Track which QR codes are active, save batches to the dashboard, and separate static bulk output from dynamic campaign codes.',
    points: ['Save generated QR codes', 'Review active status', 'Manage static and dynamic codes separately'],
  },
  {
    title: 'Small team or solo workflows',
    description:
      'Use one account to keep QR code creation, edits, downloads, and analytics in one operational place.',
    points: ['Single dashboard view', 'No spreadsheet-only workflow', 'Clear plan limits'],
  },
];

const faqItems = [
  {
    question: 'What does it mean to manage QR codes?',
    answer:
      'In QR Master, managing QR codes means using one dashboard to review your QR codes, edit dynamic destinations, download files, and check scan activity instead of tracking everything manually.',
  },
  {
    question: 'Can I edit a QR code after printing it?',
    answer:
      'Yes, if it is a dynamic QR code. Static QR codes stay fixed after creation.',
  },
  {
    question: 'How many dynamic QR codes can I manage?',
    answer:
      'Free includes 3 dynamic QR codes, Pro includes 50, and Business includes 500. Static QR codes are unlimited.',
  },
  {
    question: 'What analytics are visible today?',
    answer:
      'The current dashboard shows total scans, active QR codes, and unique scans. Additional analytics views add more scan context such as time, device, and location.',
  },
  {
    question: 'Does the current product include team roles or API-based QR management?',
    answer:
      'This page only reflects the verified current surface: dashboard management, dynamic edits, analytics, downloads, tags, and plan limits. It does not claim team roles or public API-based QR management as current verified capabilities.',
  },
];

const softwareSchema = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  '@id': 'https://www.qrmaster.net/manage-qr-codes#software',
  name: 'QR Master - QR Code Management Dashboard',
  applicationCategory: 'BusinessApplication',
  offers: {
    '@type': 'AggregateOffer',
    lowPrice: '0',
    highPrice: '29',
    priceCurrency: 'EUR',
  },
  featureList: [
    'Central QR code dashboard',
    'Edit dynamic QR code destinations',
    'Review total and unique scan counts',
    'Download QR codes as PNG or SVG',
    'Tag QR code records and review active status',
    'Manage current plan limits for dynamic QR codes',
  ],
};

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'Manage QR Codes', url: '/manage-qr-codes' },
];

export default function ManageQRCodesPage() {
  return (
    <>
      <SeoJsonLd
        data={[
          softwareSchema,
          breadcrumbSchema(breadcrumbItems),
          faqPageSchema(faqItems),
        ]}
      />

      <div className="min-h-screen bg-white">
        <section className="relative overflow-hidden bg-gradient-to-br from-green-50 via-white to-blue-50 py-20">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <Breadcrumbs items={breadcrumbItems} />
            <div className="mt-8 grid items-center gap-12 lg:grid-cols-2">
              <div className="space-y-8">
                <div className="inline-flex items-center rounded-full bg-green-100 px-4 py-2 text-sm font-semibold text-green-800">
                  Dashboard-first QR management
                </div>

                <div className="space-y-5">
                  <h1 className="text-5xl font-bold leading-tight text-gray-900 lg:text-6xl">
                    Manage QR Codes from one dashboard
                  </h1>
                  <p className="text-xl leading-relaxed text-gray-600">
                    Review active QR codes, edit dynamic destinations, download files, and
                    monitor scan totals from one place instead of managing printed QR workflows manually.
                  </p>
                </div>

                <div className="space-y-3">
                  {[
                    'See QR codes in one dashboard',
                    'Edit dynamic destinations after print',
                    'Review total scans, active codes, and unique scans',
                    'Work within the current Free, Pro, and Business dynamic QR limits',
                  ].map((feature) => (
                    <div key={feature} className="flex items-center gap-3">
                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500">
                        <svg className="h-3 w-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </div>
                      <span className="text-gray-700">{feature}</span>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col gap-4 sm:flex-row">
                  <Link href="/signup">
                    <Button size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      Get Started Free
                    </Button>
                  </Link>
                  <Link href="/pricing">
                    <Button variant="outline" size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      View Pricing
                    </Button>
                  </Link>
                </div>
              </div>

              <div className="relative">
                <Card className="p-6 shadow-2xl">
                  <h3 className="mb-4 text-lg font-semibold">Dashboard snapshot</h3>
                  <div className="space-y-3">
                    <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
                      <div className="mb-2 flex items-center justify-between">
                        <span className="text-sm font-semibold text-gray-700">Active QR codes</span>
                        <span className="text-2xl font-bold text-blue-600">3 / 50 / 500</span>
                      </div>
                      <div className="text-xs text-gray-600">Plan-based dynamic QR capacity</div>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                      <div className="rounded-lg border border-green-200 bg-green-50 p-3">
                        <div className="mb-1 text-xs text-gray-600">Total scans</div>
                        <div className="text-xl font-bold text-green-600">Dashboard metric</div>
                      </div>
                      <div className="rounded-lg border border-purple-200 bg-purple-50 p-3">
                        <div className="mb-1 text-xs text-gray-600">Unique scans</div>
                        <div className="text-xl font-bold text-purple-600">Dashboard metric</div>
                      </div>
                    </div>
                    <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
                      <div className="mb-2 text-xs text-gray-600">Available actions</div>
                      <div className="flex flex-wrap gap-2 text-xs text-gray-700">
                        <span className="rounded-full bg-white px-3 py-1">View details</span>
                        <span className="rounded-full bg-white px-3 py-1">Download PNG</span>
                        <span className="rounded-full bg-white px-3 py-1">Download SVG</span>
                        <span className="rounded-full bg-white px-3 py-1">Edit dynamic QR</span>
                        <span className="rounded-full bg-white px-3 py-1">Delete</span>
                      </div>
                    </div>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        </section>

        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnswerFirstBlock
            whatIsIt="QR Master management is a dashboard workflow for reviewing QR codes, editing dynamic destinations, downloading files, and checking scan activity from one place. It is most useful when your QR program is active enough that single-file handling becomes messy."
            whenToUse={[
              'You need one place to review active QR codes and their scan totals',
              'You want to edit dynamic QR destinations after print without replacing the QR image',
              'You need to keep static and dynamic QR workflows organized around current plan limits',
            ]}
            comparison={{
              leftTitle: 'Manual handling',
              rightTitle: 'Dashboard management',
              items: [
                { label: 'See active QR codes in one place', value: true, text: 'Scattered across files or exports' },
                { label: 'Edit dynamic destinations later', value: true, text: 'Not possible outside dynamic QR management' },
                { label: 'Review scan totals and unique scans', value: true, text: 'No unified dashboard view' },
              ],
            }}
            howTo={{
              steps: [
                'Create or save QR codes into your QR Master account',
                'Open the dashboard to review active codes, scans, and available actions',
                'Edit dynamic destinations or download the QR files you need for the next workflow',
              ],
            }}
          />
        </div>

        <div className="container mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8">
          <FAQSection items={faqItems} title="QR management questions" />
        </div>

        <section className="bg-gray-50 py-20">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-16 text-center">
              <h2 className="mb-4 text-4xl font-bold text-gray-900">What the current dashboard supports</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                These capabilities are tied to the present product surface rather than future or inferred roadmap features.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {verifiedCapabilities.map((feature) => (
                <Card key={feature.title} className="p-6 transition-shadow hover:shadow-lg">
                  <h3 className="mb-2 text-xl font-semibold text-gray-900">{feature.title}</h3>
                  <p className="text-gray-600">{feature.description}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section className="py-20">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-16 text-center">
              <h2 className="mb-4 text-4xl font-bold text-gray-900">Where QR management is most useful</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                Use the dashboard when your QR workflows need ongoing edits, downloads, and visibility instead of one-off creation.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2">
              {operationalUseCases.map((useCase) => (
                <Card key={useCase.title} className="p-8">
                  <h3 className="mb-3 text-2xl font-bold text-gray-900">{useCase.title}</h3>
                  <p className="mb-6 text-gray-600">{useCase.description}</p>
                  <ul className="space-y-2">
                    {useCase.points.map((point) => (
                      <li key={point} className="flex items-center gap-2">
                        <svg className="h-5 w-5 flex-shrink-0 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                        <span className="text-gray-700">{point}</span>
                      </li>
                    ))}
                  </ul>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-gradient-to-r from-green-600 to-blue-600 py-20 text-white">
          <div className="container mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
            <h2 className="mb-6 text-4xl font-bold">Start managing your QR codes with one account</h2>
            <p className="mb-8 text-xl text-green-100">
              Keep dynamic updates, downloads, and scan reporting in one dashboard instead of spreading the workflow across files and ad hoc links.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <Link href="/signup">
                <Button
                  size="lg"
                  variant="secondary"
                  className="w-full bg-white px-8 py-4 text-lg text-green-600 hover:bg-gray-100 sm:w-auto"
                >
                  Get Started Free
                </Button>
              </Link>
              <Link href="/pricing">
                <Button
                  size="lg"
                  variant="outline"
                  className="w-full border-white px-8 py-4 text-lg text-white hover:bg-white/10 sm:w-auto"
                >
                  View Pricing
                </Button>
              </Link>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}