import { useGraph } from '../store';
import { fileToDataUrl } from '../image';
import { mediaSrc } from '../api';

export function CharacterBar() {
  const characters = useGraph((s) => s.characters);
  const addCharacter = useGraph((s) => s.addCharacter);
  const updateCharacter = useGraph((s) => s.updateCharacter);
  const removeCharacter = useGraph((s) => s.removeCharacter);

  const onUpload = async (id: string, files: FileList | null) => {
    if (!files || !files[0]) return;
    try {
      const url = await fileToDataUrl(files[0]);
      updateCharacter(id, { image: url });
    } catch (e) {
      alert(`Could not load image: ${(e as Error).message}`);
    }
  };

  if (characters.length === 0) {
    return (
      <div className="flex items-center gap-2 border-t border-zinc-800 px-3 py-1.5">
        <button
          onClick={() => addCharacter()}
          className="rounded bg-amber-700 px-3 py-1 text-xs hover:bg-amber-600"
        >
          + Character
        </button>
        <span className="text-[11px] text-zinc-500">No characters yet — add one to @mention in prompts.</span>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2 overflow-x-auto border-t border-zinc-800 px-3 py-1.5">
      {characters.map((c) => (
        <div
          key={c.id}
          className="relative flex w-52 shrink-0 items-center gap-2 rounded-lg border border-amber-700/50 bg-zinc-900 p-2"
        >
          {/* Delete button */}
          <button
            onClick={() => removeCharacter(c.id)}
            className="absolute right-1 top-1 text-[10px] text-zinc-500 hover:text-red-400"
          >
            ✕
          </button>

          {/* Photo tile */}
          <label className="relative h-12 w-12 shrink-0 cursor-pointer overflow-hidden rounded">
            {c.image ? (
              <img src={mediaSrc(c.image)} alt="" className="h-12 w-12 object-cover" />
            ) : (
              <div className="flex h-12 w-12 items-center justify-center rounded border border-dashed border-zinc-600 bg-zinc-800 text-[10px] text-zinc-400 hover:border-zinc-400">
                photo
              </div>
            )}
            <input
              type="file"
              accept="image/*"
              hidden
              onChange={(e) => onUpload(c.id, e.target.files)}
            />
          </label>

          {/* Name + description */}
          <div className="min-w-0 flex-1 space-y-1 pr-3">
            <input
              value={c.name}
              onChange={(e) => updateCharacter(c.id, { name: e.target.value.replace(/\s+/g, '') })}
              placeholder="name"
              className="w-full rounded bg-zinc-800 px-1 py-0.5 text-[11px] font-semibold text-zinc-100"
            />
            <input
              value={c.description}
              onChange={(e) => updateCharacter(c.id, { description: e.target.value })}
              placeholder="description"
              className="w-full rounded bg-zinc-800 px-1 py-0.5 text-[10px] text-zinc-400 placeholder:text-zinc-600"
            />
            {c.name && (
              <div className="text-[10px] text-amber-400">@{c.name}</div>
            )}
          </div>
        </div>
      ))}

      <button
        onClick={() => addCharacter()}
        className="shrink-0 rounded bg-amber-700 px-3 py-1 text-xs hover:bg-amber-600"
      >
        + Character
      </button>
    </div>
  );
}