import {
  addCollectionTag,
  handleCollectionTagKeyPress,
  removeCollectionTag,
} from '../lib/collection-tag-input.js';
import { Modal, Input, Button } from './ui';

export default function CollectionsEditModal({
  editingCollection,
  setEditingCollection,
  editTagInput,
  setEditTagInput,
  onClose,
  onUpdate,
}) {
  if (!editingCollection) return null;

  return (
    <Modal open onClose={onClose} title="Edit list" size="md">
      <div className="space-y-4">
        <Input
          label="List Name"
          value={editingCollection.name}
          onChange={(e) =>
            setEditingCollection({ ...editingCollection, name: e.target.value })
          }
        />
        <div>
          <label
            className="block text-sm font-medium mb-2"
            style={{ color: 'var(--text-primary)' }}
            htmlFor="collections-edit-description"
          >
            Description
          </label>
          <textarea
            id="collections-edit-description"
            className="input-field w-full"
            rows="3"
            value={editingCollection.description}
            onChange={(e) =>
              setEditingCollection({
                ...editingCollection,
                description: e.target.value,
              })
            }
          />
        </div>
        <Input
          label="Hero Image"
          type="url"
          value={editingCollection.image || ''}
          onChange={(e) =>
            setEditingCollection({ ...editingCollection, image: e.target.value })
          }
          placeholder="Enter image URL"
        />

        <div>
          <label
            className="block text-sm font-medium mb-2"
            style={{ color: 'var(--text-primary)' }}
            htmlFor="collections-edit-tags"
          >
            Tags
          </label>
          <div className="space-y-2">
            <div className="flex gap-2">
              <Input
                id="collections-edit-tags"
                value={editTagInput}
                onChange={(e) => setEditTagInput(e.target.value)}
                onKeyPress={(e) =>
                  handleCollectionTagKeyPress(
                    e,
                    editTagInput,
                    setEditTagInput,
                    editingCollection,
                    setEditingCollection
                  )
                }
                placeholder="Add tags (press Enter)"
                className="flex-1"
              />
              <Button
                type="button"
                variant="primary"
                size="md"
                disabled={!editTagInput.trim()}
                onClick={() =>
                  addCollectionTag(
                    editTagInput,
                    setEditTagInput,
                    editingCollection,
                    setEditingCollection
                  )
                }
              >
                Add
              </Button>
            </div>
            {editingCollection.tags && editingCollection.tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {editingCollection.tags.map((tag, index) => (
                  <span
                    key={index}
                    className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium"
                    style={{
                      backgroundColor: 'var(--bg-tertiary)',
                      color: 'var(--text-primary)',
                      border: '1px solid var(--border)',
                    }}
                  >
                    {tag}
                    <button
                      type="button"
                      onClick={() =>
                        removeCollectionTag(tag, editingCollection, setEditingCollection)
                      }
                      aria-label={`Remove tag ${tag}`}
                      className="ml-1 hover:text-red-500 transition-colors"
                    >
                      ×
                    </button>
                  </span>
                ))}
              </div>
            )}
          </div>
        </div>

        <div
          className="flex items-center justify-between p-4 rounded-lg border"
          style={{ borderColor: 'var(--border)' }}
        >
          <div>
            <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
              Public List
            </label>
            <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
              Make this list discoverable by other users
            </p>
          </div>
          <button
            type="button"
            onClick={() =>
              setEditingCollection({
                ...editingCollection,
                isPublic: !editingCollection.isPublic,
              })
            }
            aria-pressed={editingCollection.isPublic}
            aria-label="Toggle public list"
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              editingCollection.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                editingCollection.isPublic ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>
      </div>
      <div className="flex space-x-3 mt-6">
        <Button variant="secondary" onClick={onClose} className="flex-1">
          Cancel
        </Button>
        <Button
          variant="primary"
          onClick={onUpdate}
          disabled={!editingCollection.name.trim()}
          className="flex-1"
        >
          Update List
        </Button>
      </div>
    </Modal>
  );
}