import { cn } from '@/lib/utils';
import { Send, Eye, MousePointerClick, BadgeEuro, BarChart3 } from 'lucide-react';

export interface BrandStatsCardProps {
  workspace: {
    workspaceSlug: string;
    brandName: string;
    primaryColor: string;
    sends: number;
    opens: number;
    opensVerified: number;
    clicks: number;
    conversions: number;
    conversionValue: number;
    attributionModel: string;
    attributionLookbackDays: number;
  };
}

function formatEuro(value: number): string {
  return value.toLocaleString('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
}

function pct(num: number, den: number): string {
  if (den <= 0) return '—';
  return `${((num / den) * 100).toFixed(1)}%`;
}

export function BrandStatsCard({ workspace }: BrandStatsCardProps) {
  return (
    <div className="flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
      {/* Workspace-Color-Header */}
      <div
        className="flex items-center justify-between px-4 py-2.5"
        style={{ background: workspace.primaryColor, color: '#fff' }}
      >
        <div>
          <h3 className="text-sm font-bold leading-tight">{workspace.brandName}</h3>
          <span className="text-[10px] uppercase tracking-wider opacity-80">{workspace.workspaceSlug}</span>
        </div>
        <BarChart3 className="h-4 w-4 opacity-80" />
      </div>

      {/* KPI-Tiles */}
      <div className="grid grid-cols-2 gap-px bg-zinc-100 dark:bg-zinc-800">
        <Tile
          icon={<Send className="h-3 w-3" />}
          label="Sends"
          value={workspace.sends.toLocaleString('de-DE')}
        />
        <Tile
          icon={<Eye className="h-3 w-3" />}
          label="Open-Rate"
          value={pct(workspace.opensVerified, workspace.sends)}
          sub={workspace.opens > workspace.opensVerified ? `${workspace.opens.toLocaleString('de-DE')} raw` : undefined}
        />
        <Tile
          icon={<MousePointerClick className="h-3 w-3" />}
          label="Click-Rate"
          value={pct(workspace.clicks, workspace.sends)}
          sub={`${workspace.clicks.toLocaleString('de-DE')} clicks`}
        />
        <Tile
          icon={<BadgeEuro className="h-3 w-3" />}
          label="Umsatz"
          value={workspace.conversionValue > 0 ? formatEuro(workspace.conversionValue) : '—'}
          sub={`${workspace.conversions} Conversions`}
        />
      </div>

      {/* Attribution-Footer */}
      <div className="border-t border-zinc-100 bg-zinc-50/50 px-4 py-2 text-[10px] uppercase tracking-wider text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900/50">
        Attribution: <strong className="text-zinc-700 dark:text-zinc-300">{workspace.attributionModel}</strong>
        {' · '}
        Lookback: <strong className="text-zinc-700 dark:text-zinc-300">{workspace.attributionLookbackDays}d</strong>
      </div>
    </div>
  );
}

function Tile({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub?: string }) {
  return (
    <div className={cn('bg-white p-3 dark:bg-zinc-950')}>
      <div className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-zinc-500">
        {icon}
        {label}
      </div>
      <div className="mt-0.5 text-base font-bold text-zinc-900 dark:text-zinc-100">{value}</div>
      {sub && <div className="text-[10px] text-zinc-400">{sub}</div>}
    </div>
  );
}
