import * as React from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '../../ui/card';
import { cn } from '../../shared/utils';

export type BlockColor =
  | 'primary'
  | 'chart-1'
  | 'chart-2'
  | 'chart-3'
  | 'chart-4'
  | 'chart-5'
  | 'success'
  | 'info'
  | 'warning'
  | 'destructive';

const colorTokens: Record<BlockColor, string> = {
  primary: 'border-t-primary',
  'chart-1': 'border-t-[var(--chart-1)]',
  'chart-2': 'border-t-[var(--chart-2)]',
  'chart-3': 'border-t-[var(--chart-3)]',
  'chart-4': 'border-t-[var(--chart-4)]',
  'chart-5': 'border-t-[var(--chart-5)]',
  success: 'border-t-success',
  info: 'border-t-info',
  warning: 'border-t-warning',
  destructive: 'border-t-destructive',
};

export interface TopAccentCardItem {
  title: string;
  body: string;
  bullets?: string[];
  color?: BlockColor;
  className?: string;
}

export interface TopAccentCardsProps {
  items: TopAccentCardItem[];
  className?: string;
}

/**
 * Two-up framing cards with a colored top-border accent.
 *
 * @description
 * A lightweight pairing block for "mission vs. problem" style framing copy:
 * each card is a bordered `Card` whose top edge is thickened and tinted per
 * `color`, with a title, body copy, and an optional plain bullet list. No
 * icon chip and no CTA — use `ServiceCardGrid` when those are needed.
 *
 * @ai-rules
 * 1. Each item's `color` maps to `colorTokens` and only tints the top border — never hardcode colors.
 * 2. Keep the neutral `border-border` class before the accent `border-t-{color}` class in any className override — tailwind-merge drops the accent if the order is reversed.
 * 3. Designed for 2 items; more will simply wrap onto a new row at the `sm:grid-cols-2` breakpoint.
 * 4. `bullets` render as plain dot markers (no checkmark) — use `ServiceCardGrid`'s `checklist` instead when a checkmark/CTA is needed.
 */
export function TopAccentCards({ items, className }: TopAccentCardsProps) {
  return (
    <div className={cn('grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-8', className)}>
      {items.map((item, index) => (
        <Card
          key={`${item.title}-${index}`}
          className={cn(
            'border border-t-4 border-border',
            colorTokens[item.color ?? 'primary'],
            item.className
          )}
        >
          <CardHeader>
            <CardTitle>{item.title}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm leading-relaxed text-muted-foreground">{item.body}</p>

            {item.bullets && item.bullets.length > 0 && (
              <ul className="space-y-1.5">
                {item.bullets.map(bullet => (
                  <li key={bullet} className="flex items-start gap-2 text-sm text-muted-foreground">
                    <span className="mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            )}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}