'use client'

import type { ResolvedAdminBrand } from '@actuate-media/cms-core/appearance'

import type { UseAppearanceSettings } from './useAppearanceSettings.js'

function Initials({ initials, size = 'h-8 w-8 text-sm' }: { initials: string; size?: string }) {
  return (
    <span
      className={`bg-brand text-brand-foreground inline-flex shrink-0 items-center justify-center rounded-md font-medium ${size}`}
      aria-hidden="true"
    >
      {initials}
    </span>
  )
}

/** Expanded sidebar lockup preview (primary → mark+title → initials). */
function SidebarPreview({ admin, dark }: { admin: ResolvedAdminBrand; dark?: boolean }) {
  const logo = dark && admin.dark ? admin.dark : admin.primary
  return (
    <div
      className={`flex h-14 items-center gap-2.5 rounded-md border px-3 ${
        dark ? 'border-border bg-foreground' : 'bg-sidebar border-sidebar-border'
      }`}
    >
      {logo ? (
        <img src={logo.url} alt={logo.alt} className="h-8 w-auto object-contain" />
      ) : admin.mark ? (
        <>
          <img src={admin.mark.url} alt={admin.mark.alt} className="h-8 w-8 object-contain" />
          <span className={dark ? 'text-background text-sm' : 'text-sidebar-foreground text-sm'}>
            {admin.initials}
          </span>
        </>
      ) : (
        <>
          <Initials initials={admin.initials} />
          <span className={dark ? 'text-background text-sm' : 'text-sidebar-foreground text-sm'}>
            Admin
          </span>
        </>
      )}
    </div>
  )
}

function PreviewTile({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="space-y-1.5">
      <span className="text-muted-foreground text-xs font-medium">{label}</span>
      {children}
    </div>
  )
}

export function BrandPreviewCard({ s }: { s: UseAppearanceSettings }) {
  const { admin, public: pub, faviconUrl } = s.preview
  return (
    <section className="border-border bg-card rounded-lg border p-6">
      <header className="mb-4 flex items-center justify-between gap-2">
        <div>
          <h3 className="text-foreground text-lg font-medium">Brand preview</h3>
          <p className="text-muted-foreground mt-0.5 text-sm">
            How your brand renders across the admin and public site.
          </p>
        </div>
        {s.dirty && (
          <span className="text-warning bg-warning/10 border-warning/30 rounded-md border px-2 py-0.5 text-xs">
            Unsaved
          </span>
        )}
      </header>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <PreviewTile label="Admin sidebar">
          <SidebarPreview admin={admin} />
        </PreviewTile>

        <PreviewTile label="Collapsed sidebar">
          <div className="bg-sidebar border-sidebar-border flex h-14 w-14 items-center justify-center rounded-md border">
            {admin.mark ? (
              <img src={admin.mark.url} alt={admin.mark.alt} className="h-8 w-8 object-contain" />
            ) : (
              <Initials initials={admin.initials} />
            )}
          </div>
        </PreviewTile>

        <PreviewTile label="Dark mode">
          <SidebarPreview admin={admin} dark />
        </PreviewTile>

        <PreviewTile label="Public header">
          <div className="border-border bg-background flex h-14 items-center gap-2.5 rounded-md border px-3">
            {pub.primary ? (
              <img
                src={pub.primary.url}
                alt={pub.primary.alt}
                className="h-8 w-auto object-contain"
              />
            ) : pub.mark ? (
              <>
                <img src={pub.mark.url} alt={pub.mark.alt} className="h-8 w-8 object-contain" />
                <span className="text-foreground text-sm">{pub.initials}</span>
              </>
            ) : (
              <span className="text-foreground text-sm font-medium">{pub.initials}</span>
            )}
          </div>
        </PreviewTile>

        <PreviewTile label="Favicon">
          <div className="border-border bg-muted flex h-14 w-14 items-center justify-center rounded-md border p-2">
            {faviconUrl ? (
              <img src={faviconUrl} alt="Favicon preview" className="h-8 w-8 object-contain" />
            ) : (
              <span className="text-muted-foreground text-xs">None</span>
            )}
          </div>
        </PreviewTile>
      </div>
    </section>
  )
}
