Diagram:
  DefinitionFiles:
    - Type: URL
      Url: "https://raw.githubusercontent.com/awslabs/diagram-as-code/main/definitions/definition-for-aws-icons-light.yaml"
  Resources:
    Canvas:
      Type: AWS::Diagram::Canvas
      Direction: horizontal
      Children:
        - LeftArea
        - RightColumn
    LeftArea:
      Type: AWS::Diagram::HorizontalStack
      Children:
        - User
        - Vercel
    User:
      Type: AWS::Diagram::Resource
      Preset: User
      Title: User
    Vercel:
      Type: AWS::Diagram::Resource
      Preset: SDK
      Title: "Vercel\n(Next.js Frontend)"
    RightColumn:
      Type: AWS::Diagram::VerticalStack
      Children:
        - APILayer
        - PNG
    APILayer:
      Type: AWS::Diagram::Resource
      Preset: "Generic group"
      Title: API Layer
      FillColor: "rgba(232, 244, 250, 255)"
      BorderColor: "rgba(0, 150, 100, 255)"
      Children:
        - APILayerStack
    APILayerStack:
      Type: AWS::Diagram::HorizontalStack
      Children:
        - ApiChat
        - BedrockIcon
        - YAMLDoc
        - ApiDiagram
        - Awsdac
    ApiChat:
      Type: AWS::Diagram::Resource
      Preset: "Source code"
      Title: /api/chat
    BedrockIcon:
      Type: AWS::Diagram::Resource
      Preset: "Amazon Bedrock"
      Title: "Amazon Bedrock\n(Claude)"
    YAMLDoc:
      Type: AWS::Diagram::Resource
      Preset: Document
      Title: YAML
    ApiDiagram:
      Type: AWS::Diagram::Resource
      Preset: "Source code"
      Title: /api/diagram
    Awsdac:
      Type: AWS::Diagram::Resource
      Preset: Server
      Title: "awsdac\n(Go CLI)"
    PNG:
      Type: AWS::Diagram::Resource
      Preset: Multimedia
      Title: PNG
  Links:
    - Source: User
      SourcePosition: E
      Target: Vercel
      TargetPosition: W
      LineColor: "rgba(50, 50, 50, 255)"
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "1. Request diagram"
          Color: "rgba(50, 50, 50, 255)"
    - Source: Vercel
      SourcePosition: E
      Target: APILayer
      TargetPosition: W
      LineColor: "rgba(200, 100, 0, 255)"
      LineWidth: 2
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "2. Send prompt"
          Color: "rgba(200, 100, 0, 255)"
    - Source: ApiChat
      SourcePosition: E
      Target: BedrockIcon
      TargetPosition: W
      LineColor: "rgba(0, 100, 180, 255)"
      LineWidth: 3
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "3. Generate YAML"
          Color: "rgba(0, 100, 180, 255)"
    - Source: BedrockIcon
      SourcePosition: E
      Target: YAMLDoc
      TargetPosition: W
      LineColor: "rgba(0, 100, 180, 255)"
      LineWidth: 3
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "4. Output YAML"
          Color: "rgba(0, 100, 180, 255)"
    - Source: YAMLDoc
      SourcePosition: E
      Target: ApiDiagram
      TargetPosition: W
      LineColor: "rgba(0, 100, 180, 255)"
      LineWidth: 3
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "5. Pass YAML"
          Color: "rgba(0, 100, 180, 255)"
    - Source: ApiDiagram
      SourcePosition: E
      Target: Awsdac
      TargetPosition: W
      LineColor: "rgba(0, 100, 180, 255)"
      LineWidth: 3
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "6. Render diagram"
          Color: "rgba(0, 100, 180, 255)"
    - Source: APILayer
      SourcePosition: S
      Target: PNG
      TargetPosition: N
      LineColor: "rgba(150, 50, 150, 255)"
      LineWidth: 2
      TargetArrowHead:
        Type: Default
      Labels:
        SourceRight:
          Title: "7. Generate PNG"
          Color: "rgba(150, 50, 150, 255)"
    - Source: PNG
      SourcePosition: W
      Target: User
      TargetPosition: S
      LineColor: "rgba(0, 150, 100, 255)"
      LineWidth: 2
      TargetArrowHead:
        Type: Default
      Type: orthogonal
      Labels:
        TargetLeft:
          Title: "8. Return\n diagram"
          Color: "rgba(0, 150, 100, 255)"

Diagram:
  DefinitionFiles:
    - Type: URL
      Url: "https://raw.githubusercontent.com/awslabs/diagram-as-code/main/definitions/definition-for-aws-icons-light.yaml"
  Resources:
    Canvas:
      Type: AWS::Diagram::Canvas
      Direction: vertical
      Children:
        - AWSCloud
        - User
    AWSCloud:
      Type: AWS::Diagram::Cloud
      Preset: AWSCloudNoLogo
      Align: center
      Direction: vertical
      Children:
        - MyVPC
    MyVPC:
      Type: AWS::EC2::VPC
      Direction: vertical
      Children:
        - SubnetRow
        - ALB
      BorderChildren:
        - Position: S
          Resource: InternetGateway
    SubnetRow:
      Type: AWS::Diagram::HorizontalStack
      Children:
        - PublicSubnetA
        - PublicSubnetB
    PublicSubnetA:
      Type: AWS::EC2::Subnet
      Preset: PublicSubnet
      Children:
        - EC2InstanceA
    PublicSubnetB:
      Type: AWS::EC2::Subnet
      Preset: PublicSubnet
      Children:
        - EC2InstanceB
    EC2InstanceA:
      Type: AWS::EC2::Instance
    EC2InstanceB:
      Type: AWS::EC2::Instance
    ALB:
      Type: AWS::ElasticLoadBalancingV2::LoadBalancer
      Preset: Application Load Balancer
    InternetGateway:
      Type: AWS::EC2::InternetGateway
      IconFill:
        Type: rect
    User:
      Type: AWS::Diagram::Resource
      Preset: User
  Links:
    - Source: User
      SourcePosition: N
      Target: InternetGateway
      TargetPosition: S
      TargetArrowHead:
        Type: Open
    - Source: InternetGateway
      SourcePosition: N
      Target: ALB
      TargetPosition: S
      TargetArrowHead:
        Type: Open
    - Source: ALB
      SourcePosition: NNW
      Target: EC2InstanceA
      TargetPosition: SSE
      TargetArrowHead:
        Type: Open
    - Source: ALB
      SourcePosition: NNE
      Target: EC2InstanceB
      TargetPosition: SSW
      TargetArrowHead:
        Type: Open

Diagram:
  DefinitionFiles:
    - Type: URL
      Url: "https://raw.githubusercontent.com/awslabs/diagram-as-code/main/definitions/definition-for-aws-icons-light.yaml"

  Resources:
    Canvas:
      Type: AWS::Diagram::Canvas
      Direction: vertical
      Children:
        - AWSCloud
        - User

    AWSCloud:
      Type: AWS::Diagram::Cloud
      Preset: AWSCloudNoLogo
      Align: center
      Direction: horizontal
      Children:
        - VPC1
        - PrivateLinkGroup
        - VPC2

    VPC1:
      Type: AWS::EC2::VPC
      Title: VPC1 (10.0.0.0/16)
      Direction: horizontal
      Children:
        - VPC1SubnetStack
        - NLB
      BorderChildren:
        - Position: W
          Resource: IGW1

    VPC1SubnetStack:
      Type: AWS::Diagram::VerticalStack
      Children:
        - PublicSubnet1A
        - PublicSubnet1B

    PublicSubnet1A:
      Type: AWS::EC2::Subnet
      Preset: PublicSubnet
      Title: Public subnet
      Children:
        - EC2VPC1A

    PublicSubnet1B:
      Type: AWS::EC2::Subnet
      Preset: PublicSubnet
      Title: Public subnet
      Children:
        - EC2VPC1B

    EC2VPC1A:
      Type: AWS::EC2::Instance
      Title: Amazon EC2

    EC2VPC1B:
      Type: AWS::EC2::Instance
      Title: Amazon EC2

    NLB:
      Type: AWS::ElasticLoadBalancingV2::LoadBalancer
      Preset: Network Load Balancer
      Title: Network Load Balancer

    IGW1:
      Type: AWS::EC2::InternetGateway
      Title: Internet Gateway
      IconFill:
        Type: rect

    PrivateLinkGroup:
      Type: AWS::Diagram::Resource
      Preset: BlankGroup
      Children:
        - PrivateLink

    PrivateLink:
      Type: AWS::Diagram::Resource
      Preset: AWS PrivateLink
      Title: AWS PrivateLink

    VPC2:
      Type: AWS::EC2::VPC
      Title: VPC2 (10.1.0.0/16)
      Direction: horizontal
      Children:
        - VPCEndpoint
        - VPC2SubnetStack
      BorderChildren:
        - Position: E
          Resource: IGW2

    VPCEndpoint:
      Type: AWS::EC2::VPCEndpoint
      Title: VPC Endpoint

    VPC2SubnetStack:
      Type: AWS::Diagram::VerticalStack
      Children:
        - PublicSubnet2A
        - PublicSubnet2B

    PublicSubnet2A:
      Type: AWS::EC2::Subnet
      Preset: PublicSubnet
      Title: Public subnet
      Children:
        - EC2VPC2

    PublicSubnet2B:
      Type: AWS::EC2::Subnet
      Preset: PublicSubnet
      Title: Public subnet
      Children:
        - EmptyResource

    EC2VPC2:
      Type: AWS::EC2::Instance
      Title: Amazon EC2

    EmptyResource:
      Type: AWS::Diagram::Resource

    IGW2:
      Type: AWS::EC2::InternetGateway
      Title: Internet Gateway
      IconFill:
        Type: rect

    User:
      Type: AWS::Diagram::Resource
      Preset: User
      Title: User

  Links:
    - Source: EC2VPC2
      SourcePosition: W
      Target: VPCEndpoint
      TargetPosition: E
      Type: orthogonal
      TargetArrowHead:
        Type: Open

    - Source: VPCEndpoint
      SourcePosition: W
      Target: PrivateLink
      TargetPosition: E
      Type: orthogonal
      TargetArrowHead:
        Type: Open

    - Source: PrivateLink
      SourcePosition: W
      Target: NLB
      TargetPosition: E
      Type: orthogonal
      TargetArrowHead:
        Type: Open

    - Source: NLB
      SourcePosition: N
      Target: EC2VPC1A
      TargetPosition: E
      Type: orthogonal
      TargetArrowHead:
        Type: Open

    - Source: NLB
      SourcePosition: S
      Target: EC2VPC1B
      TargetPosition: E
      Type: orthogonal
      TargetArrowHead:
        Type: Open

    - Source: User
      SourcePosition: W
      Target: IGW1
      TargetPosition: W
      Type: orthogonal
      LineColor: 'rgba(0,125,125,255)'
      TargetArrowHead:
        Type: Open
      Labels:
        SourceRight:
          Title: "SSH access"
          Color: 'rgba(0,125,125,255)'

    - Source: IGW1
      SourcePosition: E
      Target: EC2VPC1A
      TargetPosition: W
      Type: orthogonal
      LineColor: 'rgba(0,125,125,255)'
      TargetArrowHead:
        Type: Open

    - Source: IGW1
      SourcePosition: E
      Target: EC2VPC1B
      TargetPosition: W
      Type: orthogonal
      LineColor: 'rgba(0,125,125,255)'
      TargetArrowHead:
        Type: Open

    - Source: User
      SourcePosition: E
      Target: IGW2
      TargetPosition: E
      Type: orthogonal
      LineColor: 'rgba(0,125,125,255)'
      TargetArrowHead:
        Type: Open
      Labels:
        SourceLeft:
          Title: "SSH access"
          Color: 'rgba(0,125,125,255)'

    - Source: IGW2
      SourcePosition: W
      Target: EC2VPC2
      TargetPosition: E
      Type: orthogonal
      LineColor: 'rgba(0,125,125,255)'
      TargetArrowHead:
        Type: Open

"use client";

import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/components/ai-elements/conversation";
import { Message, MessageContent } from "@/components/ai-elements/message";
import {
  PromptInput,
  PromptInputAttachment,
  PromptInputAttachments,
  PromptInputBody,
  type PromptInputMessage,
  PromptInputSelect,
  PromptInputSelectContent,
  PromptInputSelectItem,
  PromptInputSelectTrigger,
  PromptInputSelectValue,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputTools,
} from "@/components/ai-elements/prompt-input";
import { Action, Actions } from "@/components/ai-elements/actions";
import { Fragment, useState } from "react";
import { useChat } from "@ai-sdk/react";
import { Response } from "@/components/ai-elements/response";
import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/ai-elements/sources";
import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@/components/ai-elements/reasoning";
import { Loader } from "@/components/ai-elements/loader";
import {
  CheckIcon,
  CopyIcon,
  RefreshCcwIcon,
  ImageIcon,
} from "lucide-react";
import { bedrockModels } from "../models";
import { ModeToggle } from "@/components/mode-toggle";
import { Button } from "@/components/ui/button";

/**
 * メッセージ本文から awsdac / CFn 用 YAML を抜き出す
 * - ```yaml / ```yml のコードブロックだけを見る
 * - 最初に見つかったコードブロックを候補とする
 */
const extractYamlFromCodeFence = (text: string): string | null => {
  if (!text) return null;

  const fenced = text.match(/```(?:yaml|yml)[\s\r\n]+([\s\S]*?)```/i);
  if (fenced) {
    return fenced[1].trim();
  }
  return null;
};

/**
 * YAML が CloudFormation テンプレートっぽいかの雑判定
 * - Diagram: があれば DAC 優先（false を返す）
 * - AWSTemplateFormatVersion: があればほぼ CFn
 * - Diagram が無くて Resources: だけある場合も CFn とみなす
 */
const isCloudFormationTemplate = (yaml: string): boolean => {
  if (!yaml) return false;

  const hasDiagram = /^\s*Diagram:/m.test(yaml);
  if (hasDiagram) return false;

  const hasTemplateVersion = /^\s*AWSTemplateFormatVersion:/m.test(yaml);
  const hasResources = /^\s*Resources:/m.test(yaml);

  if (hasTemplateVersion) return true;
  if (!hasDiagram && hasResources) return true;

  return false;
};

const Chat = () => {
  const [input, setInput] = useState("");
  const [model, setModel] = useState<string>(bedrockModels[0].value);
  const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
  const [diagramUrls, setDiagramUrls] = useState<Record<string, string[]>>({});
  const [generatingDiagramFor, setGeneratingDiagramFor] =
    useState<string | null>(null);

  const { messages, sendMessage, status, regenerate } = useChat();

  const handleSubmit = (message: PromptInputMessage) => {
    const hasText = Boolean(message.text);
    const hasAttachments = Boolean(message.files?.length);

    if (!(hasText || hasAttachments)) {
      return;
    }

    sendMessage(
      {
        text: message.text || "Sent with attachments",
        files: message.files,
      },
      {
        body: {
          model: model,
        },
      }
    );
    setInput("");
  };

  const handleGenerateDiagram = async (messageId: string, yaml: string) => {
    try {
      setGeneratingDiagramFor(messageId);

      const endpoint = isCloudFormationTemplate(yaml)
        ? "/api/diagram-cfn"
        : "/api/diagram";

      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type" : "application/json"},
        body: JSON.stringify({ yaml }),
      });

      if (!res.ok) {
        console.error("awsdac generate error", await res.text());
        return;
      }

      // ✅ JSONではなくblobで受ける
      const blob = await res.blob();
      const objectUrl = URL.createObjectURL(blob);

      setDiagramUrls((prev) => ({
        ...prev,
        [messageId]: [...(prev[messageId] ?? []), objectUrl],
      }));
    } catch (e) {
      console.error(e);
    } finally {
      setGeneratingDiagramFor(null);
    }
  };

  const lastMessage = messages[messages.length - 1];

  return (
    <div className="max-w-4xl mx-auto p-6 relative size-full h-screen">
      <div className="flex flex-col h-full">
        <div className="flex justify-between items-center mb-4">
          <h1 className="text-2xl font-bold">AI-Chat</h1>
          <ModeToggle />
        </div>

        <div className="h-full overflow-x-hidden">
          <Conversation>
            <ConversationContent className="overflow-x-hidden">
              {messages.map((message, messageIndex) => {
                const parts = message.parts ?? [];
                const isAssistant = message.role === "assistant";
                const isLastMessage = messageIndex === messages.length - 1;

                const sourceUrlParts = isAssistant
                  ? parts.filter((p: any) => p.type === "source-url")
                  : [];

                const yamlForMessage = isLastMessage
                ? extractYamlFromCodeFence(
                    parts
                      .filter((p: any) => p.type === "text")
                      .map((p: any) => p.text)
                      .join("\n")
                  )
                : null;

                return (
                  <div key={message.id} className="max-w-full overflow-hidden">
                    {/* 参照URLがある場合 */}
                    {isAssistant && sourceUrlParts.length > 0 && (
                      <Sources>
                        <SourcesTrigger count={sourceUrlParts.length} />
                        {sourceUrlParts.map((part: any, i: number) => (
                          <SourcesContent key={`${message.id}-${i}`}>
                            <Source href={part.url} title={part.url} />
                          </SourcesContent>
                        ))}
                      </Sources>
                    )}

                    {message.parts.map((part: any, i: number) => {
                      switch (part.type) {
                        case "text":
                          return (
                            <Fragment key={`${message.id}-${i}`}>
                              <Message from={message.role}>
                                <MessageContent>
                                {message.role === "assistant" ? (
                                  <Response>{part.text}</Response>
                                ) : (
                                  <div className="whitespace-pre-wrap">{part.text}</div>
                              )}
                                </MessageContent>
                              </Message>

                              {message.role === "user" &&
                              i === message.parts.length - 1 && (
                                <Actions className="mt-2">
                                  <Action
                                    onClick={() => {
                                      navigator.clipboard.writeText(part.text);
                                      setCopiedMessageId(message.id);
                                      setTimeout(() => setCopiedMessageId(null), 2000);
                                    }}
                                    label={copiedMessageId === message.id ? "Copied!" : "Copy"}
                                  > 
                                    {copiedMessageId === message.id ? (
                                      <CheckIcon className="size-3" />
                                  ) : (
                                    <CopyIcon className="size-3" />
                                )}
                                </Action>
                              </Actions>
                            )}

                              {/* アクション（最後のメッセージの最後のパートだけ） */}
                              {isLastMessage &&
                                i === message.parts.length - 1 && (
                                  <Actions className="mt-2">
                                    {/* アシスタントメッセージ用の Retry / Copy */}
                                    {isAssistant && (
                                      <>
                                        <Action
                                          onClick={() =>
                                            regenerate({
                                              body: {
                                                model: model,
                                              },
                                            })
                                          }
                                          label="Retry"
                                        >
                                          <RefreshCcwIcon className="size-3" />
                                        </Action>

                                        <Action
                                          onClick={() => {
                                            navigator.clipboard.writeText(
                                              part.text
                                            );
                                            setCopiedMessageId(
                                              message.id as string
                                            );
                                            setTimeout(
                                              () => setCopiedMessageId(null),
                                              2000
                                            );
                                          }}
                                          label={
                                            copiedMessageId === message.id
                                              ? "Copied!"
                                              : "Copy"
                                          }
                                        >
                                          {copiedMessageId === message.id ? (
                                            <CheckIcon className="size-3" />
                                          ) : (
                                            <CopyIcon className="size-3" />
                                          )}
                                        </Action>
                                      </>
                                    )}

                                    {/* ユーザー／アシスタント問わず、```yaml``` があれば図生成ボタン */}
                                    {yamlForMessage && (
                                      <Action
                                        onClick={() =>
                                          handleGenerateDiagram(
                                            message.id as string,
                                            yamlForMessage
                                          )
                                        }
                                        label={
                                          generatingDiagramFor === message.id
                                            ? "図を生成中..."
                                            : "awsdacで構成図を生成"
                                        }
                                        disabled={
                                          generatingDiagramFor === message.id
                                        }
                                      >
                                        <ImageIcon className="size-3" />
                                      </Action>
                                    )}
                                  </Actions>
                                )}

                              {/* 生成済みの図があれば表示 & ダウンロードボタン */}
                              {diagramUrls[message.id]?.length &&
                                i === message.parts.length - 1 && (
                                  <div className="mt-4 space-y-4">
                                    {diagramUrls[message.id].map(
                                      (url, index) => (
                                        <div
                                          key={`${message.id}-diagram-${index}`}
                                          className="flex flex-col gap-2"
                                        >
                                          <img
                                            src={url}
                                            alt="AWS diagram"
                                            className="max-h-96 rounded-lg border object-contain bg-background"
                                          />
                                          <div>
                                            <Button
                                              variant="outline"
                                              onClick={() => {
                                                const link =
                                                  document.createElement("a");
                                                link.href = url;
                                                link.download = `aws-diagram-${message.id}-${index + 1}.png`;
                                                document.body.appendChild(link);
                                                link.click();
                                                document.body.removeChild(link);
                                              }}
                                            >
                                              PNG をダウンロード
                                            </Button>
                                          </div>
                                        </div>
                                      )
                                    )}
                                  </div>
                                )}
                            </Fragment>
                          );
                        case "reasoning":
                          return (
                            <Reasoning
                              key={`${message.id}-${i}`}
                              className="w-full"
                              isStreaming={
                                status === "streaming" &&
                                i === message.parts.length - 1 &&
                                message.id === lastMessage?.id
                              }
                            >
                              <ReasoningTrigger />
                              <ReasoningContent>{part.text}</ReasoningContent>
                            </Reasoning>
                          );
                        default:
                          return null;
                      }
                    })}
                  </div>
                );
              })}
              {status === "submitted" && <Loader />}
            </ConversationContent>
            <ConversationScrollButton />
          </Conversation>
        </div>

        <PromptInput
          onSubmit={handleSubmit}
          className="mt-4"
          globalDrop
          multiple
        >
          <PromptInputBody>
            <PromptInputAttachments>
              {(attachment) => <PromptInputAttachment data={attachment} />}
            </PromptInputAttachments>
            <PromptInputTextarea
              onChange={(e) => setInput(e.target.value)}
              value={input}
              placeholder="メッセージを入力"
            />
          </PromptInputBody>
          <PromptInputFooter>
            <PromptInputTools>
              <PromptInputSelect
                onValueChange={(value) => {
                  setModel(value);
                }}
                value={model}
              >
                <PromptInputSelectTrigger>
                  <PromptInputSelectValue />
                </PromptInputSelectTrigger>
                <PromptInputSelectContent>
                  {bedrockModels.map((model) => (
                    <PromptInputSelectItem
                      key={model.value}
                      value={model.value}
                    >
                      {model.name}
                    </PromptInputSelectItem>
                  ))}
                </PromptInputSelectContent>
              </PromptInputSelect>
            </PromptInputTools>
            <PromptInputSubmit disabled={!input} status={status} />
          </PromptInputFooter>
        </PromptInput>
      </div>
    </div>
  );
};

export default Chat;

import { streamText, UIMessage, convertToModelMessages } from "ai";
import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock";

export const maxDuration = 30;

const systemPrompt =`ここにシステムプロンプト`;

export async function POST(req: Request) {
  const {
    messages,
    model,
	temperature,
  }: {
    messages: UIMessage[];
    model: string;
	temperature?: number;
    webSearch: boolean;
  } = await req.json();

  const bedrock = createAmazonBedrock({
    region: process.env.AWS_REGION,
    apiKey: process.env.BEDROCK_API_KEY,
  });

  const result = streamText({
    model: bedrock(model),
    messages: convertToModelMessages(messages),
    system: systemPrompt,
	temperature: temperature ?? 0,
  });

  return result.toUIMessageStreamResponse({
    sendSources: true,
    sendReasoning: true,
  });
}

import { NextResponse } from "next/server";
import { promises as fs } from "fs";
import { tmpdir } from "os";
import { join } from "path";
import { execFile } from "child_process";
import { promisify } from "util";
import { randomUUID } from "crypto";

const execFileAsync = promisify(execFile);

export const runtime = "nodejs";
export const maxDuration = 60;

// .env.local に AWSDAC_PATH を設定していればそれを使う
// 例: AWSDAC_PATH=C:\Users\<ユーザー名>\go\bin\awsdac.exe
const awsdacCommand = process.env.AWSDAC_PATH || "awsdac";

// タイムスタンプ生成 (yyyyMMddHHmmss)
const generateTimestamp = (): string => {
  const now = new Date();
  const yyyy = now.getFullYear().toString();
  const MM = String(now.getMonth() + 1).padStart(2, "0");
  const dd = String(now.getDate()).padStart(2, "0");
  const HH = String(now.getHours()).padStart(2, "0");
  const mm = String(now.getMinutes()).padStart(2, "0");
  const ss = String(now.getSeconds()).padStart(2, "0");
  return `${yyyy}${MM}${dd}${HH}${mm}${ss}`;
};

// ```yaml ... ``` が来ても拾えるようにする（保険）
const extractYamlIfFenced = (input: string): string => {
  const m = input.match(/```(?:yaml|yml)?[\s\r\n]+([\s\S]*?)```/i);
  return (m ? m[1] : input).trim();
};

const sanitizeAwsdacYaml = (yaml: string): string => {
  return yaml
    // awsdac では非対応になりがちなフィールドは消す（保険）
    .replace(/^\s*Label\s*:\s*.*$/gm, "")
    .replace(/^\s*Style\s*:\s*.*$/gm, "")
    .replace(/^\s*Icon\s*:\s*.*$/gm, "")
    // 未定義Typeの保険（本来はプロンプトで出さない）
    .replace(
      /^(\s*Type\s*:\s*)AWS::Bedrock::Agent\s*$/gm,
      "$1AWS::EC2::Instance"
    );
};

export async function POST(req: Request) {
  const body = (await req.json()) as { yaml?: string };
  const raw = body?.yaml;

  if (!raw || typeof raw !== "string") {
    return NextResponse.json({ error: "yaml is required" }, { status: 400 });
  }

  const extracted = extractYamlIfFenced(raw);
  const safeYaml = sanitizeAwsdacYaml(extracted);

  const id = randomUUID();
  const workDir = join(tmpdir(), `awsdac-${id}`);

  try {
    await fs.mkdir(workDir, { recursive: true });

    const yamlPath = join(workDir, "diagram.yaml");
    await fs.writeFile(yamlPath, safeYaml, "utf8");

    const timestamp = generateTimestamp();
    const outputFileName = `output_${timestamp}.png`;

    const { stdout, stderr } = await execFileAsync(
      awsdacCommand,
      [yamlPath, "-o", outputFileName],
      {
        cwd: workDir,
        timeout: 30_000, // ハング対策
        windowsHide: true,
      }
    );

    if (stdout) console.log("[awsdac stdout]", stdout.toString());
    if (stderr) console.log("[awsdac stderr]", stderr.toString());

    const outputPath = join(workDir, outputFileName);
    const pngBuffer = await fs.readFile(outputPath);

    // const base64 = pngBuffer.toString("base64");
    // const dataUrl = `data:image/png;base64,${base64}`;

    // return NextResponse.json({ dataUrl });
    // TODO data64ではなく、PNGそのままで返す
    return new Response(pngBuffer, {
      status: 200,
      headers: {
        "Content-Type": "image/png",
        "Cache-Control": "no-store",
      },
    });
  } catch (err: any) {
    console.error("awsdac execution error:", err);
    return NextResponse.json(
      {
        error: "Failed to generate diagram",
        message: err?.message,
        code: err?.code,
        stderr: err?.stderr?.toString?.(),
      },
      { status: 500 }
    );
  } finally {
    // 一時ディレクトリ掃除（失敗しても無視）
    try {
      await fs.rm(workDir, { recursive: true, force: true });
    } catch {}
  }
}

const systemPrompt = `あなたは「Diagram-as-code (awsdac)」の YAML（DACファイル）を生成するエージェントです。
ユーザーの要件を AWS 構成図として表現するための awsdac YAML を作成します。

# 1. Role
- あなたの役割は、ユーザー要件を awsdac の DAC YAML に変換することです。
- 出力は「図として成立すること」と「awsdac として壊れにくいこと」を最優先にします。
- 不明な仕様・不明な Type / Preset に賭けず、迷ったら確実に通る最小構成に寄せます。

# 2. Task
- ユーザー要件から以下を抽出して YAML に落とし込みます。
  - 境界（AWS / Region / VPC / Subnet など）
  - 主要コンポーネント
  - 通信の向き
- 手順は以下です。
  1) Resources の階層（Children / BorderChildren）を決める
  2) Links で通信を結ぶ
- 情報が不足している場合は、勝手に要素を増やしすぎず、最小構成で成立させます。

# 3. 参照方針 / 優先順位
- このプロンプトには、awsdac の公式 docs / 公式 examples で確認できるルールと、このプロジェクトの安全運用ルールを埋め込んでいます。
- 外部リンクを参照できない前提でも、以下のルールを仕様として扱ってください。
- 優先順位は以下です。
  1) ユーザー要件
  2) このプロンプト内の公式準拠ルール
  3) このプロジェクトの運用ルール
  4) このプロンプト内の例
- ルール同士が衝突する場合は、禁止事項 > 個別ルール > 一般ルール > 例 の順で優先します。
- 定義ファイルに存在しない Type / Preset は推測で作ってはいけません。
- 実使用されている既知の Type / Preset / 正式名称だけを使ってください。

# 4. Output Format（最重要）
- 返答は必ず 1つの \`\`\`yaml コードブロック\`\`\` のみ。
- 説明文・箇条書き・前置き・後書きは禁止。
- YAML は CloudFormation ではなく awsdac DAC 形式にすること。
- AWSTemplateFormatVersion 等は出してはいけません。
- インデントは 2スペース。タブ禁止。
- YAMLアンカー/エイリアス（& / *）は禁止。

# 5. 必須スキーマ
- 出力のトップレベルは Diagram のみとし、その配下には必ず以下の3セクションだけを含めます。

Diagram:
  DefinitionFiles: [...]
  Resources: {...}
  Links: [...]

# 6. DefinitionFiles
- 原則として以下の形式を使います。

DefinitionFiles:
  - Type: URL
    Url: "https://raw.githubusercontent.com/awslabs/diagram-as-code/main/definitions/definition-for-aws-icons-light.yaml"

# 7. Resources
- Resources は「キー = リソースID」「値 = リソース定義」です。
- リソースIDは英数字（CamelCase推奨）にし、スペース / 日本語 / 記号は避けます。
- Children / BorderChildren / Links で参照したリソースIDは、必ず Resources に存在させます。
- まず Canvas を作り、Canvas.Children に最上位要素を並べます。

## 7.1 Canvas（必須）
Canvas:
  Type: AWS::Diagram::Canvas
  Direction: horizontal | vertical
  Children: [ ...]

## 7.2 Type の分類
- awsdac の Type は大きく2種類あります。

1) AWS サービスの Type
- 形式：AWS::<サービス>::<リソース>
- 例：
  - AWS::EC2::Instance
  - AWS::S3::Bucket
  - AWS::Lambda::Function
  - AWS::EC2::VPC
  - AWS::EC2::Subnet
  - AWS::ElasticLoadBalancingV2::LoadBalancer
  - AWS::EC2::VPCEndpoint

2) 図の構造 / 汎用要素の Type
- AWS::Diagram::Canvas
- AWS::Diagram::Cloud
- AWS::Diagram::Resource
- AWS::Diagram::HorizontalStack
- AWS::Diagram::VerticalStack
- AWS::Region

## 7.3 サービス名・Preset名の命名ルール
- すべての AWS サービス名・リソース名・Preset 名は、原則として正式名称で出力します。
- 省略形・俗称・略記だけで表現してはいけません。
- Type は正式な AWS::xxx::yyy を使います。
- Preset を使う場合も、実使用されている正式名称を使います。
- 例：
  - ALB → AWS::ElasticLoadBalancingV2::LoadBalancer
  - Preset: Application Load Balancer
  - NLB → Preset: Network Load Balancer
  - Region → AWS::Region

## 7.4 専用Typeの優先使用（重要）
- 以下は専用Typeが存在するため、AWS::Diagram::Resource + Preset ではなく専用Typeを使います。
  - リージョン → AWS::Region
  - VPC → AWS::EC2::VPC
  - サブネット → AWS::EC2::Subnet
- リージョンは AWS::Region を使い、AWS::Diagram::Resource + Preset: Region は使用しません。

## 7.5 コンテナ / レイアウトの基本
- コンテナ要素（Cloud, Region, VPC, Stack 等）には Direction を明示することを優先します。
- Children の順序規則：
  - Direction: vertical → 上から下
  - Direction: horizontal → 左から右
- 通信フローと配置順が整合しているか確認します。
- 複数要素を横並びにしたい場合は、親コンテナを vertical にして内部で HorizontalStack を使う方が柔軟です。
- Align: center などの位置調整プロパティを必要に応じて使います。
- Stack やコンテナのレイアウト調整には Align を使用できます。
- Title を持つコンテナでは、リンク接続点や BorderChildren の位置がタイトル領域と干渉しないようにします。
- タイトルとラインの干渉が懸念される場合は、auto-positioning または N / S / E / W の単純な接続を優先します。

## 7.6 よく使う基本パターン
- AWSクラウド枠：
  Type: AWS::Diagram::Cloud
  Preset: AWSCloudNoLogo
  Children: [...]

- Region：
  Type: AWS::Region
  Direction: vertical
  Title: <region-name>
  Children: [...]

- VPC：
  Type: AWS::EC2::VPC
  Children: [...]

- サブネット：
  Type: AWS::EC2::Subnet
  Preset: PublicSubnet | PrivateSubnet
  Children: [...]

- レイアウト用：
  Type: AWS::Diagram::HorizontalStack | AWS::Diagram::VerticalStack
  Children: [...]

## 7.7 ALB / NLB などのロードバランサ
- ALB を表現する場合、Type は AWS::ElasticLoadBalancingV2::LoadBalancer を使います。
- ALB の見た目を明示したい場合は、Preset: Application Load Balancer を使います。
- NLB の見た目を明示したい場合は、Preset: Network Load Balancer を使います。
- AWS::ElasticLoadBalancingV2::ApplicationLoadBalancer は使用しません。

## 7.8 汎用アイコン（AWS サービス以外）
- AWS サービス以外の汎用要素は以下で表現します。

Type: AWS::Diagram::Resource
Preset: <アイコン名>

- よく使う Preset：
  - User
  - Users
  - Client
  - MobileClient
  - Internet
  - Database
  - Server
  - CorporateDataCenter

例：
User:
  Type: AWS::Diagram::Resource
  Preset: Users

OnPremise:
  Type: AWS::Diagram::Resource
  Preset: CorporateDataCenter

## 7.9 BorderChildren（境界に置くもの）
- IGW / NAT Gateway など、枠の外側に付けるものは Children ではなく BorderChildren を優先します。

例：
MyVPC:
  Type: AWS::EC2::VPC
  BorderChildren:
    - Position: W
      Resource: InternetGateway

## 7.10 IconFill（原則適用）
- 原則として、アイコン背景は塗りつぶします。
- アイコン背景の塗りつぶしには IconFill を使います。
- デフォルト値は Type: none ですが、このプロジェクトでは見た目の安定性を優先し、原則として Type: rect を使います。
- 特に BorderChildren に配置するリソース（IGW / NAT Gateway など）では、原則として IconFill.Type: rect を付与します。
- Color を省略した場合は白背景として扱います。
- ユーザーが明示的に背景なしを要求した場合のみ、IconFill を省略してよいです。

- Type の種類：
  - none
  - rect

書式：
ResourceName:
  Type: AWS::EC2::InternetGateway
  IconFill:
    Type: rect
    Color: "rgba(255,255,255,255)"

白背景の省略形：
ResourceName:
  Type: AWS::EC2::InternetGateway
  IconFill:
    Type: rect

主な用途：
- BorderChildren に配置したアイコンで、親の枠線が透けて見える問題を解消
- アイコンに任意の背景色を付ける

例：
IGW:
  Type: AWS::EC2::InternetGateway
  IconFill:
    Type: rect

NATGateway:
  Type: AWS::EC2::NatGateway
  IconFill:
    Type: rect
    Color: "rgba(240,240,240,255)"

## 7.11 汎用グループ枠 / レイアウト補助
- AWS::Diagram::Group は deprecated のため、明示的には生成しません。
- グルーピングが必要な場合は AWS::Diagram::Resource + Children を使います。
- 点線枠が必要な場合は Preset: "Generic group" を使います。
- レイアウト調整用の透明コンテナが必要な場合は Preset: BlankGroup を使います。

実線枠の例：
TestGroup:
  Type: AWS::Diagram::Resource
  Children:
    - Child1
    - Child2

点線枠の例：
TestGroup:
  Type: AWS::Diagram::Resource
  Preset: "Generic group"
  Children:
    - Child1
    - Child2

## 7.12 PrivateLink / VPC Endpoint の使い分け
- AWS PrivateLink を図中の汎用アイコンとして表す場合は、AWS::Diagram::Resource + Preset: AWS PrivateLink を使います。
- VPC Endpoint 自体を表す場合は、AWS::EC2::VPCEndpoint を使います。
- 両者は役割が異なるため、必要に応じて併用してよいです。

## 7.13 空リソース
- レイアウト維持のため、空の AWS::Diagram::Resource を配置してよいです。

EmptyResource:
  Type: AWS::Diagram::Resource

## 7.14 サービス名が曖昧 / 不明な場合のフォールバック
- まず既知の正式な AWS::xxx::yyy Type を優先して使います。
- AWS サービスを表したいが適切な正式 Type が不明な場合は、AWS::EC2::Instance をフォールバックとして使い、リソースIDで役割を表します。
- AWS 外 / 汎用要素は AWS::Diagram::Resource + Preset を使います。
- Type / Preset は、実使用されている既知のものだけを使います。推測で新設してはいけません。

## 7.15 追加リソースの禁止
- ユーザー要件に明示されていないリソース / 枠 / コンテナは追加してはいけません。
- AWS::Diagram::Cloud は必須ではありません。
- AWS Cloud 枠は、ユーザーが明示的に要求した場合のみ追加します。
  - 例：「AWS Cloud枠を付けて」「複数アカウント / 複数リージョンを分けて」
- VPC 境界だけで十分な場合は、Cloud 枠を追加しません。

# 8. Links
- Links は配列です。
- 各要素に Source / Target を必ず置きます。
- Position は 16方位 + auto を使用可能です。
  - 基本4方位: N, S, E, W
  - 8方位: NE, NW, SE, SW
  - 16方位拡張: NNE, NNW, SSE, SSW, ENE, ESE, WNW, WSW
  - auto
- top / bottom / left / right は使ってはいけません。
- SourcePosition / TargetPosition は省略可能であり、auto も使用できます。

## 8.1 矢印ポリシー
- 原則として、ユーザー要件に流れが含まれる、または通信方向が明らかな場合は矢印を付けます。
- 矢印を付ける場合は TargetArrowHead を使います。
- 指示に明示されていない場合は、原則として TargetArrowHead.Type は Default を使います。
- 例外として、ユーザーが明示した場合はそれを最優先します。
  - 「矢印なし」→ SourceArrowHead / TargetArrowHead を付けない
  - 「双方向」→ SourceArrowHead と TargetArrowHead の両方を付ける
  - 「逆向き」→ Source / Target を反転、または矢印方向を逆にする
- 判断が曖昧で単なる関連でよい場合は矢印を省略してよいです。
- ユーザーが提示したYAMLをベースにする場合、その構造を尊重します。
- ユーザーが明示的に変更を要求していない部分は変更しません。

## 8.2 orthogonal の運用ルール
- Type: orthogonal は、図を見やすくするための配線方法として使ってよいです。
- ただしこれは運用ルールであり、見た目の安定性を優先します。
- Type: orthogonal を使う場合は、SourcePosition / TargetPosition は原則として N, S, E, W のみを使います。
- NE / NW / SE / SW / NNE などの斜め・細分方位は、orthogonal では使用しません。
- 横並び要素への接続では、orthogonal + W/E を優先します。
- 縦並び要素への接続では、N/S を優先します。
- 縦並び要素の orthogonal 接続では、出る方向を分散すると崩れにくいです。
  - 上の要素: SourcePosition: N
  - 下の要素: SourcePosition: S

## 8.3 Labels / 色指定
- Links の色指定は Color ではなく LineColor を使います。
  - ✅ LineColor: 'rgba(0,125,125,255)'
- Links では Labels フィールドを使用できます。
- Labels は配列ではなく、オブジェクト形式で書きます。

例：
Labels:
  SourceRight:
    Title: "SSH access"
    Color: 'rgba(0,125,125,255)'

# 9. Prohibited Actions（禁止事項）
- Resources では表示名に Title を使います。Label は存在しません。
- Style フィールドは使ってはいけません。
- Icon / IconUrl は使ってはいけません。
- AWS::General::xxx は存在しないため、使用禁止です。
- Type / Preset を推測で作ってはいけません。
- 定義ファイルや実使用ルールに存在しない Type / Preset を使ってはいけません。
- 省略形や俗称だけを名前として出力してはいけません。
- 正式な Type / Preset / サービス名がある場合は、それを優先します。
- AWS::Bedrock::Agent のような仕様に無い Type を出してはいけません。
- AWS::Diagram::Group を明示的に出力してはいけません。
- AWS::ElasticLoadBalancingV2::ApplicationLoadBalancer は使用禁止です。

# 10. 最終セルフチェック
- Diagram / DefinitionFiles / Resources / Links が揃っている
- DefinitionFiles に Type: URL と Url が入っている
- Canvas が存在する
- Canvas.Children が空でない
- Links の Source / Target は Resources に存在する
- Position 値が許容値のみ（16方位 + auto）
- top / bottom / left / right を使っていない
- 禁止フィールド（Label / Style / Icon / IconUrl）が入っていない
- 汎用アイコン（ユーザー等）は AWS::Diagram::Resource + Preset を使っている
- AWS::General::xxx を使っていない
- AWS::Diagram::Group を使っていない
- Region は AWS::Region を使っている
- ALB は AWS::ElasticLoadBalancingV2::LoadBalancer を使っている
- AWS PrivateLink と VPC Endpoint を混同していない
- BorderChildren のリソースには、原則として IconFill.Type: rect を付けている
- 明示的に背景なしが要求されていない限り、IconFill を原則 rect で適用している
- orthogonal 使用時は SourcePosition / TargetPosition が N / S / E / W のみ
- すべてのサービス名・リソース名・Preset 名を正式名称で扱っている
- 推測で作った Type / Preset が含まれていない
- ユーザー要件にないリソースを勝手に増やしていない
- Cloud枠を、明示要求なしに追加していない

以上を守って、ユーザー要件に合致する awsdac YAML を生成せよ。
返答は \`\`\`yaml コードブロック\`\`\` だけ。`;