import React, { useState } from 'react';

export default function AltifierImageCard({
  image,
  postText,
  onApprove,
  onReject,
  isApplying,
  geminiEnabled,
}) {
  const [altText, setAltText] = useState(image.currentAlt || '');
  const [generatedAlt, setGeneratedAlt] = useState(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const [generateError, setGenerateError] = useState(null);

  const handleGenerate = async () => {
    if (!image.cdnUrl) return;
    setIsGenerating(true);
    setGenerateError(null);

    try {
      const { generateAltText } = await import('../../utils/altGenerator');
      const result = await generateAltText(image.cdnUrl, postText);
      setGeneratedAlt(result);
      setAltText(result);
    } catch (err) {
      setGenerateError(err.message || 'Generation failed');
    } finally {
      setIsGenerating(false);
    }
  };

  const handleApprove = () => {
    if (!altText.trim()) return;
    onApprove(image.index, altText.trim());
  };

  return (
    <div className={`altifier-image-card ${image.hasAlt ? 'has-alt' : 'missing-alt'}`}>
      {image.cdnUrl && (
        <img
          src={image.cdnUrl}
          alt={image.currentAlt || `Image ${image.index + 1}`}
          className="altifier-image-card-img"
          loading="lazy"
        />
      )}
      {image.kind === 'video' && !image.cdnUrl && (
        <div className="altifier-video-placeholder">Video</div>
      )}

      <div className="altifier-image-card-body">
        <div className="altifier-image-card-status">
          {image.hasAlt
            ? `Current alt text: "${image.currentAlt.substring(0, 80)}${image.currentAlt.length > 80 ? '...' : ''}"`
            : 'Missing alt text'}
        </div>

        <div className="altifier-image-card-actions">
          {!image.hasAlt && image.kind !== 'video' && geminiEnabled && (
            <button
              onClick={handleGenerate}
              disabled={isGenerating}
              className="altifier-generate-button"
            >
              {isGenerating ? 'Generating...' : generatedAlt ? 'Regenerate' : 'Generate Alt Text'}
            </button>
          )}
        </div>

        {generateError && (
          <div className="altifier-image-card-error">{generateError}</div>
        )}

        <textarea
          className="altifier-alt-textarea"
          value={altText}
          onChange={(e) => setAltText(e.target.value)}
          placeholder={`Enter alt text for this ${image.kind === 'video' ? 'video' : 'image'}...`}
          rows={3}
          maxLength={1000}
        />
        <div className="altifier-char-count">
          {altText.length}/1000
        </div>

        <div className="altifier-image-card-buttons">
          <button
            onClick={handleApprove}
            disabled={!altText.trim() || isApplying}
            className="altifier-approve-button"
          >
            {isApplying ? 'Applying...' : 'Approve'}
          </button>
          <button
            onClick={() => onReject(image.index)}
            disabled={isApplying}
            className="altifier-reject-button"
          >
            Skip
          </button>
        </div>
      </div>
    </div>
  );
}