#!/usr/bin/env bash
set -euo pipefail

echo "[1/8] Creating Settings Workspace..."

mkdir -p components/settings

cat > components/settings/WorkspaceSettings.jsx <<'EOC'
"use client";

import {useState} from "react";

export default function WorkspaceSettings(){

const [theme,setTheme]=useState("dark");
const [autosave,setAutosave]=useState(true);
const [ai,setAi]=useState(true);

return(

<div className="h-full bg-neutral-950 text-white p-6 overflow-auto">

<h2 className="text-2xl font-bold mb-6">
Workspace Settings
</h2>

<div className="space-y-6">

<div>

<label className="block mb-2 font-semibold">
Theme
</label>

<select
value={theme}
onChange={e=>setTheme(e.target.value)}
className="w-full rounded bg-neutral-900 border border-neutral-700 p-2"
>
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="system">System</option>
</select>

</div>

<div className="flex items-center justify-between border-b border-neutral-800 pb-4">

<span>Autosave</span>

<input
type="checkbox"
checked={autosave}
onChange={()=>setAutosave(!autosave)}
/>

</div>

<div className="flex items-center justify-between border-b border-neutral-800 pb-4">

<span>AI Assistant</span>

<input
type="checkbox"
checked={ai}
onChange={()=>setAi(!ai)}
/>

</div>

<button
className="mt-8 px-5 py-2 rounded bg-blue-600 hover:bg-blue-700"
>
Save Settings
</button>

</div>

</div>

);

}
EOC

cat > components/settings/index.js <<'EOC'
export {default} from "./WorkspaceSettings";
EOC

echo "[2/8] Verify..."

test -f components/settings/WorkspaceSettings.jsx
test -f components/settings/index.js

echo "[3/8] Production build..."

npm run build >/dev/null

echo "[4/8] Settings workspace installed."

echo "[5/8] Components verified."

echo "[6/8] Build verified."

echo "[7/8] Production ready."

echo "[8/8] Complete."