import { useId, type ReactNode } from "react";
import { RotateCw } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Button } from "../ui/button";
import { ADDRESS_SUFFIX, addressStatus, type AddressCheck } from "../../utils/practiceAddress";
import "./PracticeAddress.css";

type PracticeAddressFieldProps = {
  value: string;
  onChange: (value: string) => void;
  check: AddressCheck | undefined;
  suggested: boolean;
  onRetry: () => void;
  disabled?: boolean;
  // What the deck draws between the About control and the address (the practice name).
  children?: ReactNode;
};

// admin-v2 "Choose your practice web address". The About panel is a labelled control rather than a
// hover; the permanent-address note stays outside it so nobody has to open it to be warned.
const PracticeAddressField = ({ value, onChange, check, suggested, onRetry, disabled, children }: PracticeAddressFieldProps) => {
  const id = useId().replace(/:/g, "");

  const status = addressStatus(value, check, suggested);
  const problem = status?.tone === "problem";

  return (
    <div className="flex flex-col gap-3">
      <p className="ak-page-title__sub">Your included Akashic portal. Use it if you want to.</p>
      <div>
        <Popover>
          <PopoverTrigger asChild>
            {/* A native button: the trigger needs a ref to anchor the panel, which Button does not forward. */}
            <button type="button" className="practice-address__about-trigger">
              <span className="practice-address__about text-primary">
                <span className="practice-address__about-mark" aria-hidden>i</span>
                About this address
              </span>
            </button>
          </PopoverTrigger>
          <PopoverContent align="start" className="w-80 space-y-2 text-sm">
            <div className="font-medium">Your choice of client</div>
            <div>Every practice gets a standalone Akashic portal at this address.</div>
            <div>
              Prefer your own website? You can use only the WordPress plugin on your own domain. You do not have to use
              this portal, and it does not replace your website.
            </div>
            <div>You can also use both clients for the same practice.</div>
            <div className="text-muted-foreground">
              Choose your practice's portal address now, even if you do not plan to use it. It cannot be changed once saved.
            </div>
          </PopoverContent>
        </Popover>
      </div>
      {children}
      <div>
        <label htmlFor={`practice-address-${id}`} className="ak-label mb-1 block">
          Practice web address
        </label>
        <div className="ak-field ak-field-shell flex items-center gap-2">
          <input
            id={`practice-address-${id}`}
            className="min-w-0 flex-1"
            value={value}
            onChange={(event) => onChange(event.target.value)}
            aria-invalid={problem}
            aria-describedby={`practice-address-${id}-status`}
            autoComplete="off"
            spellCheck={false}
            disabled={disabled}
          />
          <span className="practice-address__suffix">{ADDRESS_SUFFIX}</span>
        </div>
        <div
          id={`practice-address-${id}-status`}
          role="status"
          className={`${problem ? "ak-field-error" : "ak-field-help"} flex flex-wrap items-center gap-x-3`}
        >
          {status?.text}
          {status?.retry && (
            <Button type="button" variant="link" size="sm" className="h-auto p-0" onClick={onRetry} disabled={disabled}>
              <RotateCw className="text-primary" />
              <span className="text-primary">Try again</span>
            </Button>
          )}
        </div>
      </div>
      <p className="ak-page-title__sub">Use letters a–z only. Choose the name you want patients and staff to use.</p>
      <div className="ak-notice">
        {/* One wrapper, so the bold lead stays in the same text run: .ak-notice is a flex row. */}
        <span className="ak-notice__description">
          <b>This address is permanent.</b> You can change the suggestion now. Once saved, the address cannot be changed.
        </span>
      </div>
    </div>
  );
};

export default PracticeAddressField;