"use client"

import { useState } from "react"
import { typographyScales, lineHeights, letterSpacings } from "@/lib/typography"
import { useDesign } from "@/contexts/design-context"
import { SectionHeading } from "@/components/ui/section-heading"

// Add minimal prop to the component
interface TypographySectionProps {
  minimal?: boolean
}

const typographyItems = [
  {
    name: "Display",
    size: "text-5xl",
    weight: "font-semibold tracking-tight",
    sample: "The quick brown fox jumps over the lazy dog",
  },
  {
    name: "Heading 1",
    size: "text-4xl",
    weight: "font-semibold tracking-tight",
    sample: "The quick brown fox jumps over the lazy dog",
  },
  {
    name: "Heading 2",
    size: "text-3xl",
    weight: "font-semibold tracking-tight",
    sample: "The quick brown fox jumps over the lazy dog",
  },
  {
    name: "Heading 3",
    size: "text-2xl",
    weight: "font-semibold",
    sample: "The quick brown fox jumps over the lazy dog",
  },
  {
    name: "Heading 4",
    size: "text-xl",
    weight: "font-semibold",
    sample: "The quick brown fox jumps over the lazy dog",
  },
  { name: "Large", size: "text-lg", weight: "font-normal", sample: "The quick brown fox jumps over the lazy dog" },
  { name: "Body", size: "text-base", weight: "font-normal", sample: "The quick brown fox jumps over the lazy dog" },
  { name: "Small", size: "text-sm", weight: "font-normal", sample: "The quick brown fox jumps over the lazy dog" },
  { name: "Caption", size: "text-xs", weight: "font-normal", sample: "The quick brown fox jumps over the lazy dog" },
]

export function TypographySection({ minimal = false }: TypographySectionProps) {
  const { font } = useDesign()
  const [lineHeightState, setLineHeight] = useState("normal")
  const [letterSpacingState, setLetterSpacing] = useState("normal")
  const [typographyScaleState, setTypographyScale] = useState("classic")

  // Extract and clean the font name
  const cleanFontName = font.split(" ")[0].replace(/,/g, "")

  // If minimal is true, return a simplified version
  if (minimal) {
    return (
      <div>
        <h3 className="text-xl font-medium mb-4">Typography</h3>
        <div className="flex flex-col gap-1">
          <h1 className="text-2xl font-bold" style={{ fontFamily: font }}>
            Heading 1
          </h1>
          <h2 className="text-xl font-semibold" style={{ fontFamily: font }}>
            Heading 2
          </h2>
          <p className="text-sm" style={{ fontFamily: font }}>
            Body text sample
          </p>
        </div>
      </div>
    )
  }

  // Set default values for other properties
  const lineHeight = "normal"
  const letterSpacing = "normal"
  const typographyScale = "classic"

  return (
    <section id="typography" className="scroll-mt-16 typography-content">
      <div style={{ fontFamily: font }}>
        <SectionHeading title="Typography" />
      </div>

      {/* Font Preview */}
      <div className="mb-12 mt-12">
        <div className="text-8xl font-bold text-foreground mb-8 leading-none" style={{ fontFamily: font }}>
          {cleanFontName}
        </div>
      </div>

      <div className="space-y-12">
        <div className="space-y-8">
          <div className="space-y-0">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-xs font-medium text-muted-foreground text-left py-3 w-32">Name</th>
                  <th className="text-xs font-medium text-muted-foreground text-left py-3 w-32">Size</th>
                  <th className="text-xs font-medium text-muted-foreground text-left py-3">Example</th>
                </tr>
              </thead>
              <tbody>
                {typographyItems.map((item, index) => (
                  <tr key={item.name} className="border-b">
                    <td className="py-3 text-xs font-medium">{item.name}</td>
                    <td className="py-3 text-xs text-muted-foreground font-mono">{item.size}</td>
                    <td className="py-3">
                      <div
                        className={`${item.size} ${item.weight} text-foreground`}
                        style={{
                          fontFamily: font,
                          lineHeight: lineHeights[lineHeight as keyof typeof lineHeights],
                          letterSpacing: letterSpacings[letterSpacing as keyof typeof letterSpacings],
                          fontSize:
                            typographyScales[typographyScale as keyof typeof typographyScales][
                              item.size
                                .replace("text-", "")
                                .replace("xl", "xl") as keyof typeof typographyScales.classic
                            ],
                        }}
                      >
                        {item.sample}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="mt-16">
          <div
            className="space-y-6 p-6 rounded-md border"
            style={{
              fontFamily: font,
              backgroundColor: "var(--background-primary)",
              borderColor: "hsl(var(--border))",
              color: "var(--text-primary)",
            }}
          >
            <h4
              className="text-sm font-medium mb-4"
              style={{
                fontFamily: font,
                color: "var(--text-primary)",
              }}
            >
              Typography Example
            </h4>

            <div className="prose prose-sm max-w-none" style={{ fontFamily: font }}>
              <h1 className="text-4xl font-semibold tracking-tight mb-4" style={{ color: "var(--text-primary)" }}>
                The Future of Design Systems
              </h1>

              <h2 className="text-3xl font-semibold tracking-tight mb-3" style={{ color: "var(--text-primary)" }}>
                Building for Scale and Consistency
              </h2>

              <p className="text-base leading-relaxed mb-4" style={{ color: "var(--text-primary)" }}>
                Design systems have become the <strong>backbone of modern digital products</strong>. They provide a
                unified language that bridges the gap between design and development, ensuring consistency across all
                touchpoints. <em>When implemented correctly</em>, they can dramatically reduce development time and
                improve user experience.
              </p>

              <h3 className="text-2xl font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
                Key Benefits
              </h3>

              <ul className="list-disc list-inside space-y-2 mb-4" style={{ color: "var(--text-primary)" }}>
                <li>
                  <strong>Consistency:</strong> Unified visual language across products
                </li>
                <li>
                  <strong>Efficiency:</strong> Faster development with reusable components
                </li>
                <li>
                  <strong>Scalability:</strong> Easy to maintain and extend over time
                </li>
                <li>
                  <strong>Collaboration:</strong> Better communication between teams
                </li>
              </ul>

              <h4 className="text-xl font-semibold mb-2" style={{ color: "var(--text-primary)" }}>
                Implementation Strategy
              </h4>

              <p className="text-base leading-relaxed mb-4" style={{ color: "var(--text-primary)" }}>
                Start with{" "}
                <code
                  className="px-1.5 py-0.5 rounded text-sm font-mono"
                  style={{
                    backgroundColor: "var(--background-secondary)",
                    color: "var(--text-primary)",
                    border: "1px solid hsl(var(--border))",
                  }}
                >
                  foundational elements
                </code>{" "}
                like typography, colors, and spacing. Then build up to more complex components. Remember that{" "}
                <mark
                  className="px-1 rounded"
                  style={{
                    backgroundColor: "hsl(var(--primary) / 0.1)",
                    color: "var(--text-primary)",
                  }}
                >
                  documentation is just as important as the code itself
                </mark>
                .
              </p>

              <blockquote
                className="border-l-4 pl-4 italic mb-4"
                style={{
                  borderColor: "hsl(var(--primary))",
                  color: "var(--text-secondary)",
                }}
              >
                "A design system is a product serving products." — Nathan Curtis
              </blockquote>

              <h5 className="text-lg font-semibold mb-2" style={{ color: "var(--text-primary)" }}>
                Getting Started
              </h5>

              <ol className="list-decimal list-inside space-y-2 mb-4" style={{ color: "var(--text-primary)" }}>
                <li>Audit your existing design patterns</li>
                <li>Define your design tokens and principles</li>
                <li>Create a component library with clear documentation</li>
                <li>Establish governance and contribution guidelines</li>
              </ol>

              <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
                <small>Last updated: December 2024 • Reading time: 3 minutes</small>
              </p>

              <div
                className="mt-6 p-4 rounded-md"
                style={{
                  backgroundColor: "var(--background-secondary)",
                  border: "1px solid hsl(var(--border))",
                }}
              >
                <p className="text-xs mb-2" style={{ color: "var(--text-secondary)" }}>
                  Technical Note:
                </p>
                <p className="text-sm" style={{ color: "var(--text-primary)" }}>
                  This example demonstrates various text styles including <strong>bold</strong>, <em>italic</em>,
                  <code
                    className="px-1 py-0.5 rounded text-xs font-mono"
                    style={{
                      backgroundColor: "var(--background-primary)",
                      color: "var(--text-primary)",
                      border: "1px solid hsl(var(--border))",
                    }}
                  >
                    inline code
                  </code>
                  , and different heading levels. All text inherits the selected font family from the design context.
                </p>
              </div>
            </div>
          </div>
        </div>

        <div className="p-4 rounded-md border bg-muted/30">
          <h4 className="text-sm font-medium mb-3" style={{ fontFamily: font }}>
            Usage Guidelines
          </h4>
          <ul className="list-disc list-inside space-y-2 text-xs text-muted-foreground">
            <li style={{ fontFamily: font }}>
              <strong>Hierarchy:</strong> Use headings to establish a clear content hierarchy
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Line length:</strong> Maintain 60-80 characters per line for optimal readability
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Interface text:</strong> Use text-sm (14px) for most interface elements
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Secondary text:</strong> Use text-xs (12px) for captions, labels, and metadata
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Font weights:</strong> Limit to 2-3 weights in a single interface
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Responsive design:</strong> Consider fluid typography for different screen sizes
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Contrast:</strong> Ensure sufficient contrast between text and background
            </li>
            <li style={{ fontFamily: font }}>
              <strong>Consistency:</strong> Use consistent letter spacing and line height throughout
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}