import type { Meta, StoryObj } from "@storybook/vue3-vite"
import CodeEditor from "./CodeEditor.vue"

const meta = {
  title: "Elements/Editor/CodeEditor",
  component: CodeEditor,
  tags: ["autodocs"],
  args: {
    label: "Source",
  },
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { CodeEditor } from \"@gxp-dev/mod-ui/editor\"\n```\n\nFull-featured code editor powered by CodeMirror 6. Supports syntax highlighting for JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, SQL, and PHP. Auto-switches to dark theme in dark mode. Includes a language picker and JSON formatter.",
      },
    },
  },
} satisfies Meta<typeof CodeEditor>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "JavaScript" },
}

export const TypeScript: Story = {
  args: {
    label: "TypeScript",
    language: "typescript",
    modelValue: `interface User {\n  id: number\n  name: string\n  email: string\n}\n\nfunction greet(user: User): string {\n  return \`Hello, \${user.name}!\`\n}`,
  },
}

export const JSON: Story = {
  args: {
    label: "Config",
    language: "json",
    modelValue: `{"name":"my-app","version":"1.0.0","dependencies":{"vue":"^3.5.0"}}`,
    helpText: "Use the Format button to pretty-print JSON.",
  },
}

export const HTML: Story = {
  args: {
    label: "Template",
    language: "html",
    modelValue: `<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <title>My Page</title>\n  </head>\n  <body>\n    <h1>Hello World</h1>\n  </body>\n</html>`,
  },
}

export const CSS: Story = {
  args: {
    label: "Styles",
    language: "css",
    modelValue: `:root {\n  --primary: oklch(65% 0.2 260);\n  --radius: 0.5rem;\n}\n\n.btn {\n  border-radius: var(--radius);\n  background: var(--primary);\n  color: white;\n}`,
  },
}

export const Python: Story = {
  args: {
    label: "Script",
    language: "python",
    modelValue: `def fibonacci(n: int) -> list[int]:\n    a, b = 0, 1\n    result = []\n    while a < n:\n        result.append(a)\n        a, b = b, a + b\n    return result\n\nprint(fibonacci(100))`,
  },
}

export const SQL: Story = {
  args: {
    label: "Query",
    language: "sql",
    modelValue: `SELECT\n  u.id,\n  u.name,\n  COUNT(o.id) AS order_count\nFROM users u\nLEFT JOIN orders o ON o.user_id = u.id\nWHERE u.created_at > NOW() - INTERVAL '30 days'\nGROUP BY u.id, u.name\nORDER BY order_count DESC\nLIMIT 20;`,
  },
}

export const YAML: Story = {
  args: {
    label: "Pipeline",
    language: "yaml",
    modelValue: `name: CI\non:\n  push:\n    branches: [main]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - name: Install\n        run: pnpm install\n      - name: Test\n        run: pnpm test\n`,
  },
}

export const TallEditor: Story = {
  args: {
    label: "Large file",
    language: "typescript",
    minHeight: "28rem",
    modelValue: `// A longer file to demonstrate the scrollable editor\nimport { ref, computed } from "vue"\n\nexport function useCounter(initial = 0) {\n  const count = ref(initial)\n  const doubled = computed(() => count.value * 2)\n  function increment() { count.value++ }\n  function decrement() { count.value-- }\n  function reset() { count.value = initial }\n  return { count, doubled, increment, decrement, reset }\n}`,
  },
}

export const Readonly: Story = {
  args: {
    label: "Generated code (read-only)",
    language: "typescript",
    readonly: true,
    modelValue: `// Auto-generated — do not edit\nexport const VERSION = "2.0.0"`,
  },
}

export const Disabled: Story = {
  args: {
    label: "Disabled",
    disabled: true,
    language: "javascript",
    modelValue: `// This field is disabled`,
  },
}

export const WithErrors: Story = {
  args: {
    label: "Config",
    language: "json",
    errors: ["Invalid JSON syntax"],
    modelValue: `{broken json`,
  },
}

export const Required: Story = {
  args: { label: "Script", required: true, language: "python" },
}
