import { useId } from "react";
import type {
  ButtonHTMLAttributes,
  AnchorHTMLAttributes,
  InputHTMLAttributes,
  ReactNode,
} from "react";

export function Button({
  variant = "primary",
  className = "",
  type = "button",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "text";
}) {
  return (
    <button
      type={type}
      className={`ds-button ds-button--${variant} ${className}`}
      {...props}
    />
  );
}

export function ButtonLink({
  variant = "text",
  className = "",
  ...props
}: AnchorHTMLAttributes<HTMLAnchorElement> & {
  variant?: "primary" | "secondary" | "text";
}) {
  return <a className={`ds-button ds-button--${variant} ${className}`} {...props} />;
}

export function SectionHeading({
  number,
  title,
  children,
  id,
}: {
  number: string;
  title: ReactNode;
  children?: ReactNode;
  id?: string;
}) {
  return (
    <header className="ds-section-heading">
      <span className="ds-eyebrow">{number}</span>
      <h2 id={id} tabIndex={-1}>{title}</h2>
      {children && <p>{children}</p>}
    </header>
  );
}

export function Checkbox({
  label,
  description,
  className = "",
  ...props
}: Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & { label: string; description?: string }) {
  const descriptionId = useId();
  return (
    <label className={`ds-checkbox ${className}`}>
      <input
        type="checkbox"
        aria-label={description ? label : undefined}
        {...props}
        aria-describedby={[props["aria-describedby"], description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined}
      />
      <span className="ds-checkbox-copy">
        <span className="ds-checkbox-label">{label}</span>
        {description && <span id={descriptionId} className="ds-checkbox-description">{description}</span>}
      </span>
    </label>
  );
}

export function Counter({
  label,
  value,
  target,
  onChange,
  disabled = false,
}: {
  label: string;
  value: number;
  target: number;
  onChange: (value: number) => void;
  disabled?: boolean;
}) {
  return (
    <div className="ds-counter" role="group" aria-label={label}>
      <Button
        variant="text"
        aria-label={`Decrease ${label}`}
        disabled={disabled || value <= 0}
        onClick={() => onChange(Math.max(0, value - 1))}
      >
        −
      </Button>
      <output aria-live="polite">
        <span>{value}</span>
        <span className="ds-muted"> / {target}</span>
      </output>
      <Button
        variant="text"
        aria-label={`Increase ${label}`}
        disabled={disabled || value >= target}
        onClick={() => onChange(Math.min(target, value + 1))}
      >
        +
      </Button>
    </div>
  );
}

export function HabitRow({
  name,
  description,
  complete,
  children,
  tasks,
}: {
  name: string;
  description: string;
  complete: boolean;
  children: ReactNode;
  tasks?: ReactNode;
}) {
  return (
    <div className="ds-habit-row">
      <div className="ds-habit-main">
        <div>
          <h4>{name}</h4>
          <p>{description}</p>
        </div>
        <div className="ds-habit-control">
          {children}
          <span className="ds-status">
            {complete ? "Complete" : "In progress"}
          </span>
        </div>
      </div>
      {tasks && <div className="ds-task-list">{tasks}</div>}
    </div>
  );
}
