/**
 * Notifications Page
 * Full-page notification management
 */

import React, { useState } from 'react';
import Head from 'next/head';
import { NotificationList } from '../components/notifications/NotificationList';
import { PreferencesForm } from '../components/notifications/PreferencesForm';

export default function NotificationsPage() {
  const [activeTab, setActiveTab] = useState<'notifications' | 'preferences'>('notifications');
  const userId = 'demo-user'; // In production, get from auth

  return (
    <>
      <Head>
        <title>Notifications - LocalGreenChain</title>
        <meta name="description" content="Manage your notifications and preferences" />
      </Head>

      <div className="min-h-screen bg-gray-50">
        {/* Header */}
        <header className="bg-white border-b">
          <div className="max-w-4xl mx-auto px-4 py-6">
            <h1 className="text-2xl font-bold text-gray-900">Notifications</h1>
            <p className="mt-1 text-gray-600">Manage your notifications and preferences</p>
          </div>
        </header>

        {/* Tabs */}
        <div className="bg-white border-b">
          <div className="max-w-4xl mx-auto px-4">
            <nav className="flex space-x-8" aria-label="Tabs">
              <button
                onClick={() => setActiveTab('notifications')}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === 'notifications'
                    ? 'border-green-500 text-green-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                All Notifications
              </button>
              <button
                onClick={() => setActiveTab('preferences')}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === 'preferences'
                    ? 'border-green-500 text-green-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                Preferences
              </button>
            </nav>
          </div>
        </div>

        {/* Content */}
        <main className="max-w-4xl mx-auto px-4 py-8">
          {activeTab === 'notifications' ? (
            <div className="bg-white rounded-lg border overflow-hidden">
              <NotificationList userId={userId} showFilters />
            </div>
          ) : (
            <PreferencesForm userId={userId} />
          )}
        </main>
      </div>
    </>
  );
}
