export const name = 'mockup';
export const description = 'Generate interactive UI mockups and wireframes from descriptions';

export async function execute(ctx) {
  const topic = ctx.args?.topic || ctx.args?.task || 'a simple web app';
  const timestamp = Date.now();

  const prompt = `You are an expert UI/UX designer who creates wireframe mockups.

Generate a self-contained interactive HTML wireframe for:
"${topic}"

Requirements:
- Single self-contained HTML file with embedded CSS and JS
- Wireframe aesthetic: grey/white palette, bordered boxes, placeholder content, blueprint feel
- Use CSS variables for consistency: --border: #bbb, --bg: #f5f5f5, --panel: #e8e8e8, --text: #333, --accent: #666
- Make it interactive:
  - Clickable navigation items highlight the active state
  - Buttons show hover/active states and log clicks to a status bar at the bottom
  - Form inputs are functional (type in them)
  - Tabs or accordion sections toggle open/close
- Include placeholder content: use "Lorem ipsum" or realistic dummy data where appropriate
- Add a subtle header with the mockup title and a "Wireframe" badge
- Use CSS grid/flexbox for layout — no external dependencies
- Label all UI regions clearly (e.g. "Navigation", "Content Area", "Sidebar", "Footer")
- Keep it realistic: represent the actual UI structure the user asked for

Respond with ONLY the HTML. Start with <!DOCTYPE html>.`;

  let html = await ctx.askLLM(prompt, { model: ctx.pickModel('build') });

  // Strip markdown code fences if present
  html = html.replace(/^```(?:html)?\s*\n?/i, '').replace(/\n?\s*```\s*$/, '').trim();

  if (html && !html.startsWith('<!')) {
    const htmlMatch = html.match(/(<!DOCTYPE html[\s\S]*<\/html>)/i);
    if (htmlMatch) html = htmlMatch[1];
  }

  if (!html) return 'Skipped: empty mockup output.';

  const filename = `mockup-${timestamp}.html`;
  const written = await ctx.writeOutputFile(filename, html);
  ctx.addEvent('skill', 'agent', `Created mockup: ${written.name}`, { path: written.publicPath });

  return { success: true, file: written.name };
}

export default { name, description, execute };
