import { Database, FolderRoot } from 'lucide-react';
import { RootLocationBlock } from './RootLocationBlock';

/**
 * Administration — this plugin's own machinery, not the client's site.
 *
 * ── It is a list of blocks ──
 *
 * Not one form. Administration holds several unrelated settings, and giving each its own titled block
 * means adding the next one moves nothing — as against a single form that has to be broken up the
 * first time anything joins it. The second block cost one entry, which is the point.
 *
 * The order is the order things are needed in: where the site is on disk, then how to read its data.
 *
 * ── What used to be here ──
 *
 * An address and a token: where fofos is, over HTTP. That is gone. It has NOT been replaced yet, so
 * nothing can currently configure this plugin — which is why `useReady` stays hardcoded false and
 * every other section stays locked. The two are the same change and neither is finished.
 *
 * The server half is untouched: `/_config` still stores a URL and a token, and the proxy in
 * `api/router.ts` still reads them. Only the way in from the screen is gone.
 */

/** One titled block. The shape every Administration setting gets, so the second one costs nothing. */
const Block = ({
  icon: Icon,
  title,
  hint,
  children,
}: {
  icon: typeof Database;
  title: string;
  hint: string;
  children?: React.ReactNode;
}) => (
  <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
    <div className="space-y-1">
      <h3 className="flex items-center gap-2 text-sm font-medium">
        <Icon className="size-4" />
        {title}
      </h3>
      <p className="text-xs text-muted-foreground">{hint}</p>
    </div>
    {children}
  </section>
);

export const AdministrationPanel = () => (
  <div className="flex size-full flex-col gap-4 overflow-auto p-5">
    <Block icon={FolderRoot} title="Root location" hint="Where the fofos site is on this machine.">
      <RootLocationBlock />
    </Block>

    <Block icon={Database} title="Database" hint="Where the fofos site's own data lives.">
      {/* Deliberately empty. The block exists so the shape is settled and so the screen says what is
          coming rather than looking like a section nobody finished — but nothing is decided about what
          goes in it, and guessing at fields would be a decision made in the wrong place. */}
      <p className="text-xs text-muted-foreground/70">Nothing to set yet.</p>
    </Block>
  </div>
);