import { useParams, Link, useNavigate } from 'react-router-dom';
import { WidePageLayout } from '../components/WidePageLayout';
import RichTextContent from '../components/RichTextContent';
import useWikiDetail from '../hooks/useWikiDetail';

const Edit2Icon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
  </svg>
);

const Trash2Icon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <polyline points="3 6 5 6 21 6"></polyline>
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
  </svg>
);

export function WikiDetail() {
  const { id: boardId, wikiId } = useParams<{ id: string; wikiId: string }>();
  const navigate = useNavigate();
  const { wiki, deleteWiki } = useWikiDetail(wikiId || '0');

  const handleDelete = async () => {
    if (!wiki) return;

    if (confirm(`Are you sure you want to delete wiki "${wiki.name}"?`)) {
      try {
        await deleteWiki();
        navigate(`/boards/${boardId}/wikis`);
      } catch {
        // Error is already handled by hook with toast
      }
    }
  };

  if (!wiki) {
    return (
      <div className="space-y-6">
        <WidePageLayout>
          <div className="text-center py-12">
            <div className="text-gray-400">Loading wiki...</div>
          </div>
        </WidePageLayout>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <WidePageLayout>
        <div>
          <Link
            to={`/boards/${boardId}/wikis`}
            className="text-gray-400 hover:text-white transition-colors text-sm"
          >
            ← Back to Wikis
          </Link>
          <div className="flex items-center justify-between mt-2">
            <div>
              <h1 className="text-3xl font-bold text-white">{wiki.name}</h1>
              {wiki.slug && <span className="text-gray-400 text-sm">/{wiki.slug}</span>}
            </div>
            <div className="flex gap-2">
              <Link
                to={`/boards/${boardId}/wikis/${wiki.id}/edit`}
                className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
              >
                <span className="w-4 h-4">
                  <Edit2Icon />
                </span>
                Edit
              </Link>
              <button
                onClick={handleDelete}
                className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
              >
                <span className="w-4 h-4">
                  <Trash2Icon />
                </span>
                Delete
              </button>
            </div>
          </div>
        </div>
      </WidePageLayout>

      {/* Content */}
      <WidePageLayout>
        <div className="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
          <div className="p-6">
            {/* Summary */}
            {wiki.summary && (
              <div className="mb-6 pb-6 border-b border-gray-700">
                <h2 className="text-lg font-semibold text-white mb-2">Summary</h2>
                <p className="text-gray-300">{wiki.summary}</p>
              </div>
            )}

            {/* Rich Text Content */}
            {wiki.content && Array.isArray(wiki.content) && wiki.content.length > 0 && (
              <div className="mb-6 pb-6 border-b border-gray-700">
                <h2 className="text-lg font-semibold text-white mb-2">Content</h2>
                <div className="bg-gray-900 rounded-lg p-6 border border-gray-700">
                  <RichTextContent content={wiki.content} />
                </div>
              </div>
            )}

            {/* Tags */}
            {wiki.tags && wiki.tags.length > 0 && (
              <div className="mb-6 pb-6 border-b border-gray-700">
                <h2 className="text-lg font-semibold text-white mb-3">Tags</h2>
                <div className="flex flex-wrap gap-2">
                  {wiki.tags.map((tag, index) => (
                    <span
                      key={index}
                      className="px-3 py-1 bg-blue-600 text-white text-sm rounded-full"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            )}

            {/* Metadata */}
            <div className="pt-6 border-t border-gray-700">
              <h2 className="text-lg font-semibold text-white mb-3">Metadata</h2>
              <div className="space-y-2 text-sm">
                {wiki.category && (
                  <div className="flex items-center gap-2">
                    <span className="text-gray-400 w-24">Category:</span>
                    <span className="px-2 py-1 bg-gray-700 text-gray-300 rounded text-sm">
                      {wiki.category}
                    </span>
                  </div>
                )}
                {wiki.created_by && (
                  <div className="flex items-center gap-2">
                    <span className="text-gray-400 w-24">Created By:</span>
                    <span className="text-gray-300">User #{wiki.created_by}</span>
                  </div>
                )}
                {wiki.updated_by && (
                  <div className="flex items-center gap-2">
                    <span className="text-gray-400 w-24">Updated By:</span>
                    <span className="text-gray-300">User #{wiki.updated_by}</span>
                  </div>
                )}
                <div className="flex items-center gap-2">
                  <span className="text-gray-400 w-24">Created:</span>
                  <span className="text-gray-300">
                    {wiki.created_at ? new Date(wiki.created_at).toLocaleString() : 'N/A'}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-gray-400 w-24">Updated:</span>
                  <span className="text-gray-300">
                    {wiki.updated_at ? new Date(wiki.updated_at).toLocaleString() : 'N/A'}
                  </span>
                </div>
              </div>
            </div>

            {/* Linked Entities Section */}
            <div className="pt-6 border-t border-gray-700 mt-6">
              <h2 className="text-lg font-semibold text-white mb-3">Linked Entities</h2>
              <div className="text-center py-8 text-gray-400">
                <div className="text-4xl mb-2">🔗</div>
                <p>This wiki can be linked to cards and other entities</p>
              </div>
            </div>
          </div>
        </div>
      </WidePageLayout>
    </div>
  );
}

export default WikiDetail;