import CheckCircleIcon from "@/assets/report/check-circle.svg?react";
import XCircleIcon from "@/assets/report/x-circle.svg?react";
import { Surface } from "@/components/atoms/Surface";
import type { BrandGuide } from "@/features/plan/types/marketingPlan";

type BrandingVisualIdentityTabProps = {
  data: BrandGuide;
};

export function BrandingVisualIdentityTab({ data }: BrandingVisualIdentityTabProps) {
  return (
    <div className="space-y-8 animate-fade-in-up">
      <div>
        <h3 className="font-serif font-bold text-2xl text-navy-900 mb-4 break-keep">Color Palette</h3>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          {data.colors.map((swatch, i) => (
            <Surface key={`${swatch.name}-${swatch.hex}-${i}`} padding="none" overflowHidden>
              <div className="h-20" style={{ backgroundColor: swatch.hex }} />
              <div className="p-3">
                <p className="font-mono body-14 text-neutral-80">{swatch.hex}</p>
                <p className="title-14 text-navy-900 break-keep">{swatch.name}</p>
                <p className="label-12 text-neutral-60 break-keep">{swatch.usage}</p>
              </div>
            </Surface>
          ))}
        </div>
      </div>

      <div>
        <h3 className="font-serif font-bold text-2xl text-navy-900 mb-4 break-keep">Typography</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {data.fonts.map((spec) => (
            <Surface key={`${spec.family}-${spec.weight}`}>
              <p className="label-12 text-neutral-60 uppercase tracking-wide mb-2 break-keep">{spec.family}</p>
              <p
                className={`mb-3 text-navy-900 break-keep ${
                  spec.weight.toLowerCase().includes("bold") ? "text-2xl font-bold" : "text-lg"
                }`}
                style={{ fontFamily: spec.family }}
              >
                {spec.sampleText}
              </p>
              <p className="label-12 text-neutral-60 break-keep">
                <span className="font-medium text-neutral-80">{spec.weight}</span>
                {" · "}
                {spec.usage}
              </p>
            </Surface>
          ))}
        </div>
      </div>

      <div>
        <h3 className="font-serif font-bold text-2xl text-navy-900 mb-4 break-keep">Logo Rules</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {data.logoRules.map((rule) => (
            <div
              key={rule.rule}
              className={`rounded-2xl p-5 ${
                rule.correct
                  ? "border-2 border-[var(--color-status-good-border)] bg-[var(--color-status-good-bg)]/30"
                  : "border-2 border-[var(--color-status-critical-border)] bg-[var(--color-status-critical-bg)]/30"
              }`}
            >
              <div className="flex items-start gap-3">
                {rule.correct ? (
                  <CheckCircleIcon
                    width={20}
                    height={20}
                    className="text-[var(--color-status-good-dot)] shrink-0 mt-1"
                    aria-hidden
                  />
                ) : (
                  <XCircleIcon
                    width={20}
                    height={20}
                    className="text-[var(--color-status-critical-dot)] shrink-0 mt-1"
                    aria-hidden
                  />
                )}
                <div className="min-w-0">
                  <p className="title-14 text-navy-900 break-keep">{rule.rule}</p>
                  <p className="body-14 text-neutral-70 mt-1 break-keep">{rule.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}