import { html, nothing } from "lit";
import type { AgentIdentityResult, AgentsFilesListResult, AgentsListResult } from "../types.ts";
import {
  buildModelOptions,
  normalizeModelValue,
  parseFallbackList,
  resolveAgentAvatarUrl,
  resolveAgentConfig,
  resolveAgentEmoji,
  resolveModelFallbacks,
  resolveModelLabel,
  resolveModelPrimary,
} from "./agents-utils.ts";
import type { AgentsPanel } from "./agents.ts";

export function renderAgentOverview(params: {
  agent: AgentsListResult["agents"][number];
  basePath: string;
  defaultId: string | null;
  configForm: Record<string, unknown> | null;
  agentFilesList: AgentsFilesListResult | null;
  agentIdentity: AgentIdentityResult | null;
  agentIdentityLoading: boolean;
  agentIdentityError: string | null;
  configLoading: boolean;
  configSaving: boolean;
  configDirty: boolean;
  onConfigReload: () => void;
  onConfigSave: () => void;
  onModelChange: (agentId: string, modelId: string | null) => void;
  onModelFallbacksChange: (agentId: string, fallbacks: string[]) => void;
  onSelectPanel: (panel: AgentsPanel) => void;
  onAvatarUpload: (file: File) => void;
  onAvatarRemove: () => void;
  onAvatarThemeChange: (value: string) => void;
  onAvatarInstructionsChange: (value: string) => void;
  onAvatarGenerate: () => void;
  onAvatarKeep: () => void;
  onAvatarCancelPreview: () => void;
  avatarTheme: string;
  avatarInstructions: string;
  avatarBusy: boolean;
  avatarStatus: string | null;
  avatarError: string | null;
  avatarPreviewUrl: string | null;
  availableModels?: Array<{ id: string; name?: string; provider: string; contextWindow?: number }>;
}) {
  const {
    agent,
    configForm,
    agentFilesList,
    configLoading,
    configSaving,
    configDirty,
    onConfigReload,
    onConfigSave,
    onModelChange,
    onModelFallbacksChange,
    onSelectPanel,
  } = params;
  const config = resolveAgentConfig(configForm, agent.id);
  const workspaceFromFiles =
    agentFilesList && agentFilesList.agentId === agent.id ? agentFilesList.workspace : null;
  const workspace =
    workspaceFromFiles || config.entry?.workspace || config.defaults?.workspace || "default";
  const model = config.entry?.model
    ? resolveModelLabel(config.entry?.model)
    : resolveModelLabel(config.defaults?.model);
  const defaultModel = resolveModelLabel(config.defaults?.model);
  const entryPrimary = resolveModelPrimary(config.entry?.model);
  const defaultPrimary =
    resolveModelPrimary(config.defaults?.model) ||
    (defaultModel !== "-" ? normalizeModelValue(defaultModel) : null);
  const effectivePrimary = entryPrimary ?? defaultPrimary ?? null;
  const modelFallbacks = resolveModelFallbacks(config.entry?.model);
  const fallbackChips = modelFallbacks ?? [];
  const skillFilter = Array.isArray(config.entry?.skills) ? config.entry?.skills : null;
  const skillCount = skillFilter?.length ?? null;
  const isDefault = Boolean(params.defaultId && agent.id === params.defaultId);
  const disabled = !configForm || configLoading || configSaving;
  const avatarUrl = params.avatarPreviewUrl || resolveAgentAvatarUrl(agent, params.agentIdentity);
  const avatarEmoji = resolveAgentEmoji(agent, params.agentIdentity) || "🤖";
  const avatarThemeOptions = [
    ["professional", "Professional"],
    ["scifi", "Sci-Fi"],
    ["cyberpunk", "Cyberpunk"],
    ["fantasy", "Fantasy"],
    ["space-opera", "Space Opera"],
    ["creature-collector", "Creature Collector"],
    ["mascot", "Mascot"],
    ["noir", "Noir"],
  ] as const;

  const removeChip = (index: number) => {
    const next = fallbackChips.filter((_, i) => i !== index);
    onModelFallbacksChange(agent.id, next);
  };

  const handleChipKeydown = (e: KeyboardEvent) => {
    const input = e.target as HTMLInputElement;
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      const parsed = parseFallbackList(input.value);
      if (parsed.length > 0) {
        onModelFallbacksChange(agent.id, [...fallbackChips, ...parsed]);
        input.value = "";
      }
    }
  };

  return html`
    <section class="card">
      <div class="card-title">Overview</div>
      <div class="card-sub">Workspace paths and identity metadata.</div>

      <div class="agents-overview-grid" style="margin-top: 16px;">
        <div class="agent-kv">
          <div class="label">Workspace</div>
          <div>
            <button
              type="button"
              class="workspace-link mono"
              @click=${() => onSelectPanel("files")}
              title="Open Files tab"
            >${workspace}</button>
          </div>
        </div>
        <div class="agent-kv">
          <div class="label">Primary Model</div>
          <div class="mono">${model}</div>
        </div>
        <div class="agent-kv">
          <div class="label">Skills Filter</div>
          <div>${skillFilter ? `${skillCount} selected` : "all skills"}</div>
        </div>
      </div>

      <section class="card" style="margin-top: 18px; padding: 16px; border: 1px solid var(--border, #333);">
        <div class="card-title" style="margin-bottom: 4px;">Profile Image</div>
        <div class="card-sub">Upload a profile image or generate one from a theme.</div>
        ${params.avatarPreviewUrl ? html`<div class="callout warn" style="margin-top:10px;">Preview generated. Choose Keep, Regenerate, or Cancel.</div>` : nothing}
        <div style="display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-top:14px;">
          <div style="width:96px; height:96px; border-radius:18px; overflow:hidden; border:1px solid var(--border, #333); display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.03); font-size:42px; flex:0 0 auto;">
            ${avatarUrl
              ? html`<img src=${avatarUrl} alt="${agent.id} avatar" style="width:100%;height:100%;object-fit:cover;" />`
              : html`${avatarEmoji}`}
          </div>
          <div style="flex:1 1 320px; min-width:280px; display:grid; gap:12px;">
            <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
              <label class="btn btn--sm" style="cursor:pointer;">
                Upload image
                <input
                  type="file"
                  accept="image/png,image/jpeg,image/webp,image/gif"
                  style="display:none"
                  @change=${(e: Event) => {
                    const input = e.target as HTMLInputElement;
                    const file = input.files?.[0];
                    if (file) {
                      params.onAvatarUpload(file);
                    }
                    input.value = "";
                  }}
                />
              </label>
              <button type="button" class="btn btn--sm" ?disabled=${params.avatarBusy || Boolean(params.avatarPreviewUrl)} @click=${params.onAvatarRemove}>Remove</button>
              <span class="mono" style="opacity:0.7; font-size:12px;">PNG, JPG, WEBP, GIF · max 2MB</span>
            </div>

            <div style="display:grid; gap:10px; grid-template-columns: minmax(180px, 220px) 1fr auto; align-items:end;">
              <label class="field" style="margin:0;">
                <span>Theme</span>
                <select .value=${params.avatarTheme} @change=${(e: Event) => params.onAvatarThemeChange((e.target as HTMLSelectElement).value)} ?disabled=${params.avatarBusy}>
                  ${avatarThemeOptions.map(([value, label]) => html`<option value=${value}>${label}</option>`)}
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>Custom direction</span>
                <input
                  type="text"
                  .value=${params.avatarInstructions}
                  placeholder="Optional style notes"
                  @input=${(e: Event) => params.onAvatarInstructionsChange((e.target as HTMLInputElement).value)}
                  ?disabled=${params.avatarBusy}
                />
              </label>
              <button type="button" class="btn btn--sm primary" ?disabled=${params.avatarBusy} @click=${params.onAvatarGenerate}>
                ${params.avatarBusy ? "Working…" : (params.avatarPreviewUrl ? "Regenerate" : "Generate")}
              </button>
            </div>

            ${params.avatarPreviewUrl
              ? html`
                  <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
                    <button type="button" class="btn btn--sm primary" ?disabled=${params.avatarBusy} @click=${params.onAvatarKeep}>Keep</button>
                    <button type="button" class="btn btn--sm" ?disabled=${params.avatarBusy} @click=${params.onAvatarGenerate}>Regenerate</button>
                    <button type="button" class="btn btn--sm" ?disabled=${params.avatarBusy} @click=${params.onAvatarCancelPreview}>Cancel</button>
                  </div>
                `
              : nothing}

            ${params.avatarStatus ? html`<div class="callout" style="margin:0;">${params.avatarStatus}</div>` : nothing}
            ${params.avatarError ? html`<div class="callout danger" style="margin:0;">${params.avatarError}</div>` : nothing}
          </div>
        </div>
      </section>

      ${
        configDirty
          ? html`
              <div class="callout warn" style="margin-top: 16px">You have unsaved config changes.</div>
            `
          : nothing
      }

      <div class="agent-model-select" style="margin-top: 20px;">
        <div class="label">Model Selection</div>
        <div class="agent-model-fields">
          <label class="field">
            <span>Primary model${isDefault ? " (default)" : ""}</span>
            <select
              .value=${isDefault ? (effectivePrimary ?? "") : (entryPrimary ?? "")}
              ?disabled=${disabled}
              @change=${(e: Event) =>
                onModelChange(agent.id, (e.target as HTMLSelectElement).value || null)}
            >
              ${
                isDefault
                  ? nothing
                  : html`
                      <option value="">
                        ${defaultPrimary ? `Inherit default (${defaultPrimary})` : "Inherit default"}
                      </option>
                    `
              }
              ${buildModelOptions(configForm, effectivePrimary ?? undefined, params.availableModels)}
            </select>
          </label>
          <div class="field">
            <span>Fallbacks</span>
            <div class="agent-chip-input" @click=${(e: Event) => {
              const container = e.currentTarget as HTMLElement;
              const input = container.querySelector("input");
              if (input) {
                input.focus();
              }
            }}>
              ${fallbackChips.map(
                (chip, i) => html`
                  <span class="chip">
                    ${chip}
                    <button
                      type="button"
                      class="chip-remove"
                      ?disabled=${disabled}
                      @click=${() => removeChip(i)}
                    >&times;</button>
                  </span>
                `,
              )}
              <input
                ?disabled=${disabled}
                placeholder=${fallbackChips.length === 0 ? "provider/model" : ""}
                @keydown=${handleChipKeydown}
                @blur=${(e: Event) => {
                  const input = e.target as HTMLInputElement;
                  const parsed = parseFallbackList(input.value);
                  if (parsed.length > 0) {
                    onModelFallbacksChange(agent.id, [...fallbackChips, ...parsed]);
                    input.value = "";
                  }
                }}
              />
            </div>
          </div>
        </div>
        <div class="agent-model-actions">
          <button type="button" class="btn btn--sm" ?disabled=${configLoading} @click=${onConfigReload}>
            Reload Config
          </button>
          <button
            type="button"
            class="btn btn--sm primary"
            ?disabled=${configSaving || !configDirty}
            @click=${onConfigSave}
          >
            ${configSaving ? "Saving…" : "Save"}
          </button>
        </div>
      </div>
    </section>
  `;
}
