/**
 * Post Editor (Advanced)
 * Phase 7: Advanced Site Management
 * Full-featured editing: SEO, metadata, tags, categories, HTML content
 */
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { SaveIcon, XIcon, FileTextIcon, TagIcon, CheckCircleIcon, XCircleIcon, AlertCircleIcon } from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import Label from '../../components/form/Label';
import TextArea from '../../components/form/input/TextArea';
import SelectDropdown from '../../components/form/SelectDropdown';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI, fetchContentValidation, validateContent, ContentValidationResult } from '../../services/api';

interface Content {
  id?: number;
  title: string;
  content_html: string;
  content_type: string; // post, page, product, service, category, tag
  content_structure?: string; // article, listicle, guide, comparison, product_page
  status: string; // draft, published
  site?: number;
  cluster_id?: number | null;
  cluster_name?: string | null;
  taxonomy_terms?: Array<{ id: number; name: string; taxonomy: string }> | null;
  source?: string; // igny8, wordpress
  external_id?: string | null;
  external_url?: string | null;
  word_count?: number;
  created_at?: string;
  updated_at?: string;
}

export default function PostEditor() {
  const { id: siteId, postId } = useParams<{ id: string; postId?: string }>();
  const navigate = useNavigate();
  const toast = useToast();
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [activeTab, setActiveTab] = useState<'content' | 'taxonomy' | 'validation'>('content');
  const [validationResult, setValidationResult] = useState<ContentValidationResult | null>(null);
  const [validating, setValidating] = useState(false);
  const [content, setContent] = useState<Content>({
    title: '',
    content_html: '',
    content_type: 'post',
    content_structure: 'article',
    status: 'draft',
    site: Number(siteId),
    source: 'igny8',
    taxonomy_terms: [],
  });

  useEffect(() => {
    if (siteId) {
      loadSite();
      if (postId && postId !== 'new') {
        loadPost();
        loadValidation();
      } else {
        setLoading(false);
      }
    }
  }, [siteId, postId]);

  const loadValidation = async () => {
    if (!postId || postId === 'new') return;
    try {
      const result = await fetchContentValidation(Number(postId));
      setValidationResult(result);
    } catch (error: any) {
      console.error('Failed to load validation:', error);
      toast.error(`Failed to load validation: ${error.message || 'Unknown error'}`);
    }
  };

  const handleValidate = async () => {
    if (!content.id) {
      toast.error('Please save the content first before validating');
      return;
    }
    try {
      setValidating(true);
      const result = await validateContent(content.id);
      await loadValidation();
      if (result.is_valid) {
        toast.success('Content validation passed!');
      } else {
        toast.warning(`Validation found ${result.errors.length} issue(s)`);
      }
    } catch (error: any) {
      toast.error(`Validation failed: ${error.message}`);
    } finally {
      setValidating(false);
    }
  };

  const loadSite = async () => {
    try {
      const site = await fetchAPI(`/v1/auth/sites/${siteId}/`);
      if (site) {
        setContent((prev) => ({
          ...prev,
          sector: site.sector || 0,
        }));
      }
    } catch (error: any) {
      console.error('Failed to load site:', error);
    }
  };

  const loadPost = async () => {
    try {
      setLoading(true);
      const data = await fetchAPI(`/v1/writer/content/${postId}/`);
      if (data) {
        setContent({
          id: data.id,
          title: data.title || '',
          content_html: data.content_html || '',
          content_type: data.content_type || 'post',
          content_structure: data.content_structure || 'article',
          status: data.status || 'draft',
          site: data.site || Number(siteId),
          cluster_id: data.cluster_id || null,
          cluster_name: data.cluster_name || null,
          taxonomy_terms: Array.isArray(data.taxonomy_terms) ? data.taxonomy_terms : [],
          source: data.source || 'igny8',
          external_id: data.external_id || null,
          external_url: data.external_url || null,
          word_count: data.word_count || 0,
          created_at: data.created_at,
          updated_at: data.updated_at,
        });
      }
    } catch (error: any) {
      toast.error(`Failed to load post: ${error.message}`);
      navigate(`/sites/${siteId}/content`);
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    if (!content.title.trim()) {
      toast.error('Title is required');
      return;
    }

    try {
      setSaving(true);
      const payload = {
        title: content.title,
        content_html: content.content_html || content.content,
        content_type: content.content_type,
        content_structure: content.content_structure,
        status: content.status,
        site: content.site,
        cluster_id: content.cluster_id,
        taxonomy_terms: content.taxonomy_terms,
        source: content.source || 'igny8',
        external_id: content.external_id,
        external_url: content.external_url,
      };
      
      if (content.id) {
        // Update existing
        await fetchAPI(`/v1/writer/content/${content.id}/`, {
          method: 'PUT',
          body: JSON.stringify(payload),
        });
        toast.success('Post updated successfully');
      } else {
        // Create new
        const result = await fetchAPI('/v1/writer/content/', {
          method: 'POST',
          body: JSON.stringify({
            ...payload,
          }),
        });
        toast.success('Post created successfully');
        if (result?.id) {
          navigate(`/sites/${siteId}/posts/${result.id}/edit`);
        }
      }
    } catch (error: any) {
      toast.error(`Failed to save post: ${error.message}`);
    } finally {
      setSaving(false);
    }
  };

  const CONTENT_TYPES = [
    { value: 'post', label: 'Post' },
    { value: 'page', label: 'Page' },
    { value: 'product', label: 'Product' },
    { value: 'service', label: 'Service' },
    { value: 'category', label: 'Category' },
    { value: 'tag', label: 'Tag' },
  ];

  const CONTENT_STRUCTURES = [
    { value: 'article', label: 'Article' },
    { value: 'listicle', label: 'Listicle' },
    { value: 'guide', label: 'Guide' },
    { value: 'comparison', label: 'Comparison' },
    { value: 'product_page', label: 'Product Page' },
  ];

  const STATUS_OPTIONS = [
    { value: 'draft', label: 'Draft' },
    { value: 'published', label: 'Published' },
  ];

  if (loading) {
    return (
      <div className="p-6">
        <PageMeta title="Post Editor" />
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">Loading post...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <PageMeta title={content.id ? 'Edit Post' : 'New Post'} />
      
      <div className="flex gap-6">
        {/* Main Content Area */}
        <div className="flex-1">
      
      <div className="mb-6 flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {content.id ? 'Edit Post' : 'New Post'}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            {content.id ? 'Edit your post content' : 'Create a new post'}
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            variant="outline"
            onClick={() => navigate(`/sites/${siteId}/content`)}
            startIcon={<XIcon className="w-4 h-4" />}
          >
            Cancel
          </Button>
          <Button
            variant="primary"
            onClick={handleSave}
            disabled={saving || (content.status === 'publish' && validationResult && !validationResult.is_valid)}
            title={content.status === 'publish' && validationResult && !validationResult.is_valid ? 'Please fix validation errors before publishing' : undefined}
            startIcon={<SaveIcon className="w-4 h-4" />}
          >
            {saving ? 'Saving...' : content.status === 'publish' ? 'Publish' : 'Save Post'}
          </Button>
        </div>
      </div>

      {/* Tabs */}
      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
        <div className="flex gap-4">
          <button
            type="button"
            onClick={() => setActiveTab('content')}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'content'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <FileTextIcon className="w-4 h-4 inline mr-2" />
            Content
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('taxonomy')}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'taxonomy'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <TagIcon className="w-4 h-4 inline mr-2" />
            Taxonomy & Cluster
          </button>
          {content.id && (
            <button
              type="button"
              onClick={() => {
                setActiveTab('validation');
                loadValidation();
              }}
              className={`px-4 py-2 font-medium border-b-2 transition-colors ${
                activeTab === 'validation'
                  ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
              }`}
            >
              <CheckCircleIcon className="w-4 h-4 inline mr-2" />
              Validation
              {validationResult && !validationResult.is_valid && (
                <span className="ml-2 px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 rounded-full">
                  {validationResult.validation_errors.length}
                </span>
              )}
            </button>
          )}
        </div>
      </div>

      <div className="space-y-6">
        {/* Content Tab */}
        {activeTab === 'content' && (
          <Card className="p-6">
            <div className="space-y-4">
              <div>
                <Label>Title *</Label>
                <input
                  type="text"
                  value={content.title}
                  onChange={(e) => setContent({ ...content, title: e.target.value })}
                  placeholder="Enter post title"
                  className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Content Type</Label>
                  <SelectDropdown
                    options={CONTENT_TYPES}
                    value={content.content_type}
                    onChange={(value) => setContent({ ...content, content_type: value })}
                  />
                </div>

                <div>
                  <Label>Status</Label>
                  <SelectDropdown
                    options={STATUS_OPTIONS}
                    value={content.status}
                    onChange={(value) => setContent({ ...content, status: value })}
                  />
                </div>
              </div>

              <div>
                <Label>Content (HTML)</Label>
                <TextArea
                  value={content.content_html || ''}
                  onChange={(value) => setContent({ ...content, content_html: value })}
                  rows={25}
                  placeholder="Write your post content here (HTML supported)..."
                  className="mt-1 font-mono text-sm"
                />
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  HTML content is supported. Use &lt;p&gt;, &lt;h1&gt;, &lt;h2&gt;, etc. for formatting.
                </p>
              </div>

              {content.word_count !== undefined && content.word_count > 0 && (
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  Word count: {content.word_count.toLocaleString()}
                </div>
              )}
            </div>
          </Card>
        )}

        {/* Taxonomy & Cluster Tab */}
        {activeTab === 'taxonomy' && (
          <Card className="p-6">
            <div className="space-y-4">
              <div>
                <Label>Cluster</Label>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  {content.cluster_name || 'No cluster assigned'}
                </p>
                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  Clusters help organize related content. Assign via the Planner module.
                </p>
              </div>

              <div>
                <Label>Taxonomies</Label>
                {content.taxonomy_terms && content.taxonomy_terms.length > 0 ? (
                  <div className="mt-2 flex flex-wrap gap-2">
                    {content.taxonomy_terms.map((term) => (
                      <span
                        key={term.id}
                        className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300"
                      >
                        {term.name} ({term.taxonomy})
                      </span>
                    ))}
                  </div>
                ) : (
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    No taxonomies assigned
                  </p>
                )}
                <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                  Taxonomies include categories, tags, and custom classifications.
                </p>
              </div>

              <div>
                <Label>Content Type</Label>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  {content.content_type}
                </p>
              </div>

              <div>
                <Label>Content Structure</Label>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  {content.content_structure || 'Not specified'}
                </p>
              </div>
            </div>
          </Card>
        )}

        {/* Validation Tab - Stage 3 */}
        {activeTab === 'validation' && content.id && (
          <Card className="p-6">
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    Content Validation
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    Check if your content meets all requirements before publishing
                  </p>
                </div>
                <Button
                  variant="primary"
                  onClick={handleValidate}
                  disabled={validating}
                  aria-label="Run content validation"
                >
                  {validating ? 'Validating...' : 'Run Validation'}
                </Button>
              </div>

              {validationResult ? (
                <div className="space-y-4">
                  {/* Validation Status */}
                  <div className={`p-4 rounded-lg ${
                    validationResult.is_valid
                      ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800'
                      : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
                  }`}>
                    <div className="flex items-center gap-2">
                      {validationResult.is_valid ? (
                        <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
                      ) : (
                        <XCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
                      )}
                      <span className={`font-medium ${
                        validationResult.is_valid
                          ? 'text-green-800 dark:text-green-300'
                          : 'text-red-800 dark:text-red-300'
                      }`}>
                        {validationResult.is_valid
                          ? 'Content is valid and ready to publish'
                          : `Content has ${validationResult.validation_errors.length} validation error(s)`}
                      </span>
                    </div>
                  </div>

                  {/* Metadata Summary */}
                  <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4" role="region" aria-labelledby="metadata-summary-title">
                    <h4 id="metadata-summary-title" className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
                      Metadata Summary
                    </h4>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-gray-600 dark:text-gray-400">Content Type:</span>
                        <span className="ml-2 font-medium text-gray-900 dark:text-white">
                          {validationResult.metadata.content_type || 'Not set'}
                        </span>
                      </div>
                      <div>
                        <span className="text-gray-600 dark:text-gray-400">Cluster Mapping:</span>
                        <span className={`ml-2 font-medium ${
                          validationResult.metadata.has_cluster_mapping
                            ? 'text-green-600 dark:text-green-400'
                            : 'text-red-600 dark:text-red-400'
                        }`}>
                          {validationResult.metadata.has_cluster_mapping ? 'Yes' : 'No'}
                        </span>
                      </div>
                      <div>
                        <span className="text-gray-600 dark:text-gray-400">Taxonomy Mapping:</span>
                        <span className={`ml-2 font-medium ${
                          validationResult.metadata.has_taxonomy_mapping
                            ? 'text-green-600 dark:text-green-400'
                            : 'text-red-600 dark:text-red-400'
                        }`}>
                          {validationResult.metadata.has_taxonomy_mapping ? 'Yes' : 'No'}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Validation Errors */}
                  {validationResult.validation_errors.length > 0 && (
                    <div role="alert" aria-live="polite">
                      <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
                        Validation Errors
                      </h4>
                      <div className="space-y-2">
                        {validationResult.validation_errors.map((error, index) => (
                          <div
                            key={index}
                            className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800"
                          >
                            <AlertCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
                            <div className="flex-1">
                              <div className="text-sm font-medium text-red-800 dark:text-red-300">
                                {error.field || error.code}
                              </div>
                              <div className="text-sm text-red-600 dark:text-red-400 mt-1">
                                {error.message}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Publish Errors */}
                  {validationResult.publish_errors && validationResult.publish_errors.length > 0 && (
                    <div role="alert" aria-live="polite">
                      <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
                        Publish Blockers
                      </h4>
                      <div className="space-y-2">
                        {validationResult.publish_errors.map((error, index) => (
                          <div
                            key={index}
                            className="flex items-start gap-2 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800"
                          >
                            <XCircleIcon className="w-5 h-5 text-orange-600 dark:text-orange-400 flex-shrink-0 mt-0.5" />
                            <div className="flex-1">
                              <div className="text-sm font-medium text-orange-800 dark:text-orange-300">
                                {error.field || error.code}
                              </div>
                              <div className="text-sm text-orange-600 dark:text-orange-400 mt-1">
                                {error.message}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <div className="text-center py-8">
                  <FileTextIcon className="w-12 h-12 text-gray-400 dark:text-gray-500 mx-auto mb-3 opacity-50" />
                  <p className="text-gray-500 dark:text-gray-400 mb-2">No validation results yet</p>
                  <p className="text-sm text-gray-400 dark:text-gray-500">Click "Run Validation" to check your content</p>
                </div>
              )}
            </div>
          </Card>
        )}
      </div>
        </div>

        {/* Stage 3: Sidebar with Metadata Summary */}
        {content.id && (
          <div className="w-full lg:w-80 flex-shrink-0 mt-6 lg:mt-0">
            <Card className="p-4 sticky top-6">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                Content Metadata
              </h3>
              
              <div className="space-y-4">
                {/* Entity Type */}
                <div>
                  <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                    Entity Type
                  </div>
                  <div className="text-sm text-gray-900 dark:text-white">
                    {content.content_type ? (
                      content.content_type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())
                    ) : (
                      <span className="text-gray-400 dark:text-gray-500 italic">Not set</span>
                    )}
                  </div>
                </div>

                {/* Cluster */}
                <div>
                  <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                    Cluster
                  </div>
                  <div className="text-sm text-gray-900 dark:text-white">
                    {content.cluster_name ? (
                      <>
                        {content.cluster_name}
                        {content.content_structure && (
                          <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
                            ({content.content_structure})
                          </span>
                        )}
                      </>
                    ) : (
                      <span className="text-gray-400 dark:text-gray-500 italic">Not assigned</span>
                    )}
                  </div>
                </div>

                {/* Taxonomy */}
                <div>
                  <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                    Taxonomy
                  </div>
                  <div className="text-sm text-gray-900 dark:text-white">
                    {content.taxonomy_name ? (
                      content.taxonomy_name
                    ) : (
                      <span className="text-gray-400 dark:text-gray-500 italic">Not assigned</span>
                    )}
                  </div>
                </div>

                {/* Validation Status */}
                {validationResult && (
                  <div>
                    <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                      Validation Status
                    </div>
                    <div className={`text-sm font-medium ${
                      validationResult.is_valid
                        ? 'text-green-600 dark:text-green-400'
                        : 'text-red-600 dark:text-red-400'
                    }`}>
                      {validationResult.is_valid ? '✓ Valid' : `✗ ${validationResult.validation_errors.length} error(s)`}
                    </div>
                  </div>
                )}

                {/* Quick Links */}
                <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
                  <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
                    Quick Actions
                  </div>
                  <div className="space-y-1">
                    {content.cluster_id ? (
                      <button
                        onClick={() => navigate(`/planner/clusters/${content.cluster_id}`)}
                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500 rounded px-1"
                        aria-label="View cluster details"
                      >
                        View Cluster →
                      </button>
                    ) : (
                      <span className="text-xs text-gray-400 dark:text-gray-500 italic">No cluster assigned</span>
                    )}
                    {content.taxonomy_id ? (
                      <button
                        onClick={() => navigate(`/sites/builder?taxonomy=${content.taxonomy_id}`)}
                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500 rounded px-1"
                        aria-label="View taxonomy details"
                      >
                        View Taxonomy →
                      </button>
                    ) : (
                      <span className="text-xs text-gray-400 dark:text-gray-500 italic">No taxonomy assigned</span>
                    )}
                  </div>
                </div>
              </div>
            </Card>
          </div>
        )}
      </div>
    </div>
  );
}