rehearshalhub/web/src/pages/SettingsPage.tsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "../api/client";

interface MemberRead {
  id: string;
  display_name: string;
  email: string;
  avatar_url: string | null;
  nc_username: string | null;
  nc_url: string | null;
  nc_configured: boolean;
}

const getMe = () => api.get<MemberRead>("/auth/me");
const updateSettings = (data: {
  display_name?: string;
  nc_url?: string;
  nc_username?: string;
  nc_password?: string;
}) => api.patch<MemberRead>("/auth/me/settings", data);

const inputStyle: React.CSSProperties = {
  width: "100%",
  padding: "8px 12px",
  background: "var(--bg-inset)",
  border: "1px solid var(--border)",
  borderRadius: 6,
  color: "var(--text)",
  fontSize: 14,
  boxSizing: "border-box",
};

function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
  const qc = useQueryClient();
  const [displayName, setDisplayName] = useState(me.display_name ?? "");
  const [ncUrl, setNcUrl] = useState(me.nc_url ?? "");
  const [ncUsername, setNcUsername] = useState(me.nc_username ?? "");
  const [ncPassword, setNcPassword] = useState("");
  const [avatarUrl, setAvatarUrl] = useState(me.avatar_url ?? "");
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const saveMutation = useMutation({
    mutationFn: () =>
      updateSettings({
        display_name: displayName || undefined,
        nc_url: ncUrl || undefined,
        nc_username: ncUsername || undefined,
        nc_password: ncPassword || undefined,
        avatar_url: avatarUrl || undefined,
      }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["me"] });
      setSaved(true);
      setNcPassword("");
      setError(null);
      setTimeout(() => setSaved(false), 3000);
    },
    onError: (err) => setError(err instanceof Error ? err.message : "Save failed"),
  });

  const labelStyle: React.CSSProperties = {
    display: "block", color: "var(--text-muted)", fontSize: 11, marginBottom: 6,
  };

  return (
    <>
      <section style={{ marginBottom: 32 }}>
        <h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 16 }}>PROFILE</h2>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
        {avatarUrl && (
          <img src={avatarUrl} alt="Profile" style={{ width: 64, height: 64, borderRadius: "50%", objectFit: "cover" }} />
        )}
        <div style={{ flex: 1 }}>
          <label style={labelStyle}>DISPLAY NAME</label>
          <input value={displayName} onChange={(e) => setDisplayName(e.target.value)} style={inputStyle} />
          <p style={{ color: "var(--text-subtle)", fontSize: 11, margin: "4px 0 0" }}>{me.email}</p>
        </div>
      </div>
      </section>

      <section style={{ marginBottom: 32 }}>
        <h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 8 }}>NEXTCLOUD CONNECTION</h2>
        <p style={{ color: "var(--text-subtle)", fontSize: 12, marginBottom: 16 }}>
          Configure your personal Nextcloud credentials. When set, all file operations (band folders, song uploads, scans) will use these credentials.
        </p>

        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
          <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: me.nc_configured ? "var(--teal)" : "var(--text-muted)" }} />
          <span style={{ fontSize: 12, color: me.nc_configured ? "var(--teal)" : "var(--text-muted)" }}>
            {me.nc_configured ? "Connected" : "Not configured"}
          </span>
        </div>

        <label style={labelStyle}>NEXTCLOUD URL</label>
        <input value={ncUrl} onChange={(e) => setNcUrl(e.target.value)} placeholder="https://cloud.example.com" style={inputStyle} />

        <label style={{ ...labelStyle, marginTop: 12 }}>USERNAME</label>
        <input value={ncUsername} onChange={(e) => setNcUsername(e.target.value)} style={inputStyle} />

        <label style={{ ...labelStyle, marginTop: 12 }}>PASSWORD / APP PASSWORD</label>
        <input
          type="password"
          value={ncPassword}
          onChange={(e) => setNcPassword(e.target.value)}
          placeholder={me.nc_configured ? "••••••••  (leave blank to keep existing)" : ""}
          style={inputStyle}
        />
        <p style={{ color: "var(--text-subtle)", fontSize: 11, margin: "4px 0 0" }}>
          Use an app password from Nextcloud Settings → Security for better security.
        </p>
      </section>

      <section style={{ marginBottom: 32 }}>
        <h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 16 }}>AVATAR</h2>
        <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
          <input
            type="file"
            accept="image/*"
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) {
                // In a real app, you would upload the file to a server
                // and get a URL back. For now, we'll use a placeholder.
                const reader = new FileReader();
                reader.onload = (event) => {
                  // This is a simplified approach - in production you'd upload to server
                  setAvatarUrl(event.target?.result as string);
                };
                reader.readAsDataURL(file);
              }
            }}
            style={{ display: "none" }}
            id="avatar-upload"
          />
          <label htmlFor="avatar-upload" style={{ 
            background: "var(--accent)", 
            border: "none", 
            borderRadius: 6, 
            color: "var(--accent-fg)", 
            cursor: "pointer", 
            padding: "8px 16px", 
            fontWeight: 600, 
            fontSize: 14 
          }}>
            Upload Avatar
          </label>
          <button
            onClick={() => {
              // Generate a new random avatar
              const randomSeed = Math.random().toString(36).substring(2, 15);
              setAvatarUrl(`https://api.dicebear.com/v6/identicon/svg?seed=${randomSeed}&backgroundType=gradientLinear&size=128`);
            }}
            style={{ 
              background: "none", 
              border: "1px solid var(--border)", 
              borderRadius: 6, 
              color: "var(--text)", 
              cursor: "pointer", 
              padding: "8px 16px", 
              fontSize: 14 
            }}
          >
            Generate Random
          </button>
        </div>
        {avatarUrl && (
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src={avatarUrl} alt="Preview" style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }} />
            <button
              onClick={() => setAvatarUrl("")}
              style={{ 
                background: "none", 
                border: "none", 
                color: "var(--danger)", 
                cursor: "pointer", 
                fontSize: 12 
              }}
            >
              Remove
            </button>
          </div>
        )}
      </section>

      {error && <p style={{ color: "var(--danger)", fontSize: 13, marginBottom: 12 }}>{error}</p>}
      {saved && <p style={{ color: "var(--teal)", fontSize: 13, marginBottom: 12 }}>Settings saved.</p>}

      <div style={{ display: "flex", gap: 8 }}>
        <button
          onClick={() => saveMutation.mutate()}
          disabled={saveMutation.isPending}
          style={{ background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", cursor: "pointer", padding: "10px 24px", fontWeight: 600, fontSize: 14 }}
        >
          {saveMutation.isPending ? "Saving…" : "Save Settings"}
        </button>
        <button
          onClick={onBack}
          style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", cursor: "pointer", padding: "10px 18px", fontSize: 14 }}
        >
          Cancel
        </button>
      </div>
    </>
  );
}

export function SettingsPage() {
  const navigate = useNavigate();
  const { data: me, isLoading } = useQuery({ queryKey: ["me"], queryFn: getMe });

  return (
    <div style={{ background: "var(--bg)", minHeight: "100vh", color: "var(--text)", padding: 24 }}>
      <div style={{ maxWidth: 540, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
          <button
            onClick={() => navigate("/")}
            style={{ background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: 13, padding: 0 }}
          >
            ← All Bands
          </button>
          <h1 style={{ color: "var(--accent)", fontFamily: "monospace", margin: 0, fontSize: 20 }}>Settings</h1>
        </div>

        {isLoading && <p style={{ color: "var(--text-muted)" }}>Loading...</p>}
        {me && <SettingsForm me={me} onBack={() => navigate("/")} />}
      </div>
    </div>
  );
}