import React from "react";
import PageShell from "./_pageShell";
import { Card, CardHeader, CardContent } from "../components/ui/Card";
import { Input } from "../components/ui/Input";

export default function Settings() {
  return (
    <PageShell title="Settings">
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader><div className="text-sm font-semibold">Environment</div></CardHeader>
          <CardContent className="text-sm text-neutral-600 space-y-2">
            <div>API Base URL</div>
            <Input readOnly value={import.meta.env.VITE_API_BASE_URL || "http://127.0.0.1:8000"} />
            <div className="text-xs text-neutral-500">
              Set <code className="rounded bg-neutral-100 px-1">VITE_API_BASE_URL</code> in an <code className="rounded bg-neutral-100 px-1">.env</code>.
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader><div className="text-sm font-semibold">Security</div></CardHeader>
          <CardContent className="text-sm text-neutral-600 space-y-1">
            <div>- Admin routes are protected by JWT + is_staff flag (decoded from token).</div>
            <div>- For stricter security, add backend endpoint <code className="rounded bg-neutral-100 px-1">/api/accounts/me/</code> and verify server-side.</div>
          </CardContent>
        </Card>
      </div>
    </PageShell>
  );
}
