import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { ThemePicker } from '@/components/ThemePicker';

// v1.9: thin wrapper around <ThemePicker />. The picker itself moved to a
// reusable component (also rendered in the workspace SettingsPane Theme tab).
// This page-level shell adds the back affordance + heading chrome that's
// appropriate when the picker is the entire route.
export function Settings() {
  const navigate = useNavigate();

  function handleBack() {
    // History-aware: jump back to where the user came from when possible.
    // Direct loads of /settings (no history) land on Home so the button
    // always does *something* useful.
    if (window.history.length > 1) {
      navigate(-1);
    } else {
      navigate('/');
    }
  }

  return (
    <div className="flex-1 overflow-y-auto">
      <div className="max-w-[1000px] mx-auto w-full px-6 py-6 space-y-8">
        <header className="space-y-2">
          <button
            type="button"
            onClick={handleBack}
            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground -ml-1 px-1 py-0.5 rounded"
            aria-label="Back"
          >
            <ArrowLeft className="size-4" />
            <span>Back</span>
          </button>
          <div>
            <h1 className="text-xl font-semibold">Settings</h1>
            <p className="text-sm text-muted-foreground mt-1">
              Theme appearance. Saved on change, applies immediately.
            </p>
          </div>
        </header>
        <ThemePicker />
      </div>
    </div>
  );
}