"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { CodeBlock } from "./code-block";
import { Sun, Moon, Check } from "lucide-react";
import type { UsageData } from "@/lib/component-usage";

// Color theme options for preview
type PreviewColorTheme = "default" | "blue" | "green" | "violet" | "rose" | "orange";

const colorThemes: { id: PreviewColorTheme; name: string; color: string }[] = [
  { id: "default", name: "Neutral", color: "#71717a" },
  { id: "blue", name: "Blue", color: "#3b82f6" },
  { id: "green", name: "Green", color: "#22c55e" },
  { id: "violet", name: "Violet", color: "#8b5cf6" },
  { id: "rose", name: "Rose", color: "#f43f5e" },
  { id: "orange", name: "Orange", color: "#f97316" },
];

interface CodeTab {
  label: string;
  code: string;
  language?: string;
  highlightedHtml?: string;
}

interface ComponentPreviewProps {
  children: React.ReactNode;
  codeTabs: CodeTab[];
  usage?: UsageData;
  className?: string;
}

export function ComponentPreview({
  children,
  codeTabs,
  usage,
  className,
}: ComponentPreviewProps) {
  const [activeTab, setActiveTab] = React.useState<"preview" | "usage" | "code">("preview");
  const [activeCodeTab, setActiveCodeTab] = React.useState(0);
  const [isDark, setIsDark] = React.useState(true);
  const [colorTheme, setColorTheme] = React.useState<PreviewColorTheme>("default");
  const [colorDropdownOpen, setColorDropdownOpen] = React.useState(false);
  const dropdownRef = React.useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  React.useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setColorDropdownOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Close on escape
  React.useEffect(() => {
    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setColorDropdownOpen(false);
      }
    }
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, []);

  const currentTheme = colorThemes.find((t) => t.id === colorTheme);

  return (
    <div
      className={cn(
        "overflow-hidden rounded-2xl border border-border bg-card/30",
        className
      )}
    >
      {/* Tab header */}
      <div className="flex items-center border-b border-border bg-card/50">
        <button
          onClick={() => setActiveTab("preview")}
          className={cn(
            "px-4 py-2.5 text-sm font-medium transition",
            activeTab === "preview"
              ? "border-b-2 border-primary text-primary"
              : "text-muted-foreground hover:text-foreground"
          )}
        >
          Preview
        </button>
        <button
          onClick={() => setActiveTab("usage")}
          className={cn(
            "px-4 py-2.5 text-sm font-medium transition",
            activeTab === "usage"
              ? "border-b-2 border-primary text-primary"
              : "text-muted-foreground hover:text-foreground"
          )}
        >
          Usage
        </button>
        <button
          onClick={() => setActiveTab("code")}
          className={cn(
            "px-4 py-2.5 text-sm font-medium transition",
            activeTab === "code"
              ? "border-b-2 border-primary text-primary"
              : "text-muted-foreground hover:text-foreground"
          )}
        >
          Code
        </button>
        {activeTab === "preview" && (
          <div className="ml-auto flex items-center gap-1 pr-2">
            {/* Color theme picker */}
            <div className="relative" ref={dropdownRef}>
              <button
                onClick={() => setColorDropdownOpen(!colorDropdownOpen)}
                className={cn(
                  "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition",
                  "text-muted-foreground hover:bg-muted hover:text-foreground",
                  colorDropdownOpen && "bg-muted text-foreground"
                )}
                title="Select color theme for preview"
              >
                <span
                  className="h-3 w-3 rounded-full ring-1 ring-border"
                  style={{ backgroundColor: currentTheme?.color }}
                />
                <span className="hidden sm:inline">{currentTheme?.name}</span>
              </button>

              {colorDropdownOpen && (
                <div
                  className={cn(
                    "absolute right-0 top-full mt-1 z-50",
                    "min-w-[140px] rounded-lg border border-border",
                    "bg-card/95 backdrop-blur-xl shadow-lg",
                    "animate-in fade-in-0 zoom-in-95 duration-100"
                  )}
                >
                  <div className="p-1">
                    {colorThemes.map((t) => (
                      <button
                        key={t.id}
                        onClick={() => {
                          setColorTheme(t.id);
                          setColorDropdownOpen(false);
                        }}
                        className={cn(
                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
                          "text-xs text-foreground transition-colors",
                          "hover:bg-accent",
                          colorTheme === t.id && "bg-accent"
                        )}
                      >
                        <span
                          className="h-3 w-3 rounded-full ring-1 ring-border"
                          style={{ backgroundColor: t.color }}
                        />
                        <span className="flex-1 text-left">{t.name}</span>
                        {colorTheme === t.id && (
                          <Check className="h-3 w-3 text-primary" />
                        )}
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* Light/Dark toggle */}
            <button
              onClick={() => setIsDark(!isDark)}
              className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground transition hover:bg-muted hover:text-foreground"
              title={isDark ? "Switch to light mode" : "Switch to dark mode"}
            >
              {isDark ? (
                <>
                  <Sun className="h-3.5 w-3.5" />
                  <span className="hidden sm:inline">Light</span>
                </>
              ) : (
                <>
                  <Moon className="h-3.5 w-3.5" />
                  <span className="hidden sm:inline">Dark</span>
                </>
              )}
            </button>
          </div>
        )}
      </div>

      {/* Preview panel */}
      {activeTab === "preview" && (
        <div
          className={cn(
            "flex min-h-[200px] items-center justify-center p-8 transition-colors duration-200",
            isDark ? "preview-dark" : "preview-light"
          )}
          data-color-theme={colorTheme !== "default" ? colorTheme : undefined}
          style={{
            backgroundColor: isDark
              ? "rgb(12 12 15)"
              : "rgb(250 250 249)",
          }}
        >
          <div className="flex flex-wrap items-center justify-center gap-4">
            {children}
          </div>
        </div>
      )}

      {/* Usage panel */}
      {activeTab === "usage" && (
        <div className="max-h-[600px] overflow-y-auto p-6 space-y-8">
          {usage ? (
            <>
              {/* Import Statement */}
              <div>
                <h3 className="text-sm font-semibold text-foreground mb-3">Import</h3>
                <div className="rounded-lg bg-background border border-border p-4">
                  <code className="font-mono text-sm text-primary">{usage.importStatement}</code>
                </div>
              </div>

              {/* Basic Usage */}
              <div>
                <h3 className="text-sm font-semibold text-foreground mb-3">Basic Usage</h3>
                <div className="rounded-lg bg-background border border-border p-4 overflow-x-auto">
                  <pre className="font-mono text-sm text-muted-foreground whitespace-pre-wrap">{usage.basicExample}</pre>
                </div>
              </div>

              {/* Props Table */}
              {usage.props && usage.props.length > 0 && (
                <div>
                  <h3 className="text-sm font-semibold text-foreground mb-3">Props</h3>
                  <div className="rounded-lg border border-border overflow-hidden">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="bg-card/80 border-b border-border">
                          <th className="text-left px-4 py-2.5 font-medium text-foreground">Prop</th>
                          <th className="text-left px-4 py-2.5 font-medium text-foreground">Type</th>
                          <th className="text-left px-4 py-2.5 font-medium text-foreground">Default</th>
                          <th className="text-left px-4 py-2.5 font-medium text-foreground">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        {usage.props.map((prop, index) => (
                          <tr
                            key={prop.name}
                            className={cn(
                              "border-b border-border/50 last:border-0",
                              index % 2 === 0 ? "bg-card/30" : "bg-card/10"
                            )}
                          >
                            <td className="px-4 py-2.5">
                              <code className="font-mono text-primary">{prop.name}</code>
                            </td>
                            <td className="px-4 py-2.5">
                              <code className="font-mono text-xs text-primary">{prop.type}</code>
                            </td>
                            <td className="px-4 py-2.5">
                              <code className="font-mono text-xs text-muted-foreground">{prop.default || "-"}</code>
                            </td>
                            <td className="px-4 py-2.5 text-muted-foreground">{prop.description}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}

              {/* Variations */}
              {usage.variations && (
                <div>
                  <h3 className="text-sm font-semibold text-foreground mb-3">Common Patterns</h3>
                  <div className="rounded-lg border border-border overflow-hidden">
                    <div className="bg-background p-4 overflow-x-auto">
                      <pre className="font-mono text-sm text-muted-foreground whitespace-pre-wrap">{usage.variations}</pre>
                    </div>
                  </div>
                </div>
              )}
            </>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              <p>Usage documentation coming soon.</p>
            </div>
          )}
        </div>
      )}

      {/* Code panel */}
      {activeTab === "code" && (
        <div>
          {/* Code file tabs */}
          {codeTabs.length > 1 && (
            <div className="flex gap-1 border-b border-border bg-card/80 px-2 pt-2">
              {codeTabs.map((tab, index) => (
                <button
                  key={tab.label}
                  onClick={() => setActiveCodeTab(index)}
                  className={cn(
                    "rounded-t-lg px-3 py-1.5 font-mono text-xs transition",
                    activeCodeTab === index
                      ? "bg-muted text-foreground"
                      : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
                  )}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          )}

          {/* Active code block */}
          {codeTabs[activeCodeTab] && (
            <CodeBlock
              code={codeTabs[activeCodeTab].code}
              language={codeTabs[activeCodeTab].language}
              highlightedHtml={codeTabs[activeCodeTab].highlightedHtml}
              className="rounded-none border-0"
            />
          )}
        </div>
      )}
    </div>
  );
}
Component Preview

Dependencies

Files

Installation
