import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import {
  INPUT_CLASS,
  LABEL_CLASS,
  PANEL_CLASS,
  PRIMARY_BUTTON_CLASS,
  RuntimeSecretCard,
  type GeminiTestResult,
  type ImageProvider,
  type Provider,
  type RuntimeSecrets,
} from "./shared.js";

type ImageGenerationPanelProps = {
  provider: Provider;
  imageProvider: ImageProvider;
  dalleDeployment: string;
  dalleEndpoint: string;
  geminiModel: string;
  imageSaved: boolean;
  geminiTestResult: GeminiTestResult | null;
  runtimeSecrets: RuntimeSecrets;
  isSaving: boolean;
  isTestingGemini: boolean;
  onImageProviderChange: (provider: ImageProvider) => void;
  onDalleDeploymentChange: (value: string) => void;
  onDalleEndpointChange: (value: string) => void;
  onGeminiModelChange: (value: string) => void;
  onSave: () => void;
  onTestGemini: () => void;
};

export function ImageGenerationPanel({
  provider,
  imageProvider,
  dalleDeployment,
  dalleEndpoint,
  geminiModel,
  imageSaved,
  geminiTestResult,
  runtimeSecrets,
  isSaving,
  isTestingGemini,
  onImageProviderChange,
  onDalleDeploymentChange,
  onDalleEndpointChange,
  onGeminiModelChange,
  onSave,
  onTestGemini,
}: ImageGenerationPanelProps) {
  return (
    <div className={PANEL_CLASS}>
      <div>
        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
          Image Generation{" "}
          <InfoTooltip content="Configure the image generation provider used for AI-generated project cover art." />
        </h2>
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Used to generate AI cover art for projects. Configure at least one provider below.
        </p>
      </div>

      <div>
        <label className={LABEL_CLASS}>Provider</label>
        <div className="flex gap-4">
          <label className="flex cursor-pointer items-center gap-2">
            <input
              type="radio"
              name="imageProvider"
              value="dalle"
              checked={imageProvider === "dalle"}
              onChange={() => onImageProviderChange("dalle")}
              className="accent-brand-600"
            />
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
              DALL-E (Azure OpenAI / OpenAI)
            </span>
          </label>
          <label className="flex cursor-pointer items-center gap-2">
            <input
              type="radio"
              name="imageProvider"
              value="gemini"
              checked={imageProvider === "gemini"}
              onChange={() => onImageProviderChange("gemini")}
              className="accent-brand-600"
            />
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
              Google Gemini
            </span>
          </label>
        </div>
      </div>

      {imageProvider === "dalle" ? (
        <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
            DALL-E Configuration
          </h3>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <label className={LABEL_CLASS}>
                <span className="flex items-center">
                  Deployment Name{" "}
                  <InfoTooltip content="For OpenAI this is the model name, for Azure it is the deployment name." />
                </span>
              </label>
              <input
                type="text"
                className={INPUT_CLASS}
                value={dalleDeployment}
                onChange={(event) => onDalleDeploymentChange(event.target.value)}
                placeholder="dall-e-3"
              />
            </div>

            {provider === "azure" ? (
              <div>
                <label className={LABEL_CLASS}>
                  <span className="flex items-center">
                    Endpoint{" "}
                    <InfoTooltip content="Leave empty to use the same endpoint as the chat model." />
                  </span>
                </label>
                <input
                  type="text"
                  className={INPUT_CLASS}
                  value={dalleEndpoint}
                  onChange={(event) => onDalleEndpointChange(event.target.value)}
                  placeholder="Leave empty to use same endpoint as chat"
                />
              </div>
            ) : null}
          </div>
          <RuntimeSecretCard
            title="Dedicated DALL-E Key"
            description="Optional override for image generation. If unset, runtime falls back to the primary AI key when possible."
            secret={runtimeSecrets.azureDalleApiKey}
            optionalNote="Use AZURE_DALLE_API_KEY only when image generation should be isolated from the primary AI credential."
          />
        </div>
      ) : null}

      {imageProvider === "gemini" ? (
        <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
            Google Gemini Configuration
          </h3>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <label className={LABEL_CLASS}>
                <span className="flex items-center">
                  Model{" "}
                  <InfoTooltip content="Gemini model for image generation. The default model supports image output." />
                </span>
              </label>
              <select
                className={INPUT_CLASS}
                value={geminiModel || "gemini-2.5-flash-image"}
                onChange={(event) => onGeminiModelChange(event.target.value)}
              >
                <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image — fast, high-volume</option>
                <option value="gemini-3-pro-image-preview">Gemini 3 Pro Image Preview — high-fidelity</option>
                <option value="gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image Preview — latest</option>
              </select>
            </div>
          </div>
          <RuntimeSecretCard
            title="Gemini API Key"
            description="Gemini credentials are resolved from deployment secrets only."
            secret={runtimeSecrets.geminiApiKey}
            optionalNote="Provision GEMINI_API_KEY in the target environment before using Gemini image generation."
          />
        </div>
      ) : null}

      <div className="flex flex-wrap items-center gap-3 pt-1">
        <button
          type="button"
          className={PRIMARY_BUTTON_CLASS}
          disabled={isSaving}
          onClick={onSave}
        >
          {isSaving ? "Saving..." : "Save Image Settings"}
        </button>
        {imageProvider === "gemini" ? (
          <button
            type="button"
            className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
            disabled={isTestingGemini}
            onClick={onTestGemini}
          >
            {isTestingGemini ? "Testing..." : "Test Gemini"}
          </button>
        ) : null}
        {imageSaved ? (
          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved</span>
        ) : null}
      </div>

      {geminiTestResult ? (
        <div
          className={`mt-3 rounded-lg border px-3 py-2 text-sm ${
            geminiTestResult.ok
              ? "border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/20 dark:text-green-300"
              : "border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300"
          }`}
        >
          {geminiTestResult.ok
            ? `Gemini image generation works. Model: ${geminiTestResult.model}`
            : `Test failed: ${geminiTestResult.error}`}
        </div>
      ) : null}
    </div>
  );
}
