import React, { Suspense } from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import LoginClientPage from './ClientPage';

export const metadata: Metadata = {
  title: {
    absolute: 'Login to QR Master | Access Your Dashboard'
  },
  description: 'Sign in to QR Master to create, manage, and track your QR codes. Access your dashboard and view analytics.',
  alternates: {
    canonical: 'https://www.qrmaster.net/login',
  },
  openGraph: {
    title: 'Login to QR Master | Access Your Dashboard',
    description: 'Sign in to QR Master to create, manage, and track your QR codes.',
    url: 'https://www.qrmaster.net/login',
    type: 'website',
    images: [{
      url: 'https://www.qrmaster.net/og-image.png',
      width: 1200,
      height: 630,
      alt: 'QR Master Login',
    }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Login to QR Master | Access Your Dashboard',
    description: 'Sign in to QR Master to create, manage, and track your QR codes.',
    images: ['https://www.qrmaster.net/og-image.png'],
  },
};


export default function LoginPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-white flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <Link href="/" className="inline-flex items-center space-x-2 mb-6">
            <img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
            <span className="text-2xl font-bold text-gray-900">QR Master</span>
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">Welcome Back</h1>
          <p className="text-gray-600 mt-2">Sign in to your account</p>
          <Link href="/" className="text-sm text-primary-600 hover:text-primary-700 font-medium mt-2 inline-block border border-primary-600 hover:border-primary-700 px-4 py-2 rounded-lg transition-colors">
            ← Back to Home
          </Link>
        </div>

        <Suspense fallback={
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-8 flex items-center justify-center min-h-[400px]">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
          </div>
        }>
          <LoginClientPage />
        </Suspense>

        <p className="text-center text-sm text-gray-500 mt-6">
          By signing in, you agree to our{' '}
          <Link href="/privacy" className="text-primary-600 hover:text-primary-700">
            Privacy Policy
          </Link>
        </p>
      </div>
    </div>
  );
}