"use client";

import { FormEvent, useState } from "react";
import { Save, Settings } from "lucide-react";
import { useDemoStore } from "@/components/demo-store";
import { PageTitle } from "@/components/page-title";

export default function SettingsPage() {
  const { organizationName, setOrganizationName } = useDemoStore();
  const [name, setName] = useState(organizationName);
  const [saved, setSaved] = useState(false);
  function submit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setOrganizationName(name.trim() || "My workspace"); setSaved(true); }
  return <><PageTitle title="Settings" description="Workspace details and safe defaults for the local MVP." />
    <form className="settings-form" onSubmit={submit}><section className="panel form-panel"><div className="panel-head"><div><h2>Organization</h2><p>Shown in the application shell and future invitations.</p></div></div><label className="field"><span>Organization name</span><input value={name} onChange={(event) => { setName(event.target.value); setSaved(false); }} required maxLength={100} /></label><label className="field"><span>Default language</span><select defaultValue="en"><option value="en">English</option><option value="ro">Romanian</option><option value="de">German</option></select></label></section><section className="panel form-panel"><div className="panel-head"><div><h2>Security defaults</h2><p>Production values will be stored in the SaaS database after deployment.</p></div></div><label className="check-field"><input type="checkbox" defaultChecked /><span><strong>Require approval for write operations</strong><small>Enabled by default for future MCP connections.</small></span></label><label className="check-field"><input type="checkbox" defaultChecked disabled /><span><strong>Require approval for destructive operations</strong><small>This cannot be disabled at organization level.</small></span></label></section><div className="form-actions"><span>{saved ? "Saved in this browser." : "Changes are stored locally for this MVP."}</span><button className="button button-primary" type="submit"><Save size={16} /> Save changes</button></div></form>
  </>;
}