"use client";

import { Coffee } from "lucide-react";
import { accentDerivedColors } from "@/lib/brand";

interface BrandPreviewProps {
  name: string;
  tagline: string;
  logoUrl: string;
  accentColor: string;
}

function PreviewLogo({
  name,
  logoUrl,
  size,
}: {
  name: string;
  logoUrl: string;
  size: "sm" | "md";
}) {
  const box = size === "md" ? "h-9 w-9 rounded-lg" : "h-8 w-8 rounded-md";
  const icon = size === "md" ? "h-4 w-4" : "h-3.5 w-3.5";

  if (logoUrl) {
    return (
      // eslint-disable-next-line @next/next/no-img-element -- preview
      <img
        src={logoUrl}
        alt={name}
        className={`${box} object-contain`}
      />
    );
  }

  return (
    <div className={`${box} flex items-center justify-center bg-[var(--accent)]`}>
      <Coffee className={`${icon} text-[var(--accent-fg)]`} strokeWidth={2.5} />
    </div>
  );
}

export default function BrandPreview({
  name,
  tagline,
  logoUrl,
  accentColor,
}: BrandPreviewProps) {
  const colors = accentDerivedColors(accentColor);
  const previewStyle = {
    "--accent": colors.accent,
    "--accent-hover": colors.accentHover,
    "--accent-muted": colors.accentMuted,
    "--accent-glow": colors.accentGlow,
    "--accent-fg": colors.accentFg,
  } as React.CSSProperties;

  return (
    <div
      className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)]"
      style={previewStyle}
    >
      <div className="border-b border-[var(--border)] px-4 py-3">
        <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-faint)]">
          Live preview
        </p>
      </div>
      <div className="grid sm:grid-cols-2">
        <div className="relative min-h-[220px] bg-[var(--bg-surface)] p-6">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_30%_20%,var(--accent-muted),transparent_60%)]" />
          <div className="relative z-10 flex h-full flex-col justify-between">
            <div className="flex items-center">
              <PreviewLogo name={name} logoUrl={logoUrl} size="md" />
            </div>
            <div className="space-y-2">
              <p className="text-lg font-semibold leading-snug">
                {tagline || "Your team, organized with care."}
              </p>
              <p className="text-xs text-[var(--text-faint)]">Sign-in panel preview</p>
            </div>
          </div>
        </div>

        <div className="flex min-h-[220px] flex-col justify-center border-t border-[var(--border)] p-6 sm:border-s sm:border-t-0">
          <div className="mx-auto w-full max-w-[220px] space-y-4">
            <div className="flex items-center sm:hidden">
              <PreviewLogo name={name} logoUrl={logoUrl} size="sm" />
            </div>
            <div>
              <p className="text-sm font-semibold">Sign in</p>
              <p className="mt-1 text-xs text-[var(--text-muted)]">
                Welcome back to {name || "your app"}
              </p>
            </div>
            <div className="space-y-2">
              <div className="h-8 rounded-lg border border-[var(--border)] bg-[var(--bg)]" />
              <div className="h-8 rounded-lg border border-[var(--border)] bg-[var(--bg)]" />
            </div>
            <div
              className="h-9 rounded-lg text-center text-xs font-semibold leading-9"
              style={{ background: colors.accent, color: colors.accentFg }}
            >
              Sign in
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}