/**
 * Typography Tab Component
 * Configure heading and label typography controls.
 */
import {
  ColorPicker,
  ColorPickerActionButton,
} from "../../components/ColorPicker";
import { HighlightableField } from "../../components/HighlightableField";
import { RangeSlider } from "../../components/RangeSlider";
import { coerceInt } from "../../constants";
import type { BaseTabProps } from "../types";

export interface TypographyTabProps extends BaseTabProps {}

export function TypographyTab({ settings, setSettings }: TypographyTabProps) {
  return (
    <div className="b3-wvs-space-y-8">
      <h2 className="b3-wvs-text-xl b3-wvs-font-semibold">Typography</h2>

      <HighlightableField id="typography-heading">
        <div className="b3-wvs-space-y-4">
          <h3 className="b3-wvs-text-lg b3-wvs-font-semibold">Heading</h3>
          <p className="b3-wvs-text-sm b3-wvs-text-gray-600">
            These controls style the WooCommerce variation attribute headings
            shown beside each swatch row on product pages.
          </p>
          <div className="b3-wvs-grid b3-wvs-grid-cols-1 md:b3-wvs-grid-cols-2 b3-wvs-gap-6">
            <HighlightableField id="typography-heading-color">
              <ColorPicker
                label="Color"
                value={settings.heading_font_color || "#000000"}
                onChange={(value) =>
                  setSettings({ ...settings, heading_font_color: value })
                }
              />
            </HighlightableField>
            <HighlightableField id="typography-heading-size">
              <RangeSlider
                label="Font Size"
                value={coerceInt(settings.heading_font_size, 16)}
                min={10}
                max={32}
                unit="px"
                onChange={(val) =>
                  setSettings({ ...settings, heading_font_size: val })
                }
              />
            </HighlightableField>
          </div>
        </div>
      </HighlightableField>

      <HighlightableField id="typography-label">
        <div className="b3-wvs-space-y-4 b3-wvs-border-t b3-wvs-border-gray-200 b3-wvs-pt-6">
          <h3 className="b3-wvs-text-lg b3-wvs-font-semibold">Labels</h3>
          <p className="b3-wvs-text-sm b3-wvs-text-gray-600">
            These controls style text shown inside variation chips and swatches.
            Leave the text color empty to use automatic contrast.
          </p>
          <div className="b3-wvs-grid b3-wvs-grid-cols-1 md:b3-wvs-grid-cols-2 b3-wvs-gap-6">
            <HighlightableField id="typography-label-color">
              <ColorPicker
                label="Text Color Override"
                description="Leave empty to use automatic contrast based on each swatch background."
                value={
                  typeof settings.label_text_color === "string"
                    ? settings.label_text_color
                    : ""
                }
                onChange={(value) =>
                  setSettings({ ...settings, label_text_color: value })
                }
                placeholder="Leave empty for auto"
                actionButton={
                  <ColorPickerActionButton
                    label="Auto"
                    disabled={!settings.label_text_color}
                    onClick={() =>
                      setSettings({ ...settings, label_text_color: "" })
                    }
                  />
                }
              />
            </HighlightableField>
            <HighlightableField id="typography-label-size">
              <RangeSlider
                label="Font Size"
                value={coerceInt(settings.label_font_size, 14)}
                min={10}
                max={24}
                unit="px"
                onChange={(val) =>
                  setSettings({ ...settings, label_font_size: val })
                }
              />
            </HighlightableField>
          </div>
        </div>
      </HighlightableField>
    </div>
  );
}