import { useEffect, useState } from "react";
import { codeToHtml } from "shiki";

export function FeaturesSection() {
  const [highlightedCode, setHighlightedCode] = useState<string>("");
  const [highlightedGraphQLCode, setHighlightedGraphQLCode] = useState<string>("");

  const codeExample = `const resp = await client.com.recordcollector.album.getRecords({
  where: { artist: { eq: "Nirvana" } },
  sortBy: [{ field: "releaseDate", direction: "desc" }]
});`;

  const graphQLExample = `query MyGalleries {
  socialGrainGalleries(
    where: { actorHandle: { eq: "chadtmiller.com" } }
  ) {
    title
    socialGrainFavoritesCount  # Reverse: all favorites
    socialGrainGalleryItems {   # Reverse: all items
      position
      socialGrainPhoto {        # Forward: follow item→photo
        alt
        aspectRatio
        socialGrainPhotoExifs { # Reverse: photo EXIF data
          fNumber
          iSO
        }
      }
    }
  }
}`;

  useEffect(() => {
    const generateHighlightedCode = async () => {
      const html = await codeToHtml(codeExample, {
        lang: "typescript",
        theme: "ayu-dark",
      });

      const styledCode = html.replace(
        '<pre class="shiki',
        '<pre class="shiki !p-2 !m-0 overflow-x-auto !text-[10px]',
      );

      setHighlightedCode(styledCode);
    };

    generateHighlightedCode();
  }, [codeExample]);

  useEffect(() => {
    const generateGraphQLCode = async () => {
      const html = await codeToHtml(graphQLExample, {
        lang: "graphql",
        theme: "ayu-dark",
      });

      const styledCode = html.replace(
        '<pre class="shiki',
        '<pre class="shiki !p-2 !m-0 overflow-x-auto !text-[10px]',
      );

      setHighlightedGraphQLCode(styledCode);
    };

    generateGraphQLCode();
  }, [graphQLExample]);

  return (
    <div className="mb-12">
      <div className="space-y-4">
        {/* Feature 1 */}
        <div className="border-l-2 border-blue-400/30 pl-3">
          <div className="flex items-baseline gap-2 mb-1">
            <span className="text-xs text-zinc-600 font-medium">01</span>
            <h3 className="text-sm font-medium text-white">Auto-Indexing Engine</h3>
          </div>
          <p className="text-xs text-zinc-500 leading-relaxed">
            Automatically discover and index records matching your lexicons.
            Real-time data sync from the AT Protocol firehose.
          </p>
        </div>

        {/* Feature 2 */}
        <div className="border-l-2 border-blue-400/30 pl-3">
          <div className="flex items-baseline gap-2 mb-1">
            <span className="text-xs text-zinc-600 font-medium">02</span>
            <h3 className="text-sm font-medium text-white">Schema Management</h3>
          </div>
          <p className="text-xs text-zinc-500 leading-relaxed">
            Deploy lexicons that instantly become queryable collections.
            Built-in validation ensures your schemas work correctly from day one.
          </p>
        </div>

        {/* Feature 3 */}
        <div className="border-l-2 border-blue-400/30 pl-3">
          <div className="flex items-baseline gap-2 mb-1">
            <span className="text-xs text-zinc-600 font-medium">03</span>
            <h3 className="text-sm font-medium text-white">Type-Safe APIs</h3>
          </div>
          <div className="rounded border border-zinc-800 overflow-hidden mb-2">
            {highlightedCode
              ? <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
              : (
                <pre className="p-2 text-[10px] overflow-x-auto bg-zinc-900">
                  <code className="text-zinc-400">{codeExample}</code>
                </pre>
              )}
          </div>
          <p className="text-xs text-zinc-500 leading-relaxed">
            Generated clients with getRecords(), createRecord(), updateRecord(), and deleteRecord().
            Full TypeScript support with filtering, sorting, and pagination.
          </p>
        </div>

        {/* Feature 4 */}
        <div className="border-l-2 border-blue-400/30 pl-3">
          <div className="flex items-baseline gap-2 mb-1">
            <span className="text-xs text-zinc-600 font-medium">04</span>
            <h3 className="text-sm font-medium text-white">Lexicon-to-GraphQL Mapping</h3>
          </div>
          <div className="rounded border border-zinc-800 overflow-hidden mb-2">
            {highlightedGraphQLCode
              ? <div dangerouslySetInnerHTML={{ __html: highlightedGraphQLCode }} />
              : (
                <pre className="p-2 text-[10px] overflow-x-auto bg-zinc-900">
                  <code className="text-zinc-400">{graphQLExample}</code>
                </pre>
              )}
          </div>
          <p className="text-xs text-zinc-500 leading-relaxed">
            Lexicons map directly to GraphQL schema with automatic relationship resolution.
            Forward joins traverse at-uri references. Reverse joins find all records pointing back.
            Query deeply nested data structures in a single efficient request.
          </p>
        </div>

        {/* Feature 5 */}
        <div className="border-l-2 border-blue-400/30 pl-3">
          <div className="flex items-baseline gap-2 mb-1">
            <span className="text-xs text-zinc-600 font-medium">05</span>
            <h3 className="text-sm font-medium text-white">User Authentication</h3>
          </div>
          <p className="text-xs text-zinc-500 leading-relaxed">
            Production-ready OAuth 2.0 with PKCE and Device Code flows.
            Automatic token management, refresh handling, and secure session storage.
          </p>
        </div>
      </div>
    </div>
  );
}