import { useState, useEffect } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { format } from 'date-fns'
import toast from 'react-hot-toast'
import {
  ArrowLeftIcon,
  ClipboardIcon,
  ArrowTopRightOnSquareIcon,
  PencilIcon,
  ArchiveBoxIcon,
  ChartBarIcon,
  CheckIcon,
} from '@heroicons/react/24/outline'
import { paywallsApi } from '../../services/api'

export default function PaywallDetail() {
  const { id } = useParams()
  const navigate = useNavigate()
  const [paywall, setPaywall] = useState(null)
  const [stats, setStats] = useState(null)
  const [embedCode, setEmbedCode] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [activeTab, setActiveTab] = useState('overview')
  const [editData, setEditData] = useState({})

  useEffect(() => {
    fetchPaywall()
    fetchEmbed()
  }, [id])

  const fetchPaywall = async () => {
    try {
      const response = await paywallsApi.get(id)
      setPaywall(response.data.paywall)
      setStats(response.data.stats)
      setEditData({
        title: response.data.paywall.title || '',
        description: response.data.paywall.description || '',
        priceSats: response.data.paywall.priceSats || 100,
        originalUrl: response.data.paywall.originalUrl || '',
        accessExpirySeconds: response.data.paywall.accessExpirySeconds || null,
        maxDevices: response.data.paywall.maxDevices || 3,
        allowEmbed: response.data.paywall.allowEmbed ?? true,
        customSuccessMessage: response.data.paywall.customSuccessMessage || '',
        slug: response.data.paywall.slug || '',
      })
    } catch (error) {
      console.error('Error fetching paywall:', error)
      toast.error('Failed to load paywall')
    } finally {
      setIsLoading(false)
    }
  }

  const handleEditChange = (e) => {
    const { name, value, type, checked } = e.target
    setEditData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : (type === 'number' ? (value === '' ? null : parseInt(value)) : value)
    }))
  }

  const handleSaveSettings = async (e) => {
    e.preventDefault()
    setIsSaving(true)

    try {
      const updateData = {
        ...editData,
        priceSats: parseInt(editData.priceSats),
        accessExpirySeconds: editData.accessExpirySeconds ? parseInt(editData.accessExpirySeconds) : null,
        maxDevices: parseInt(editData.maxDevices),
      }
      
      const response = await paywallsApi.update(id, updateData)
      setPaywall(response.data.paywall)
      toast.success('Paywall updated successfully!')
    } catch (error) {
      console.error('Error updating paywall:', error)
      toast.error(error.response?.data?.error || 'Failed to update paywall')
    } finally {
      setIsSaving(false)
    }
  }

  const fetchEmbed = async () => {
    try {
      const response = await paywallsApi.getEmbed(id)
      setEmbedCode(response.data)
    } catch (error) {
      console.error('Error fetching embed:', error)
    }
  }

  const handleCopy = (text, label) => {
    navigator.clipboard.writeText(text)
    toast.success(`${label} copied!`)
  }

  const handleArchive = async () => {
    try {
      await paywallsApi.archive(id)
      toast.success('Paywall archived')
      navigate('/dashboard/paywalls')
    } catch (error) {
      toast.error('Failed to archive paywall')
    }
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-lightning"></div>
      </div>
    )
  }

  if (!paywall) {
    return (
      <div className="text-center py-12">
        <h2 className="text-xl font-bold mb-2">Paywall not found</h2>
        <Link to="/dashboard/paywalls" className="text-lightning hover:underline">
          Back to paywalls
        </Link>
      </div>
    )
  }

  const paywallUrl = embedCode?.link || `${window.location.origin}/p/${paywall.slug || paywall.id}`

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-start gap-4">
        <button
          onClick={() => navigate('/dashboard/paywalls')}
          className="flex items-center gap-2 text-dark-400 hover:text-white self-start"
        >
          <ArrowLeftIcon className="w-4 h-4" />
          Back
        </button>
        <div className="flex-1">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold">{paywall.title}</h1>
              <p className="text-dark-400">{paywall.description}</p>
            </div>
            <div className="flex items-center gap-2">
              <a
                href={paywallUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-secondary"
              >
                <ArrowTopRightOnSquareIcon className="w-4 h-4" />
                Preview
              </a>
              <button
                onClick={handleArchive}
                className="btn btn-secondary text-red-500 border-red-500/30 hover:bg-red-500/10"
              >
                <ArchiveBoxIcon className="w-4 h-4" />
                Archive
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="card p-4">
          <p className="text-dark-400 text-sm">Price</p>
          <p className="text-2xl font-bold text-lightning">⚡ {paywall.priceSats.toLocaleString()}</p>
        </div>
        <div className="card p-4">
          <p className="text-dark-400 text-sm">Total Sales</p>
          <p className="text-2xl font-bold">{stats?.salesCount || 0}</p>
        </div>
        <div className="card p-4">
          <p className="text-dark-400 text-sm">Total Revenue</p>
          <p className="text-2xl font-bold text-lightning">⚡ {(stats?.totalRevenue || 0).toLocaleString()}</p>
        </div>
        <div className="card p-4">
          <p className="text-dark-400 text-sm">Status</p>
          <p className={`text-2xl font-bold ${paywall.status === 'ACTIVE' ? 'text-green-500' : 'text-dark-400'}`}>
            {paywall.status}
          </p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 border-b border-dark-800 pb-px">
        {['overview', 'embed', 'settings'].map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
              activeTab === tab
                ? 'border-lightning text-white'
                : 'border-transparent text-dark-400 hover:text-white'
            }`}
          >
            {tab.charAt(0).toUpperCase() + tab.slice(1)}
          </button>
        ))}
      </div>

      {/* Tab content */}
      <motion.div
        key={activeTab}
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
      >
        {activeTab === 'overview' && (
          <div className="grid md:grid-cols-2 gap-6">
            {/* Preview */}
            <div className="card overflow-hidden">
              {paywall.coverImageUrl ? (
                <img src={paywall.coverImageUrl} alt="" className="w-full h-48 object-cover" />
              ) : (
                <div className="w-full h-48 bg-gradient-to-br from-purple-600 to-pink-500" />
              )}
              <div className="p-4">
                <h3 className="font-semibold mb-2">{paywall.title}</h3>
                <p className="text-sm text-dark-400 mb-4">{paywall.description}</p>
                <div className="flex items-center justify-between">
                  <span className="text-lightning font-bold">⚡ {paywall.priceSats.toLocaleString()} sats</span>
                  <span className="text-xs text-dark-500">
                    {paywall.accessExpirySeconds
                      ? `${Math.round(paywall.accessExpirySeconds / 86400)} day access`
                      : 'Lifetime access'}
                  </span>
                </div>
              </div>
            </div>

            {/* Quick links */}
            <div className="space-y-4">
              <div className="card p-4">
                <h4 className="font-semibold mb-3">Share Link</h4>
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={paywallUrl}
                    readOnly
                    className="input flex-1 text-sm"
                  />
                  <button
                    onClick={() => handleCopy(paywallUrl, 'Link')}
                    className="btn btn-secondary"
                  >
                    <ClipboardIcon className="w-5 h-5" />
                  </button>
                </div>
              </div>

              <div className="card p-4">
                <h4 className="font-semibold mb-3">Details</h4>
                <dl className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <dt className="text-dark-400">Created</dt>
                    <dd>{format(new Date(paywall.createdAt), 'MMM d, yyyy')}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-dark-400">Max Devices</dt>
                    <dd>{paywall.maxDevices}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-dark-400">Content Type</dt>
                    <dd>{paywall.originalUrlType}</dd>
                  </div>
                  <div className="flex justify-between">
                    <dt className="text-dark-400">Allow Embed</dt>
                    <dd>{paywall.allowEmbed ? 'Yes' : 'No'}</dd>
                  </div>
                </dl>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'embed' && embedCode && (
          <div className="space-y-6" id="embed">
            <div className="card p-6">
              <h3 className="font-semibold mb-4">Iframe Embed</h3>
              <p className="text-sm text-dark-400 mb-4">
                Add this code to your website to embed the paywall directly.
              </p>
              <div className="relative">
                <pre className="bg-dark-800 rounded-xl p-4 text-sm overflow-x-auto font-mono">
                  {embedCode.iframe}
                </pre>
                <button
                  onClick={() => handleCopy(embedCode.iframe, 'Embed code')}
                  className="absolute top-2 right-2 btn btn-secondary text-xs py-1 px-2"
                >
                  <ClipboardIcon className="w-4 h-4" />
                  Copy
                </button>
              </div>
            </div>

            <div className="card p-6">
              <h3 className="font-semibold mb-4">Button Embed</h3>
              <p className="text-sm text-dark-400 mb-4">
                Add a button that opens a checkout modal when clicked.
              </p>
              <div className="relative">
                <pre className="bg-dark-800 rounded-xl p-4 text-sm overflow-x-auto font-mono">
                  {embedCode.button}
                </pre>
                <button
                  onClick={() => handleCopy(embedCode.button, 'Button code')}
                  className="absolute top-2 right-2 btn btn-secondary text-xs py-1 px-2"
                >
                  <ClipboardIcon className="w-4 h-4" />
                  Copy
                </button>
              </div>
            </div>

            <div className="card p-6">
              <h3 className="font-semibold mb-4">Direct Link</h3>
              <p className="text-sm text-dark-400 mb-4">
                Share this link directly or use it in your own custom integration.
              </p>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={embedCode.link}
                  readOnly
                  className="input flex-1 font-mono text-sm"
                />
                <button
                  onClick={() => handleCopy(embedCode.link, 'Link')}
                  className="btn btn-secondary"
                >
                  <ClipboardIcon className="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'settings' && (
          <form onSubmit={handleSaveSettings} className="space-y-6">
            <div className="card p-6">
              <h3 className="font-semibold mb-4">Basic Settings</h3>
              <div className="space-y-4">
                <div>
                  <label className="label">Title</label>
                  <input
                    type="text"
                    name="title"
                    value={editData.title}
                    onChange={handleEditChange}
                    className="input"
                    required
                  />
                </div>
                
                <div>
                  <label className="label">Description</label>
                  <textarea
                    name="description"
                    value={editData.description}
                    onChange={handleEditChange}
                    className="input min-h-[100px]"
                    placeholder="What are you selling?"
                  />
                </div>

                <div>
                  <label className="label">Original URL</label>
                  <input
                    type="url"
                    name="originalUrl"
                    value={editData.originalUrl}
                    onChange={handleEditChange}
                    className="input"
                    required
                  />
                </div>

                <div>
                  <label className="label">Custom Slug (optional)</label>
                  <div className="flex items-center gap-2">
                    <span className="text-dark-400">/p/</span>
                    <input
                      type="text"
                      name="slug"
                      value={editData.slug}
                      onChange={handleEditChange}
                      className="input flex-1"
                      placeholder="my-awesome-content"
                      pattern="^[a-z0-9-]+$"
                    />
                  </div>
                  <p className="text-xs text-dark-500 mt-1">Lowercase letters, numbers, and hyphens only</p>
                </div>
              </div>
            </div>

            <div className="card p-6">
              <h3 className="font-semibold mb-4">Pricing & Access</h3>
              <div className="space-y-4">
                <div>
                  <label className="label">Price (sats)</label>
                  <input
                    type="number"
                    name="priceSats"
                    value={editData.priceSats}
                    onChange={handleEditChange}
                    className="input"
                    min="1"
                    required
                  />
                </div>

                <div>
                  <label className="label">Access Duration</label>
                  <select
                    name="accessExpirySeconds"
                    value={editData.accessExpirySeconds || ''}
                    onChange={handleEditChange}
                    className="input"
                  >
                    <option value="">Lifetime access</option>
                    <option value="86400">24 hours</option>
                    <option value="604800">7 days</option>
                    <option value="2592000">30 days</option>
                    <option value="7776000">90 days</option>
                    <option value="31536000">1 year</option>
                  </select>
                </div>

                <div>
                  <label className="label">Max Devices</label>
                  <input
                    type="number"
                    name="maxDevices"
                    value={editData.maxDevices}
                    onChange={handleEditChange}
                    className="input"
                    min="1"
                    max="100"
                  />
                  <p className="text-xs text-dark-500 mt-1">How many devices can access the content</p>
                </div>
              </div>
            </div>

            <div className="card p-6">
              <h3 className="font-semibold mb-4">Advanced</h3>
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <input
                    type="checkbox"
                    name="allowEmbed"
                    id="allowEmbed"
                    checked={editData.allowEmbed}
                    onChange={handleEditChange}
                    className="w-4 h-4 rounded border-dark-700 bg-dark-800 text-lightning focus:ring-lightning"
                  />
                  <label htmlFor="allowEmbed" className="text-sm">Allow embedding on other websites</label>
                </div>

                <div>
                  <label className="label">Custom Success Message</label>
                  <textarea
                    name="customSuccessMessage"
                    value={editData.customSuccessMessage}
                    onChange={handleEditChange}
                    className="input"
                    placeholder="Thank you for your purchase!"
                  />
                </div>
              </div>
            </div>

            <div className="flex items-center gap-4">
              <button
                type="submit"
                disabled={isSaving}
                className="btn btn-primary"
              >
                {isSaving ? (
                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                ) : (
                  <>
                    <CheckIcon className="w-5 h-5" />
                    Save Changes
                  </>
                )}
              </button>
              
              <button
                type="button"
                onClick={handleArchive}
                className="btn btn-secondary text-red-500 border-red-500/30 hover:bg-red-500/10"
              >
                <ArchiveBoxIcon className="w-4 h-4" />
                Archive Paywall
              </button>
            </div>
          </form>
        )}
      </motion.div>
    </div>
  )
}