/**
 * scaffold-theme/generate.ts — Build the src/index.css file content from
 * the PRD theme slice (or SmartStack defaults when absent).
 *
 * Pure function — no I/O. The caller writes the returned files to disk.
 */
import type { GeneratedFile, ScaffoldThemeInput, ThemeTokens } from './types.js';

const DEFAULTS: Required<ThemeTokens> = {
  accent: '#3b82f6',
  darkBg: '#161618',
  lightBg: '#ffffff',
  radiusCard: 8,
};

const HEADER = `/* AUTO-GENERATED — re-run scaffold-theme to refresh. Add @customised at the top to opt out. */`;

function shadeHex(hex: string, lightness: number): string {
  // Quick & dirty: blend hex toward white (lightness > 0) or black (< 0).
  // lightness in [-1, 1]. 0 = no change.
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  const t = lightness > 0 ? 255 : 0;
  const k = Math.abs(lightness);
  const mix = (c: number) => Math.round(c * (1 - k) + t * k);
  const toHex = (n: number) => n.toString(16).padStart(2, '0');
  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
}

export function generate(spec: ScaffoldThemeInput): GeneratedFile[] {
  const tokens: Required<ThemeTokens> = {
    ...DEFAULTS,
    ...(spec.prdSlice?.theme ?? {}),
  };

  // Generate accent ramp (300, 400, 500, 600, 700) from the base.
  const a700 = shadeHex(tokens.accent, -0.3);
  const a600 = shadeHex(tokens.accent, -0.15);
  const a500 = tokens.accent;
  const a400 = shadeHex(tokens.accent, 0.15);
  const a300 = shadeHex(tokens.accent, 0.3);

  // Shoelace imports are conditional (Fix #5, 2026-05-27). Projects that
  // don't depend on `@shoelace-style/shoelace` in their package.json fail
  // Vite resolution at boot with `Can't resolve '@shoelace-style/shoelace/…'`.
  // The default is OFF; ba-develop / users opt in by passing useShoelace:true.
  const shoelaceImports = spec.useShoelace
    ? `@import '@shoelace-style/shoelace/dist/themes/light.css';
@import '@shoelace-style/shoelace/dist/themes/dark.css' (prefers-color-scheme: dark);
`
    : ''

  const css = `${HEADER}
@import 'tailwindcss';
@import '@atlashub/smartstack/theme.css';
@source '../node_modules/@atlashub/smartstack/dist/**/*.js';
${shoelaceImports}
:root {
  /* ─── Brand accent ramp (derived from --color-accent-500) ────────── */
  --color-accent-300: ${a300};
  --color-accent-400: ${a400};
  --color-accent-500: ${a500};
  --color-accent-600: ${a600};
  --color-accent-700: ${a700};

  /* ─── App backgrounds ───────────────────────────────────────────── */
  --bg-app: ${tokens.lightBg};
  --bg-card: #ffffff;
  --bg-muted: #f5f5f7;

  /* ─── Status palette ────────────────────────────────────────────── */
  --success-bg: #ecfdf5;
  --success-border: #10b981;
  --success-text: #065f46;
  --warning-bg: #fffbeb;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --error-bg: #fef2f2;
  --error-border: #ef4444;
  --error-text: #991b1b;
  --info-bg: #eff6ff;
  --info-border: #3b82f6;
  --info-text: #1e40af;

  /* ─── Geometry ──────────────────────────────────────────────────── */
  --radius-card: ${tokens.radiusCard}px;

  /* ─── Shoelace overrides (sl-color-primary mapped to brand accent) ── */
  --sl-color-primary-50: ${shadeHex(a500, 0.8)};
  --sl-color-primary-100: ${shadeHex(a500, 0.65)};
  --sl-color-primary-200: ${shadeHex(a500, 0.5)};
  --sl-color-primary-300: ${a300};
  --sl-color-primary-400: ${a400};
  --sl-color-primary-500: ${a500};
  --sl-color-primary-600: ${a600};
  --sl-color-primary-700: ${a700};
  --sl-color-primary-800: ${shadeHex(a500, -0.45)};
  --sl-color-primary-900: ${shadeHex(a500, -0.6)};
  --sl-color-primary-950: ${shadeHex(a500, -0.75)};
}

.dark {
  --bg-app: ${tokens.darkBg};
  --bg-card: #1e1e22;
  --bg-muted: #26262b;

  --success-bg: #052e2b;
  --success-border: #10b981;
  --success-text: #34d399;
  --warning-bg: #2a1f0a;
  --warning-border: #f59e0b;
  --warning-text: #fbbf24;
  --error-bg: #2a0a0a;
  --error-border: #ef4444;
  --error-text: #fca5a5;
  --info-bg: #0a1a2e;
  --info-border: #3b82f6;
  --info-text: #93c5fd;
}

html, body {
  background-color: var(--bg-app);
  color-scheme: light dark;
}
`;

  return [{ path: 'src/index.css', content: css }];
}
