import { BarChart3 } from 'lucide-react'

export default function SEOPanel({ formData, setFormData }) {
  const updateSEO = (key, value) => {
    setFormData({ ...formData, [key]: value })
  }

  // Simple SEO score calculation
  const calculateSEOScore = () => {
    let score = 0
    if (formData.seo_title && formData.seo_title.length > 30 && formData.seo_title.length < 60) score += 20
    if (formData.seo_description && formData.seo_description.length > 120 && formData.seo_description.length < 160) score += 20
    if (formData.seo_keywords && formData.seo_keywords.split(',').length >= 3) score += 20
    if (formData.title) score += 20
    if (formData.excerpt) score += 20
    return Math.min(score, 100)
  }

  const seoScore = calculateSEOScore()

  return (
    <div className="bg-white rounded-lg p-6 shadow-md">
      <div className="flex items-center gap-2 mb-6">
        <BarChart3 size={20} className="text-blue-600" />
        <h3 className="text-lg font-bold text-gray-900">SEO Optimization</h3>
      </div>

      {/* SEO Score */}
      <div className="mb-6 p-4 bg-blue-50 rounded-lg">
        <div className="flex items-center justify-between mb-2">
          <span className="font-semibold text-gray-900">SEO Score</span>
          <span className={`text-2xl font-bold ${seoScore >= 80 ? 'text-green-600' : seoScore >= 60 ? 'text-yellow-600' : 'text-red-600'}`}>
            {seoScore}%
          </span>
        </div>
        <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
          <div
            className={`h-full transition ${seoScore >= 80 ? 'bg-green-600' : seoScore >= 60 ? 'bg-yellow-600' : 'bg-red-600'}`}
            style={{ width: `${seoScore}%` }}
          ></div>
        </div>
      </div>

      {/* Meta Title */}
      <div className="mb-4">
        <label className="block text-sm font-semibold text-gray-900 mb-1">
          Meta Title {formData.seo_title?.length > 0 && <span className="text-gray-600">({formData.seo_title.length}/60)</span>}
        </label>
        <input
          type="text"
          value={formData.seo_title}
          onChange={(e) => updateSEO('seo_title', e.target.value.substring(0, 60))}
          maxLength="60"
          className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ${
            formData.seo_title.length > 30 && formData.seo_title.length < 60
              ? 'border-green-500'
              : 'border-gray-300'
          }`}
          placeholder="Optimal: 30-60 characters"
        />
      </div>

      {/* Meta Description */}
      <div className="mb-4">
        <label className="block text-sm font-semibold text-gray-900 mb-1">
          Meta Description {formData.seo_description?.length > 0 && <span className="text-gray-600">({formData.seo_description.length}/160)</span>}
        </label>
        <textarea
          value={formData.seo_description}
          onChange={(e) => updateSEO('seo_description', e.target.value.substring(0, 160))}
          maxLength="160"
          rows="2"
          className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ${
            formData.seo_description.length > 120 && formData.seo_description.length < 160
              ? 'border-green-500'
              : 'border-gray-300'
          }`}
          placeholder="Optimal: 120-160 characters"
        />
      </div>

      {/* Keywords */}
      <div className="mb-4">
        <label className="block text-sm font-semibold text-gray-900 mb-1">
          Keywords
        </label>
        <input
          type="text"
          value={formData.seo_keywords}
          onChange={(e) => updateSEO('seo_keywords', e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="Separate with commas: fraud, scam, protection"
        />
      </div>

      {/* OG Image */}
      <div>
        <label className="block text-sm font-semibold text-gray-900 mb-1">
          OG Image URL (for social sharing)
        </label>
        <input
          type="text"
          value={formData.og_image}
          onChange={(e) => updateSEO('og_image', e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          placeholder="/uploads/image.webp"
        />
      </div>
    </div>
  )
}
