import { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { CheckCircle, XCircle, AlertCircle, FileText, Image as ImageIcon, Film, Sparkles, Globe } from 'lucide-react'

const STATUS_ICONS = {
  copy: FileText,
  design: ImageIcon,
  video: Film,
  other: Sparkles,
}

export default function PublicReview() {
  const { token } = useParams()
  const [artefact, setArtefact] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [success, setSuccess] = useState('')
  const [reviewerName, setReviewerName] = useState('')
  const [feedback, setFeedback] = useState('')
  const [selectedLanguage, setSelectedLanguage] = useState(0)

  useEffect(() => {
    loadArtefact()
  }, [token])

  const loadArtefact = async () => {
    try {
      const res = await fetch(`/api/public/review/${token}`)
      if (!res.ok) {
        const err = await res.json()
        setError(err.error || 'Failed to load artefact')
        setLoading(false)
        return
      }
      const data = await res.json()
      setArtefact(data)
    } catch (err) {
      setError('Failed to load artefact')
    } finally {
      setLoading(false)
    }
  }

  const handleAction = async (action) => {
    if (!reviewerName.trim()) {
      alert('Please enter your name')
      return
    }

    if (action === 'approve' && !confirm('Approve this artefact?')) return
    if (action === 'reject' && !confirm('Reject this artefact?')) return
    if (action === 'revision' && !feedback.trim()) {
      alert('Please provide feedback for revision request')
      return
    }

    setSubmitting(true)
    try {
      const res = await fetch(`/api/public/review/${token}/${action}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          approved_by_name: reviewerName,
          feedback: feedback || undefined,
        }),
      })

      if (!res.ok) {
        const err = await res.json()
        setError(err.error || 'Action failed')
        setSubmitting(false)
        return
      }

      const data = await res.json()
      setSuccess(data.message || 'Action completed successfully')
      setTimeout(() => {
        loadArtefact()
      }, 1500)
    } catch (err) {
      setError('Action failed')
    } finally {
      setSubmitting(false)
    }
  }

  const extractDriveFileId = (url) => {
    const patterns = [
      /\/file\/d\/([^\/]+)/,
      /id=([^&]+)/,
      /\/d\/([^\/]+)/,
    ]

    for (const pattern of patterns) {
      const match = url.match(pattern)
      if (match) return match[1]
    }

    return null
  }

  const getDriveEmbedUrl = (url) => {
    const fileId = extractDriveFileId(url)
    return fileId ? `https://drive.google.com/file/d/${fileId}/preview` : url
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-surface-secondary flex items-center justify-center">
        <div className="max-w-3xl w-full mx-auto px-4 space-y-6 animate-pulse">
          <div className="bg-surface rounded-2xl overflow-hidden">
            <div className="h-24 bg-surface-tertiary"></div>
            <div className="p-8 space-y-4">
              <div className="h-6 bg-surface-tertiary rounded w-2/3"></div>
              <div className="h-4 bg-surface-tertiary rounded w-1/2"></div>
              <div className="h-32 bg-surface-tertiary rounded"></div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen bg-surface-secondary flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-surface rounded-2xl shadow-sm p-8 text-center">
          <div className="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
            <XCircle className="w-8 h-8 text-red-600" />
          </div>
          <h2 className="text-2xl font-bold text-text-primary mb-2">Review Not Available</h2>
          <p className="text-text-secondary">{error}</p>
        </div>
      </div>
    )
  }

  if (success) {
    return (
      <div className="min-h-screen bg-surface-secondary flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-surface rounded-2xl shadow-sm p-8 text-center">
          <div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
            <CheckCircle className="w-8 h-8 text-emerald-600" />
          </div>
          <h2 className="text-2xl font-bold text-text-primary mb-2">Thank You!</h2>
          <p className="text-text-secondary">{success}</p>
        </div>
      </div>
    )
  }

  if (!artefact) return null

  const TypeIcon = STATUS_ICONS[artefact.type] || Sparkles
  const isImage = (url) => /\.(jpg|jpeg|png|gif|webp)$/i.test(url)

  return (
    <div className="min-h-screen bg-surface-secondary py-12 px-4">
      <div className="max-w-3xl mx-auto">
        {/* Header */}
        <div className="bg-surface rounded-2xl shadow-sm overflow-hidden mb-6">
          <div className="bg-brand-primary px-8 py-6">
            <div className="flex items-center gap-3 mb-2">
              <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                <Sparkles className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-white">Content Review</h1>
                <p className="text-white/80 text-sm">Samaya Digital Hub</p>
              </div>
            </div>
          </div>

          <div className="p-8">
            {/* Artefact Info */}
            <div className="flex items-start gap-4 mb-6">
              <div className="w-12 h-12 rounded-xl bg-brand-primary/10 flex items-center justify-center shrink-0">
                <TypeIcon className="w-6 h-6 text-brand-primary" />
              </div>
              <div className="flex-1">
                <h2 className="text-2xl font-bold text-text-primary mb-1">{artefact.title}</h2>
                {artefact.description && (
                  <p className="text-text-secondary mb-2">{artefact.description}</p>
                )}
                <div className="flex items-center gap-3 text-sm text-text-tertiary">
                  <span className="px-2 py-0.5 bg-surface-tertiary rounded-full capitalize">{artefact.type}</span>
                  {artefact.brand_name && <span>• {artefact.brand_name}</span>}
                  {artefact.version_number && <span>• Version {artefact.version_number}</span>}
                </div>
              </div>
            </div>

            {/* COPY TYPE: Multilingual Content */}
            {artefact.type === 'copy' && artefact.texts && artefact.texts.length > 0 && (
              <div className="mb-6">
                <div className="flex items-center gap-2 mb-3">
                  <Globe className="w-4 h-4 text-text-tertiary" />
                  <h3 className="text-sm font-semibold text-text-tertiary uppercase">Content Languages</h3>
                </div>

                {/* Language tabs */}
                <div className="flex items-center gap-2 mb-4 flex-wrap">
                  {artefact.texts.map((text, idx) => (
                    <button
                      key={idx}
                      onClick={() => setSelectedLanguage(idx)}
                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                        selectedLanguage === idx
                          ? 'bg-brand-primary text-white shadow-sm'
                          : 'bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/70'
                      }`}
                    >
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-mono">{text.language_code}</span>
                        <span className="text-sm">{text.language_label}</span>
                      </div>
                    </button>
                  ))}
                </div>

                {/* Selected language content */}
                <div className="bg-surface-secondary rounded-xl p-6 border border-border">
                  <div className="mb-2 text-xs font-semibold text-text-tertiary uppercase">
                    {artefact.texts[selectedLanguage].language_label} Content
                  </div>
                  <div className="text-text-primary whitespace-pre-wrap leading-relaxed">
                    {artefact.texts[selectedLanguage].content}
                  </div>
                </div>
              </div>
            )}

            {/* Legacy content field (for backward compatibility) */}
            {artefact.content && (!artefact.texts || artefact.texts.length === 0) && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-2">Content</h3>
                <div className="bg-surface-secondary rounded-xl p-4 border border-border">
                  <pre className="text-text-primary whitespace-pre-wrap font-sans text-sm leading-relaxed">
                    {artefact.content}
                  </pre>
                </div>
              </div>
            )}

            {/* DESIGN TYPE: Image Gallery */}
            {artefact.type === 'design' && artefact.attachments && artefact.attachments.length > 0 && (
              <div className="mb-6">
                <div className="flex items-center gap-2 mb-3">
                  <ImageIcon className="w-4 h-4 text-text-tertiary" />
                  <h3 className="text-sm font-semibold text-text-tertiary uppercase">Design Files</h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {artefact.attachments.map((att, idx) => (
                    <a
                      key={idx}
                      href={att.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="block rounded-xl overflow-hidden border-2 border-border hover:border-brand-primary transition-colors shadow-sm hover:shadow-sm"
                    >
                      <img
                        src={att.url}
                        alt={att.original_name || `Design ${idx + 1}`}
                        className="w-full h-64 object-cover"
                      />
                      {att.original_name && (
                        <div className="bg-surface-secondary px-4 py-2 border-t border-border">
                          <p className="text-sm text-text-secondary truncate">{att.original_name}</p>
                        </div>
                      )}
                    </a>
                  ))}
                </div>
              </div>
            )}

            {/* VIDEO TYPE: Video Player or Drive Embed */}
            {artefact.type === 'video' && artefact.attachments && artefact.attachments.length > 0 && (
              <div className="mb-6">
                <div className="flex items-center gap-2 mb-3">
                  <Film className="w-4 h-4 text-text-tertiary" />
                  <h3 className="text-sm font-semibold text-text-tertiary uppercase">Videos</h3>
                </div>
                <div className="space-y-4">
                  {artefact.attachments.map((att, idx) => (
                    <div key={idx} className="bg-surface-secondary rounded-xl overflow-hidden border border-border">
                      {att.drive_url ? (
                        <div>
                          <div className="px-4 py-2 bg-surface border-b border-border flex items-center gap-2">
                            <Globe className="w-4 h-4 text-text-tertiary" />
                            <span className="text-sm font-medium text-text-secondary">Google Drive Video</span>
                          </div>
                          <iframe
                            src={getDriveEmbedUrl(att.drive_url)}
                            className="w-full h-96"
                            allow="autoplay"
                            title={`Video ${idx + 1}`}
                          />
                        </div>
                      ) : (
                        <div>
                          {att.original_name && (
                            <div className="px-4 py-2 bg-surface border-b border-border">
                              <span className="text-sm font-medium text-text-secondary">{att.original_name}</span>
                            </div>
                          )}
                          <video
                            src={att.url}
                            controls
                            className="w-full"
                          />
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* OTHER TYPE: Generic Attachments */}
            {artefact.type === 'other' && artefact.attachments && artefact.attachments.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Attachments</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {artefact.attachments.map((att, idx) => (
                    <div key={idx}>
                      {isImage(att.url) ? (
                        <a
                          href={att.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="block rounded-xl overflow-hidden border border-border hover:border-brand-primary transition-colors"
                        >
                          <img
                            src={att.url}
                            alt={att.original_name}
                            className="w-full h-48 object-cover"
                          />
                          <div className="bg-surface-secondary px-3 py-2 border-t border-border">
                            <p className="text-xs text-text-secondary truncate">{att.original_name}</p>
                          </div>
                        </a>
                      ) : (
                        <a
                          href={att.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="flex items-center gap-3 p-4 bg-surface-secondary rounded-xl border border-border hover:border-brand-primary transition-colors"
                        >
                          <FileText className="w-8 h-8 text-text-tertiary shrink-0" />
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium text-text-primary truncate">{att.original_name}</p>
                            {att.size && (
                              <p className="text-xs text-text-tertiary">
                                {(att.size / 1024).toFixed(1)} KB
                              </p>
                            )}
                          </div>
                        </a>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Comments */}
            {artefact.comments && artefact.comments.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Previous Comments</h3>
                <div className="space-y-3">
                  {artefact.comments.map((comment, idx) => (
                    <div key={idx} className="bg-surface-secondary rounded-lg p-3 border border-border">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-sm font-medium text-text-primary">
                          {comment.user_name || comment.author_name || 'Anonymous'}
                        </span>
                        {comment.CreatedAt && (
                          <span className="text-xs text-text-tertiary">
                            • {new Date(comment.CreatedAt).toLocaleDateString()}
                          </span>
                        )}
                      </div>
                      <p className="text-sm text-text-secondary whitespace-pre-wrap">{comment.content}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Review Form */}
            {artefact.status === 'pending_review' && (
              <div className="border-t border-border pt-6">
                <h3 className="text-lg font-semibold text-text-primary mb-4">Your Review</h3>

                <div className="space-y-4 mb-6">
                  <div>
                    <label className="block text-sm font-medium text-text-primary mb-1">Your Name *</label>
                    <input
                      type="text"
                      value={reviewerName}
                      onChange={e => setReviewerName(e.target.value)}
                      placeholder="Enter your name"
                      className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-surface transition-colors"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-text-primary mb-1">Feedback (optional)</label>
                    <textarea
                      value={feedback}
                      onChange={e => setFeedback(e.target.value)}
                      rows={4}
                      placeholder="Share your thoughts, suggestions, or required changes..."
                      className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-surface transition-colors"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                  <button
                    onClick={() => handleAction('approve')}
                    disabled={submitting}
                    className="flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 text-white rounded-xl font-medium hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
                  >
                    <CheckCircle className="w-5 h-5" />
                    Approve
                  </button>
                  <button
                    onClick={() => handleAction('revision')}
                    disabled={submitting}
                    className="flex items-center justify-center gap-2 px-4 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
                  >
                    <AlertCircle className="w-5 h-5" />
                    Request Revision
                  </button>
                  <button
                    onClick={() => handleAction('reject')}
                    disabled={submitting}
                    className="flex items-center justify-center gap-2 px-4 py-3 bg-red-600 text-white rounded-xl font-medium hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
                  >
                    <XCircle className="w-5 h-5" />
                    Reject
                  </button>
                </div>
              </div>
            )}

            {/* Already Reviewed */}
            {artefact.status !== 'pending_review' && (
              <div className="border-t border-border pt-6">
                <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 text-center">
                  <p className="text-blue-900 font-medium">
                    This artefact has already been reviewed.
                  </p>
                  <p className="text-blue-700 text-sm mt-1">
                    Status: <span className="font-semibold capitalize">{artefact.status.replace('_', ' ')}</span>
                  </p>
                  {artefact.approved_by_name && (
                    <p className="text-blue-700 text-sm mt-1">
                      Reviewed by: <span className="font-semibold">{artefact.approved_by_name}</span>
                    </p>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="text-center text-text-tertiary text-sm">
          <p>Powered by Samaya Digital Hub</p>
        </div>
      </div>
    </div>
  )
}