'use client';

import React, { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useTheme } from 'next-themes';

interface SettingsPageProps {
  userEmail?: string;
}

export default function SettingsPage({ userEmail }: SettingsPageProps) {
  const { logout } = useAuth();
  const { theme, setTheme } = useTheme();
  const [showConfirm, setShowConfirm] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-32 pt-8">
      <div className="max-w-md mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
            Settings
          </h1>
          <p className="text-slate-600 dark:text-slate-400">
            Manage your preferences and account
          </p>
        </div>

        {/* Settings Card */}
        <div className="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
          {/* Account Section */}
          <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
              Account
            </h2>
            <div className="space-y-3">
              <div>
                <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Email</p>
                <p className="text-slate-900 dark:text-white">{userEmail || 'Not set'}</p>
              </div>
            </div>
          </div>

          {/* Appearance Section */}
          <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
              Appearance
            </h2>
            <div className="space-y-3">
              <p className="text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">
                Theme
              </p>
              <div className="grid grid-cols-3 gap-2">
                {['light', 'dark', 'system'].map(t => (
                  <button
                    key={t}
                    onClick={() => setTheme(t)}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors capitalize ${
                      theme === t
                        ? 'bg-blue-600 text-white'
                        : 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
                    }`}
                  >
                    {t === 'system' ? 'Auto' : t}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* About Section */}
          <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
              About
            </h2>
            <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
              <p>Prayer Journal v1.0</p>
              <p>A simple, private space for your daily prayers and reflections.</p>
            </div>
          </div>

          {/* Logout Section */}
          <div>
            <button
              onClick={() => setShowConfirm(true)}
              className="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors"
            >
              Logout
            </button>
          </div>
        </div>

        {/* Logout Confirmation Modal */}
        {showConfirm && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <div className="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-sm w-full">
              <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
                Logout?
              </h2>
              <p className="text-slate-600 dark:text-slate-400 mb-6">
                Are you sure you want to logout?
              </p>
              <div className="flex gap-3">
                <button
                  onClick={() => setShowConfirm(false)}
                  className="flex-1 px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white font-medium hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={() => logout()}
                  className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
                >
                  Logout
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}