/* eslint-disable */
// Primitives — shared button / card / chip / input styles that mirror the
// .btn-primary / .card / .input-field utilities defined in the source app.

const BtnPrimary = ({ children, ...rest }) => (
  <button
    {...rest}
    className={
      "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors duration-200 cursor-pointer " +
      (rest.className || "")
    }
  >
    {children}
  </button>
);

const BtnSecondary = ({ children, ...rest }) => (
  <button
    {...rest}
    className={
      "px-6 py-3 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-lg font-semibold transition-colors duration-200 cursor-pointer " +
      (rest.className || "")
    }
  >
    {children}
  </button>
);

const BtnSmall = ({ children, ...rest }) => (
  <button
    {...rest}
    className={
      "px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded font-medium transition-colors duration-200 cursor-pointer " +
      (rest.className || "")
    }
  >
    {children}
  </button>
);

const Card = ({ children, className = "", onClick }) => (
  <div
    onClick={onClick}
    className={
      "bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg p-6 transition-shadow duration-200 " +
      className
    }
  >
    {children}
  </div>
);

const Input = ({ ...rest }) => (
  <input
    {...rest}
    className={
      "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200 " +
      (rest.className || "")
    }
  />
);

const Select = ({ children, ...rest }) => (
  <select
    {...rest}
    className={
      "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200 " +
      (rest.className || "")
    }
  >
    {children}
  </select>
);

const Textarea = ({ ...rest }) => (
  <textarea
    {...rest}
    className={
      "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200 resize-none " +
      (rest.className || "")
    }
  />
);

const Label = ({ children, required }) => (
  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
    {children}
    {required ? <span className="text-red-500"> *</span> : null}
  </label>
);

const Pill = ({ tone = "info", children }) => {
  const tones = {
    info: "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200",
    success: "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200",
    warn: "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200",
    danger: "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200",
    purple: "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200",
    orange: "bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200",
    indigo: "bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200",
    gray: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200",
  };
  return (
    <span className={"inline-flex items-center text-xs px-3 py-1 rounded-full font-medium " + tones[tone]}>
      {children}
    </span>
  );
};

const ChipSq = ({ tone = "info", children }) => {
  const tones = {
    info: "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200",
    success: "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200",
    warn: "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200",
    danger: "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200",
    purple: "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200",
  };
  return (
    <span className={"inline-flex items-center text-xs px-2 py-1 rounded font-medium " + tones[tone]}>
      {children}
    </span>
  );
};

Object.assign(window, {
  BtnPrimary, BtnSecondary, BtnSmall,
  Card, Input, Select, Textarea, Label,
  Pill, ChipSq,
});