/**
 * Globals Preview — live preview panel showing all tokens in context
 *
 * Renders sample UI elements (buttons, headings, body text, cards, badges)
 * styled with the current global tokens so the user can see changes in real-time.
 */

import { Card, CardContent } from '@/components/ui/card'
import { GlobalStyles, GlobalColor, GlobalTypography } from '../config'
import { getAllGoogleFontsPreviewUrls } from '@/lib/google-fonts'

interface GlobalsPreviewProps {
  settings: GlobalStyles
}

export function GlobalsPreview({ settings }: GlobalsPreviewProps) {
  const { colors, typography } = settings
  const getColor = (id: string) => colors.find((c: GlobalColor) => c.id === id)?.value ?? '#888'
  const getTypo = (id: string) => typography.find((t: GlobalTypography) => t.id === id)

  const headingTypo = getTypo('headings')
  const bodyTypo = getTypo('body')

  const headingStyle: React.CSSProperties = {
    fontFamily: headingTypo?.fontFamily || 'inherit',
    fontWeight: Number(headingTypo?.fontWeight || 600),
    fontSize: headingTypo?.fontSize ? `${headingTypo.fontSize}px` : undefined,
    lineHeight: headingTypo?.lineHeight || undefined,
    letterSpacing: headingTypo?.letterSpacing || undefined,
    textTransform: (headingTypo?.textTransform || 'none') as React.CSSProperties['textTransform'],
    color: getColor('text'),
  }

  const bodyStyle: React.CSSProperties = {
    fontFamily: bodyTypo?.fontFamily || 'inherit',
    fontWeight: Number(bodyTypo?.fontWeight || 400),
    fontSize: bodyTypo?.fontSize ? `${bodyTypo.fontSize}px` : '14px',
    lineHeight: bodyTypo?.lineHeight || '1.6',
    letterSpacing: bodyTypo?.letterSpacing || undefined,
    textTransform: (bodyTypo?.textTransform || 'none') as React.CSSProperties['textTransform'],
    color: getColor('text'),
  }

  return (
    <div className="space-y-6">
      {/* Google Fonts */}
      {getAllGoogleFontsPreviewUrls().map((url, i) => (
        <link key={i} rel="stylesheet" href={url} />
      ))}

      {/* ── Color Swatches ────────────────────────────────── */}
      <Card>
        <CardContent className="pt-6">
          <h3 className="text-sm font-medium text-muted-foreground mb-4">Color Palette</h3>
          <div className="flex flex-wrap gap-3">
            {colors.map((c: GlobalColor) => (
              <div key={c.id} className="flex flex-col items-center gap-1.5">
                <div
                  className="h-12 w-12 rounded-lg border shadow-sm"
                  style={{ backgroundColor: c.value }}
                />
                <span className="text-[11px] text-muted-foreground leading-none">{c.name}</span>
                <span className="text-[10px] font-mono text-muted-foreground/60">{c.value}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* ── Typography Preview ────────────────────────────── */}
      <Card>
        <CardContent className="pt-6 space-y-5">
          <h3 className="text-sm font-medium text-muted-foreground mb-4">Typography Preview</h3>

          {/* Heading samples */}
          <div
            className="rounded-lg p-4"
            style={{ backgroundColor: getColor('background') }}
          >
            <h1 style={{ ...headingStyle, fontSize: headingTypo?.fontSize ? `${Number(headingTypo.fontSize) + 10}px` : '28px' }}>
              Heading Level 1
            </h1>
            <h2 style={{ ...headingStyle, fontSize: headingTypo?.fontSize ? `${Number(headingTypo.fontSize) + 4}px` : '22px', marginTop: 8 }}>
              Heading Level 2
            </h2>
            <h3 style={{ ...headingStyle, fontSize: headingTypo?.fontSize ? `${headingTypo.fontSize}px` : '18px', marginTop: 8 }}>
              Heading Level 3
            </h3>
          </div>

          {/* Body sample */}
          <div
            className="rounded-lg p-4"
            style={{ backgroundColor: getColor('background') }}
          >
            <p style={bodyStyle}>
              This is how your body text will appear across all Swift Commerce features.
              The quick brown fox jumps over the lazy dog. Typography settings include
              font family, weight, size, line height, letter spacing, and text transform.
            </p>
            <p style={{ ...bodyStyle, marginTop: 8, opacity: 0.7 }}>
              Secondary body text with reduced emphasis. Product descriptions,
              form labels, and notification messages will use this typography.
            </p>
          </div>
        </CardContent>
      </Card>

      {/* ── UI Components Sample ──────────────────────────── */}
      <Card>
        <CardContent className="pt-6 space-y-5">
          <h3 className="text-sm font-medium text-muted-foreground mb-4">UI Components Preview</h3>

          {/* Buttons */}
          <div className="flex flex-wrap gap-3">
            <button
              className="px-5 py-2.5 rounded-lg text-sm font-medium text-white transition-colors"
              style={{
                backgroundColor: getColor('primary'),
                fontFamily: bodyTypo?.fontFamily || 'inherit',
              }}
            >
              Primary Button
            </button>
            <button
              className="px-5 py-2.5 rounded-lg text-sm font-medium text-white transition-colors"
              style={{
                backgroundColor: getColor('secondary'),
                fontFamily: bodyTypo?.fontFamily || 'inherit',
              }}
            >
              Secondary Button
            </button>
            <button
              className="px-5 py-2.5 rounded-lg text-sm font-medium border transition-colors"
              style={{
                borderColor: getColor('primary'),
                color: getColor('primary'),
                fontFamily: bodyTypo?.fontFamily || 'inherit',
              }}
            >
              Outline Button
            </button>
          </div>

          {/* Badges */}
          <div className="flex flex-wrap gap-2">
            <span
              className="px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
              style={{ backgroundColor: getColor('success') }}
            >
              In Stock
            </span>
            <span
              className="px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
              style={{ backgroundColor: getColor('error') }}
            >
              Out of Stock
            </span>
            <span
              className="px-2.5 py-0.5 rounded-full text-xs font-medium"
              style={{
                backgroundColor: getColor('accent'),
                color: getColor('text'),
              }}
            >
              Featured
            </span>
          </div>

          {/* Sample card */}
          <div
            className="rounded-lg border p-4 max-w-xs"
            style={{ backgroundColor: getColor('background') }}
          >
            <div className="flex items-center gap-3">
              <div
                className="h-12 w-12 rounded-lg"
                style={{ backgroundColor: getColor('accent') }}
              />
              <div>
                <h4 style={{ ...headingStyle, fontSize: '15px', margin: 0 }}>
                  Sample Product
                </h4>
                <p style={{ ...bodyStyle, fontSize: '13px', margin: 0, opacity: 0.7 }}>
                  Product description text
                </p>
              </div>
            </div>
            <button
              className="w-full mt-3 px-4 py-2 rounded-md text-sm font-medium text-white"
              style={{
                backgroundColor: getColor('primary'),
                fontFamily: bodyTypo?.fontFamily || 'inherit',
              }}
            >
              Add to Cart
            </button>
          </div>
        </CardContent>
      </Card>

      {/* ── Custom Typography Tokens ──────────────────────── */}
      {typography.filter((t: GlobalTypography) => !t.isDefault).length > 0 && (
        <Card>
          <CardContent className="pt-6 space-y-4">
            <h3 className="text-sm font-medium text-muted-foreground mb-4">Custom Typography</h3>
            {typography
              .filter((t: GlobalTypography) => !t.isDefault)
              .map((t: GlobalTypography) => (
                <div key={t.id} className="rounded-lg border p-4">
                  <p className="text-xs text-muted-foreground mb-1">{t.name}</p>
                  <p
                    style={{
                      fontFamily: t.fontFamily || 'inherit',
                      fontWeight: Number(t.fontWeight || 400),
                      fontSize: t.fontSize ? `${t.fontSize}px` : '16px',
                      lineHeight: t.lineHeight || '1.5',
                      letterSpacing: t.letterSpacing || undefined,
                      textTransform: (t.textTransform || 'none') as React.CSSProperties['textTransform'],
                      color: getColor('text'),
                    }}
                  >
                    The quick brown fox jumps over the lazy dog.
                  </p>
                </div>
              ))}
          </CardContent>
        </Card>
      )}
    </div>
  )
}