import type { Meta, StoryObj } from "@storybook/react";
import { CodeSnippetField } from "./CodeSnippetField";

const meta: Meta<typeof CodeSnippetField> = {
	title: "Widgets/Onboarding/Fields/CodeSnippetField",
	component: CodeSnippetField,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		language: {
			control: "select",
			options: [
				"typescript",
				"javascript",
				"python",
				"bash",
				"json",
				"html",
				"css",
				"go",
				"rust",
			],
		},
		showLineNumbers: { control: "boolean" },
		showCopyButton: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[550px]">
				<Story />
			</div>
		),
	],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
	args: {
		title: "Install the SDK",
		code: "npm install @acme/sdk",
		language: "bash",
	},
};

export const TypeScript: Story = {
	args: {
		title: "Initialize the Client",
		description: "Create a new client instance with your API key",
		language: "typescript",
		code: `import { AcmeClient } from '@acme/sdk'

const client = new AcmeClient({
  apiKey: process.env.ACME_API_KEY,
  environment: 'production',
})

// Make your first request
const response = await client.users.list()
console.log(response.data)`,
	},
};

export const JavaScript: Story = {
	args: {
		title: "Quick Start",
		language: "javascript",
		code: `const { AcmeClient } = require('@acme/sdk')

const client = new AcmeClient({
  apiKey: 'sk_live_...',
})

async function main() {
  const result = await client.process({
    input: 'Hello, world!',
  })
  console.log(result)
}

main()`,
	},
};

export const Python: Story = {
	args: {
		title: "Python Example",
		language: "python",
		code: `from acme import AcmeClient

client = AcmeClient(api_key="sk_live_...")

# Create a new resource
response = client.resources.create(
    name="My Resource",
    type="standard",
    metadata={"env": "production"}
)

print(response.id)`,
	},
};

export const Bash: Story = {
	args: {
		title: "cURL Example",
		description: "Make a request using cURL",
		language: "bash",
		code: `curl -X POST https://api.acme.com/v1/messages \\
  -H "Authorization: Bearer sk_live_..." \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "acme-1",
    "messages": [{"role": "user", "content": "Hello!"}]
  }'`,
	},
};

export const JSON: Story = {
	args: {
		title: "API Response",
		language: "json",
		code: `{
  "id": "msg_01XFDUDYJgAACzvnptvVoYEL",
  "type": "message",
  "role": "assistant",
  "content": [
    {
      "type": "text",
      "text": "Hello! How can I help you today?"
    }
  ],
  "model": "acme-1",
  "usage": {
    "input_tokens": 12,
    "output_tokens": 15
  }
}`,
	},
};

export const WithLineNumbers: Story = {
	args: {
		title: "With Line Numbers",
		language: "typescript",
		showLineNumbers: true,
		code: `import { AcmeClient } from '@acme/sdk'

const client = new AcmeClient({
  apiKey: process.env.ACME_API_KEY,
})

async function processData(input: string) {
  const result = await client.process({ input })
  return result.output
}

export { processData }`,
	},
};

export const NoCopyButton: Story = {
	args: {
		title: "Environment Variables",
		description: "Add these to your .env file",
		language: "bash",
		showCopyButton: false,
		code: `ACME_API_KEY=sk_live_...
ACME_ENVIRONMENT=production
ACME_TIMEOUT=30000`,
	},
};

export const GoLang: Story = {
	args: {
		title: "Go Example",
		language: "go",
		code: `package main

import (
    "fmt"
    "github.com/acme/sdk-go"
)

func main() {
    client := acme.NewClient("sk_live_...")

    resp, err := client.Messages.Create(&acme.MessageParams{
        Model: "acme-1",
        Messages: []acme.Message{
            {Role: "user", Content: "Hello!"},
        },
    })

    if err != nil {
        panic(err)
    }

    fmt.Println(resp.Content)
}`,
	},
};

export const CustomCopyText: Story = {
	args: {
		title: "Your API Key",
		language: "text",
		code: "sk_live_abc123def456ghi789jkl012mno345pqr678",
		copyButtonText: "Copy Key",
		copiedText: "Key Copied!",
	},
};