import React, { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { forumAPI } from "../services/api";
import TagInput from "../components/TagInput";

const CreateForumPost: React.FC = () => {
  const { user } = useAuth();
  const navigate = useNavigate();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [formData, setFormData] = useState({
    title: "",
    content: "",
    category: "general_discussion" as
      | "item_request"
      | "technical_support"
      | "community_resources"
      | "general_discussion",
    tags: [] as string[],
  });

  const categories = [
    {
      value: "item_request",
      label: "Item Request",
      description: "Looking to rent a specific item",
    },
    {
      value: "technical_support",
      label: "Technical Support",
      description: "Get help with using the platform",
    },
    {
      value: "community_resources",
      label: "Community Resources",
      description: "Share tips, guides, and resources",
    },
    {
      value: "general_discussion",
      label: "General Discussion",
      description: "Open-ended conversations",
    },
  ];

  const handleInputChange = (
    e: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleTagsChange = (tags: string[]) => {
    setFormData((prev) => ({ ...prev, tags }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    // Validation
    if (!formData.title.trim()) {
      setError("Title is required");
      return;
    }

    if (formData.title.length < 10) {
      setError("Title must be at least 10 characters long");
      return;
    }

    if (!formData.content.trim()) {
      setError("Content is required");
      return;
    }

    if (formData.content.length < 20) {
      setError("Content must be at least 20 characters long");
      return;
    }

    try {
      setIsSubmitting(true);
      const response = await forumAPI.createPost(formData);
      navigate(`/forum/${response.data.id}`);
    } catch (err: any) {
      setError(err.response?.data?.error || "Failed to create post");
      setIsSubmitting(false);
    }
  };

  if (!user) {
    return (
      <div className="container mt-4">
        <div className="alert alert-warning" role="alert">
          <i className="bi bi-exclamation-triangle me-2"></i>
          You must be logged in to create a post.
        </div>
        <Link to="/forum" className="btn btn-secondary">
          <i className="bi bi-arrow-left me-2"></i>
          Back to Forum
        </Link>
      </div>
    );
  }

  return (
    <div className="container mt-4">
      <nav aria-label="breadcrumb" className="mb-3">
        <ol className="breadcrumb">
          <li className="breadcrumb-item">
            <Link to="/forum">Forum</Link>
          </li>
          <li className="breadcrumb-item active" aria-current="page">
            Create Post
          </li>
        </ol>
      </nav>

      <div className="row">
        <div className="col-lg-8 mx-auto">
          {/* Guidelines Card */}
          <div className="card mb-3">
            <div className="card-header">
              <h6 className="mb-0">
                <i className="bi bi-info-circle me-2"></i>
                Community Guidelines
              </h6>
            </div>
            <div className="card-body">
              <ul className="mb-0">
                <li>Be respectful and courteous to others</li>
                <li>Stay on topic and relevant to the category</li>
                <li>No spam, advertising, or self-promotion</li>
                <li>Search before posting to avoid duplicates</li>
                <li>Use clear, descriptive titles</li>
                <li>Provide helpful and constructive feedback</li>
              </ul>
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <h3 className="mb-0">Create New Post</h3>
            </div>
            <div className="card-body">
              {error && (
                <div className="alert alert-danger" role="alert">
                  {error}
                </div>
              )}

              <form onSubmit={handleSubmit}>
                {/* Title */}
                <div className="mb-3">
                  <label htmlFor="title" className="form-label">
                    Title <span className="text-danger">*</span>
                  </label>
                  <input
                    type="text"
                    className="form-control"
                    id="title"
                    name="title"
                    value={formData.title}
                    onChange={handleInputChange}
                    placeholder="Enter a descriptive title..."
                    maxLength={200}
                    disabled={isSubmitting}
                    required
                  />
                  <div className="form-text">
                    {formData.title.length}/200 characters (minimum 10)
                  </div>
                </div>

                {/* Category */}
                <div className="mb-3">
                  <label htmlFor="category" className="form-label">
                    Category <span className="text-danger">*</span>
                  </label>
                  <select
                    className="form-select"
                    id="category"
                    name="category"
                    value={formData.category}
                    onChange={handleInputChange}
                    disabled={isSubmitting}
                    required
                  >
                    {categories.map((cat) => (
                      <option key={cat.value} value={cat.value}>
                        {cat.label}
                      </option>
                    ))}
                  </select>
                  <div className="form-text">
                    Choose the category that best fits your post
                  </div>
                </div>

                {/* Content */}
                <div className="mb-3">
                  <label htmlFor="content" className="form-label">
                    Content <span className="text-danger">*</span>
                  </label>
                  <textarea
                    className="form-control"
                    id="content"
                    name="content"
                    rows={10}
                    value={formData.content}
                    onChange={handleInputChange}
                    placeholder="Write your post content here..."
                    disabled={isSubmitting}
                    required
                  />
                  <div className="form-text">
                    {formData.content.length} characters (minimum 20)
                  </div>
                </div>

                {/* Tags */}
                <div className="mb-4">
                  <label className="form-label">
                    Tags <span className="text-muted">(optional)</span>
                  </label>
                  <TagInput
                    selectedTags={formData.tags}
                    onChange={handleTagsChange}
                    placeholder="Add tags to help others find your post..."
                  />
                  <div className="form-text">
                    Add up to 5 relevant tags. Press Enter after each tag.
                  </div>
                </div>

                {/* Category-specific guidelines */}
                {formData.category === "item_request" && (
                  <div className="alert alert-info mb-3">
                    <strong>Item Request Tips:</strong>
                    <ul className="mb-0 mt-2">
                      <li>Be specific about what you're looking for</li>
                      <li>Include your general location</li>
                      <li>Specify when you need the item</li>
                      <li>Mention your budget range if applicable</li>
                    </ul>
                  </div>
                )}

                {formData.category === "technical_support" && (
                  <div className="alert alert-info mb-3">
                    <strong>Technical Support Tips:</strong>
                    <ul className="mb-0 mt-2">
                      <li>Describe the issue you're experiencing</li>
                      <li>Include steps to reproduce the problem</li>
                      <li>Mention your device/browser if relevant</li>
                      <li>Include any error messages you see</li>
                    </ul>
                  </div>
                )}

                {/* Submit buttons */}
                <div className="d-flex gap-2">
                  <button
                    type="submit"
                    className="btn btn-primary"
                    disabled={
                      isSubmitting ||
                      !formData.title.trim() ||
                      !formData.content.trim()
                    }
                  >
                    {isSubmitting ? (
                      <>
                        <span
                          className="spinner-border spinner-border-sm me-2"
                          role="status"
                          aria-hidden="true"
                        ></span>
                        Creating...
                      </>
                    ) : (
                      <>
                        <i className="bi bi-send me-2"></i>
                        Create Post
                      </>
                    )}
                  </button>
                  <Link
                    to="/forum"
                    className={`btn btn-secondary ${
                      isSubmitting ? "disabled" : ""
                    }`}
                  >
                    Cancel
                  </Link>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CreateForumPost;