import type { ReactNode } from "react";

export function EditorialPageHeader({ title, description, action, headingLevel = 1 }: { title: string; description?: ReactNode; action?: ReactNode; headingLevel?: 1 | 2 | 3 | 4 }) {
  const Heading = headingLevel === 1 ? "h1" : headingLevel === 2 ? "h2" : headingLevel === 3 ? "h3" : "h4";
  return <header className="we-page-header"><div><Heading className="we-page-header__title">{title}</Heading>{description ? <p className="we-page-header__description">{description}</p> : null}</div>{action ? <div className="we-page-header__action">{action}</div> : null}</header>;
}

export function EditorialEmptyState({ title, description, icon, action, framed = true, headingLevel = 2 }: { title: string; description: ReactNode; icon?: ReactNode; action?: ReactNode; framed?: boolean; headingLevel?: 2 | 3 | 4 }) {
  const Heading = headingLevel === 2 ? "h2" : headingLevel === 3 ? "h3" : "h4";
  return <section className={`we-empty-state${framed ? " we-empty-state--framed" : ""}`}>{icon ? <span className="we-empty-state__icon">{icon}</span> : null}<Heading className="we-empty-state__title">{title}</Heading><p className="we-empty-state__description">{description}</p>{action ? <div className="we-empty-state__action">{action}</div> : null}</section>;
}

export function EditorialProgress({ label, value, valueLabel, tone = "positive" }: { label: string; value: number; valueLabel?: string; tone?: "positive" | "warning" }) {
  const safeValue = Math.min(100, Math.max(0, value));
  const readableValue = valueLabel ?? `${Math.round(safeValue)}%`;
  return <div className={`we-progress we-progress--${tone}`}><div className="we-progress__meta"><span>{label}</span><span>{readableValue}</span></div><div className="we-progress__track" role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={safeValue} aria-valuetext={readableValue}><div className="we-progress__fill" style={{ width: `${safeValue}%` }} /></div></div>;
}

type EditorialSegmentedOption<Value extends string> = { value: Value; label: string; disabled?: boolean };

export function EditorialSegmentedControl<Value extends string>({ ariaLabel, value, options, onValueChange, disabled = false }: { ariaLabel: string; value: Value; options: readonly EditorialSegmentedOption<Value>[]; onValueChange: (value: Value) => void; disabled?: boolean }) {
  return <div className="we-segmented-control" role="group" aria-label={ariaLabel}>{options.map((option) => <button key={option.value} type="button" className="we-segmented-control__option" aria-pressed={option.value === value} disabled={disabled || option.disabled} onClick={() => onValueChange(option.value)}>{option.label}</button>)}</div>;
}