'use client';

import { useLocalStorage } from '@/hooks/useLocalStorage';
import { useState } from 'react';

interface UserSettings {
  theme: 'light' | 'dark';
  notifications: boolean;
  language: string;
}

export default function TestLocalStoragePage() {
  // Test 1: Simple string value
  const [name, setName, removeName] = useLocalStorage('test-name', 'Guest');

  // Test 2: Complex object
  const [settings, setSettings, removeSettings] = useLocalStorage<UserSettings>(
    'test-settings',
    {
      theme: 'light',
      notifications: true,
      language: 'en',
    }
  );

  // Test 3: Array
  const [items, setItems, removeItems] = useLocalStorage<string[]>('test-items', []);

  // Test 4: Number
  const [count, setCount, removeCount] = useLocalStorage('test-count', 0);

  const [newItem, setNewItem] = useState('');

  return (
    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
      <h1>useLocalStorage Hook Test Page</h1>
      <p style={{ color: '#666', marginBottom: '2rem' }}>
        Open DevTools (F12) → Application → Local Storage to see values update in real-time.
        Refresh the page to verify persistence.
      </p>

      {/* Test 1: String */}
      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Test 1: String Value</h2>
        <p>Current Name: <strong>{name}</strong></p>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
          style={{ padding: '0.5rem', marginRight: '0.5rem' }}
        />
        <button onClick={() => removeName()} style={{ padding: '0.5rem' }}>
          Reset
        </button>
        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
          localStorage key: <code>test-name</code>
        </p>
      </div>

      {/* Test 2: Complex Object */}
      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Test 2: Complex Object</h2>
        <div style={{ marginBottom: '1rem' }}>
          <p>Theme: <strong>{settings.theme}</strong></p>
          <button
            onClick={() => setSettings((prev) => ({ ...prev, theme: prev.theme === 'light' ? 'dark' : 'light' }))}
            style={{ padding: '0.5rem', marginRight: '0.5rem' }}
          >
            Toggle Theme
          </button>
        </div>
        <div style={{ marginBottom: '1rem' }}>
          <label>
            <input
              type="checkbox"
              checked={settings.notifications}
              onChange={(e) => setSettings((prev) => ({ ...prev, notifications: e.target.checked }))}
            />
            {' '}Enable Notifications
          </label>
        </div>
        <div style={{ marginBottom: '1rem' }}>
          <label>Language: </label>
          <select
            value={settings.language}
            onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
            style={{ padding: '0.5rem' }}
          >
            <option value="en">English</option>
            <option value="de">German</option>
            <option value="es">Spanish</option>
          </select>
        </div>
        <button onClick={() => removeSettings()} style={{ padding: '0.5rem' }}>
          Reset Settings
        </button>
        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
          localStorage key: <code>test-settings</code>
        </p>
      </div>

      {/* Test 3: Array */}
      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Test 3: Array Value</h2>
        <p>Items ({items.length}):</p>
        <ul style={{ minHeight: '60px' }}>
          {items.map((item, index) => (
            <li key={index}>
              {item}{' '}
              <button
                onClick={() => setItems((prev) => prev.filter((_, i) => i !== index))}
                style={{ padding: '0.25rem 0.5rem', fontSize: '0.875rem' }}
              >
                Remove
              </button>
            </li>
          ))}
        </ul>
        <div>
          <input
            type="text"
            value={newItem}
            onChange={(e) => setNewItem(e.target.value)}
            onKeyPress={(e) => {
              if (e.key === 'Enter' && newItem.trim()) {
                setItems((prev) => [...prev, newItem.trim()]);
                setNewItem('');
              }
            }}
            placeholder="Add new item"
            style={{ padding: '0.5rem', marginRight: '0.5rem' }}
          />
          <button
            onClick={() => {
              if (newItem.trim()) {
                setItems((prev) => [...prev, newItem.trim()]);
                setNewItem('');
              }
            }}
            style={{ padding: '0.5rem', marginRight: '0.5rem' }}
          >
            Add Item
          </button>
          <button onClick={() => removeItems()} style={{ padding: '0.5rem' }}>
            Clear All
          </button>
        </div>
        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
          localStorage key: <code>test-items</code>
        </p>
      </div>

      {/* Test 4: Number */}
      <div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Test 4: Number Value</h2>
        <p>Count: <strong>{count}</strong></p>
        <button onClick={() => setCount((prev) => prev + 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
          Increment
        </button>
        <button onClick={() => setCount((prev) => prev - 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
          Decrement
        </button>
        <button onClick={() => removeCount()} style={{ padding: '0.5rem' }}>
          Reset
        </button>
        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
          localStorage key: <code>test-count</code>
        </p>
      </div>

      {/* Instructions */}
      <div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f0f9ff', borderRadius: '8px' }}>
        <h3>Verification Checklist:</h3>
        <ul>
          <li>✓ Open DevTools → Application → Local Storage → http://localhost:3000</li>
          <li>✓ Interact with the controls above and watch localStorage update in real-time</li>
          <li>✓ Refresh the page (F5) - all values should persist</li>
          <li>✓ Check Console for hydration errors (there should be none)</li>
          <li>✓ Check Console for any errors (there should be none)</li>
          <li>✓ Verify TypeScript has no errors in your editor</li>
        </ul>
      </div>
    </div>
  );
}