import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth, useAuthActions } from '../../lib/auth';

export const UserProfile: Component = () => {
  const auth = useAuth();
  const { updateUser } = useAuthActions();
  const [editing, setEditing] = createSignal(false);
  const [name, setName] = createSignal('');

  const user = () => auth().user;

  const handleSave = async () => {
    const u = user();
    if (!u) return;
    await updateUser({ name: name().trim() || u.name });
    setEditing(false);
  };

  const startEditing = () => {
    const u = user();
    if (u) {
      setName(u.name);
      setEditing(true);
    }
  };

  return (
    <div class="freno-profile">
      <div class="freno-page-header">
        <h1>Profile</h1>
      </div>

      <div class="freno-profile-card">
        <div class="freno-profile-header">
          <div class="freno-avatar-large">
            {user()?.avatarUrl ? (
              <img src={user()!.avatarUrl} alt={user()!.name} class="freno-avatar-img" />
            ) : (
              <span>{user()?.name?.charAt(0)?.toUpperCase() || 'U'}</span>
            )}
          </div>
          <div class="freno-profile-info">
            {editing() ? (
              <div class="freno-edit-name">
                <input
                  type="text"
                  value={name()}
                  onInput={(e) => setName(e.target.value)}
                  class="freno-input"
                />
                <button class="freno-btn freno-btn-primary" onClick={handleSave}>Save</button>
                <button class="freno-btn freno-btn-secondary" onClick={() => setEditing(false)}>
                  Cancel
                </button>
              </div>
            ) : (
              <div class="freno-name-row">
                <h2>{user()?.name}</h2>
                <button class="freno-btn freno-btn-small" onClick={startEditing}>Edit</button>
              </div>
            )}
            <p class="freno-email">{user()?.email}</p>
            <span class={`freno-badge freno-badge-${user()?.role}`}>{user()?.role}</span>
          </div>
        </div>

        <div class="freno-profile-details">
          <dl class="freno-dl">
            <dt>User ID</dt>
            <dd class="freno-mono">{user()?.id}</dd>
          </dl>
        </div>
      </div>

      <div class="freno-section">
        <h2>Preferences</h2>
        <div class="freno-preferences">
          <div class="freno-preference-item">
            <div>
              <h3>Email Notifications</h3>
              <p>Receive email updates about project activity</p>
            </div>
            <label class="freno-toggle">
              <input type="checkbox" checked />
              <span class="freno-toggle-slider" />
            </label>
          </div>
          <div class="freno-preference-item">
            <div>
              <h3>Collaboration Alerts</h3>
              <p>Get notified when others edit your documents</p>
            </div>
            <label class="freno-toggle">
              <input type="checkbox" checked />
              <span class="freno-toggle-slider" />
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};
