"use client";

import { useState } from "react";
import type { LocationDraft, LocationResult } from "../actions";

// ADD AND EDIT ARE ONE FORM, because they are one set of rules: the id shape,
// the absolute root, the label that falls back to the id, and the opt-in. The
// only difference is that an id is CHOSEN once and never changed — it is what
// `defaultLocationId` and every action refer to — so in edit mode the field is
// shown and disabled rather than hidden, which keeps the row readable.
//
// TYPES ONLY, FROM THE ACTION FILE. This is a "use client" file: it may not
// reach `lib/storageVolumes.ts` or the storage controller (both import execa,
// and `next build` fails on `node:child_process` in a client bundle). The
// server actions it calls are the wire, and `LocationDraft` is a plain object.

type Props = {
  mode: "add" | "edit";
  initial?: {
    id: string;
    label: string;
    root: string;
    autoRepoint: boolean;
    isDefault: boolean;
  };
  submit: (draft: LocationDraft) => Promise<LocationResult>;
  onDone?: () => void;
  onCancel?: () => void;
};

export function LocationForm({ mode, initial, submit, onDone, onCancel }: Props) {
  const [id, setId] = useState(initial?.id ?? "");
  const [label, setLabel] = useState(initial?.label ?? "");
  const [root, setRoot] = useState(initial?.root ?? "");
  const [autoRepoint, setAutoRepoint] = useState(initial?.autoRepoint ?? false);
  const [makeDefault, setMakeDefault] = useState(initial?.isDefault ?? false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function run() {
    setBusy(true);
    setError(null);
    const result = await submit({ id, label, root, autoRepoint, makeDefault });
    setBusy(false);
    if (!result.ok) {
      setError(result.error);
      return;
    }
    if (mode === "add") {
      setId("");
      setLabel("");
      setRoot("");
      setAutoRepoint(false);
      setMakeDefault(false);
    }
    onDone?.();
  }

  return (
    <div className="flex flex-col gap-3 rounded border border-border bg-muted/30 px-3 py-3">
      <div className="grid gap-3 sm:grid-cols-3">
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Id</span>
          <input
            type="text"
            aria-label="location id"
            value={id}
            disabled={mode === "edit"}
            onChange={(e) => setId(e.target.value)}
            placeholder="platter"
            className="rounded border border-border bg-card px-2 py-1 text-sm font-mono disabled:opacity-60"
          />
          <span className="text-xs text-muted-foreground">
            Lower-case, stable. It never changes.
          </span>
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Label</span>
          <input
            type="text"
            aria-label="location label"
            value={label}
            onChange={(e) => setLabel(e.target.value)}
            placeholder="Platter"
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          />
          <span className="text-xs text-muted-foreground">
            Blank uses the id.
          </span>
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Root</span>
          <input
            type="text"
            aria-label="location root"
            value={root}
            onChange={(e) => setRoot(e.target.value)}
            placeholder="/mnt/platter/archilyzer-media"
            className="rounded border border-border bg-card px-2 py-1 text-sm font-mono"
          />
          <span className="text-xs text-muted-foreground">
            An absolute directory. One root holds many channels, each at
            <code>&lt;slug&gt;/data</code>.
          </span>
        </label>
      </div>
      <div className="flex flex-wrap items-center gap-4 text-sm">
        <label className="flex items-center gap-2">
          <input
            type="checkbox"
            aria-label="auto re-point"
            checked={autoRepoint}
            onChange={(e) => setAutoRepoint(e.target.checked)}
          />
          <span>
            Auto re-point
            <span className="text-muted-foreground">
              {" "}
              — when the volume turns up at a different mountpoint, move the
              links without asking (only if the preflight passes).
            </span>
          </span>
        </label>
        <label className="flex items-center gap-2">
          <input
            type="checkbox"
            aria-label="default location"
            checked={makeDefault}
            onChange={(e) => setMakeDefault(e.target.checked)}
          />
          <span>Default destination for a move</span>
        </label>
      </div>
      {error && (
        <p role="alert" className="text-sm text-destructive">
          {error}
        </p>
      )}
      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={run}
          disabled={busy}
          aria-label={mode === "add" ? "add storage location" : `save storage location: ${id}`}
          className="px-3 py-1.5 rounded-md border border-border text-sm font-medium disabled:opacity-50"
        >
          {busy ? "Saving…" : mode === "add" ? "Add location" : "Save"}
        </button>
        {onCancel && (
          <button
            type="button"
            onClick={onCancel}
            className="px-3 py-1.5 rounded-md text-sm text-muted-foreground"
          >
            Cancel
          </button>
        )}
      </div>
    </div>
  );
}