import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { Text } from "@mantine/core";
import { ConnectedView } from "./ConnectedView.js";
import { ToolsScreen } from "../../screens/ToolsScreen/ToolsScreen";
import { ResourcesScreen } from "../../screens/ResourcesScreen/ResourcesScreen";
import { PromptsScreen } from "../../screens/PromptsScreen/PromptsScreen";
import { LoggingScreen } from "../../screens/LoggingScreen/LoggingScreen";
import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";

import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
import type { LogEntryData } from "../../elements/LogEntry/LogEntry";

const allTabs = ["Tools", "Resources", "Prompts", "Logs", "Tasks", "History"];

const logMessages: { level: LoggingLevel; data: string; logger?: string }[] = [
  { level: "info", data: "Server started on port 3000" },
  {
    level: "debug",
    data: "Loading configuration from /etc/mcp/config.json",
    logger: "config",
  },
  {
    level: "warning",
    data: "Deprecated API endpoint called: /v1/tools",
    logger: "http",
  },
  { level: "info", data: "Client connected: inspector-web-ui" },
  {
    level: "error",
    data: "Failed to read resource: file not found at /data/missing.txt",
    logger: "resources",
  },
  {
    level: "info",
    data: "Tool execution completed: search_files (245ms)",
    logger: "tools",
  },
  {
    level: "debug",
    data: "Parsing JSON-RPC request body",
    logger: "transport",
  },
  {
    level: "info",
    data: "Listing available tools for client session",
    logger: "tools",
  },
  {
    level: "warning",
    data: "Slow query detected: 1200ms for resource lookup",
    logger: "db",
  },
  {
    level: "info",
    data: "Resource subscription added: file:///config.json",
    logger: "resources",
  },
  {
    level: "debug",
    data: "Heartbeat ping received from client",
    logger: "session",
  },
  {
    level: "error",
    data: "Permission denied reading /etc/secrets.env",
    logger: "resources",
  },
  {
    level: "info",
    data: "Prompt 'summarize' resolved with 2 messages",
    logger: "prompts",
  },
  {
    level: "debug",
    data: "Cache hit for resource: db://users/42",
    logger: "cache",
  },
  {
    level: "info",
    data: "Tool 'create_record' executed successfully in 89ms",
    logger: "tools",
  },
  {
    level: "warning",
    data: "Client reconnection attempt #3",
    logger: "session",
  },
  {
    level: "info",
    data: "New resource detected: file:///data/output.csv",
    logger: "resources",
  },
  {
    level: "debug",
    data: "Serializing response payload (2.4KB)",
    logger: "transport",
  },
  {
    level: "error",
    data: "Timeout waiting for tool response after 30s",
    logger: "tools",
  },
  {
    level: "info",
    data: "Session initialized with capabilities: tools, resources, prompts",
  },
  {
    level: "debug",
    data: "Validating input schema for tool 'batch_process'",
    logger: "tools",
  },
  {
    level: "info",
    data: "Resource template resolved: db://tables/users/rows/15",
    logger: "resources",
  },
  {
    level: "warning",
    data: "Memory usage at 78% — consider increasing limits",
    logger: "system",
  },
  {
    level: "info",
    data: "Client disconnected gracefully",
    logger: "session",
  },
  {
    level: "debug",
    data: "Flushing log buffer to disk (128 entries)",
    logger: "logging",
  },
];

function pad(n: number): string {
  return n.toString().padStart(2, "0");
}

const sampleLogEntries: LogEntryData[] = Array.from({ length: 50 }, (_, i) => {
  const src = logMessages[i % logMessages.length];
  return {
    receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
    params: { level: src.level, data: src.data, logger: src.logger },
  };
});

const meta: Meta<typeof ConnectedView> = {
  title: "Views/ConnectedView",
  component: ConnectedView,
  parameters: { layout: "fullscreen" },
  args: {
    serverInfo: { name: "my-mcp-server", version: "1.0.0" },
    status: "connected",
    latencyMs: 23,
    availableTabs: allTabs,
    activeTab: "Tools",
    onTabChange: fn(),
    onDisconnect: fn(),
    onToggleTheme: fn(),
  },
};

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

export const ToolsActive: Story = {
  args: {
    activeTab: "Tools",
    children: (
      <ToolsScreen
        tools={[
          {
            name: "send_message",
            title: "Send Message",
            inputSchema: { type: "object" },
          },
          {
            name: "create_record",
            title: "Create Record",
            description: "Creates a new record with the given parameters",
            inputSchema: {
              type: "object",
              properties: {
                title: { type: "string", description: "Record title" },
                count: { type: "number", description: "Number of items" },
                enabled: {
                  type: "boolean",
                  description: "Whether the record is active",
                },
              },
              required: ["title"],
            },
          },
          {
            name: "delete_records",
            title: "Delete Records",
            inputSchema: { type: "object" },
          },
          {
            name: "list_users",
            title: "List Users",
            inputSchema: { type: "object" },
          },
          {
            name: "batch_process",
            title: "Batch Process",
            inputSchema: { type: "object" },
          },
          {
            name: "search_files",
            title: "Search Files",
            inputSchema: { type: "object" },
          },
          {
            name: "read_file",
            title: "Read File",
            inputSchema: { type: "object" },
          },
          {
            name: "write_file",
            title: "Write File",
            inputSchema: { type: "object" },
          },
          {
            name: "get_schema",
            title: "Get Schema",
            inputSchema: { type: "object" },
          },
          {
            name: "run_query",
            title: "Run Query",
            inputSchema: { type: "object" },
          },
          {
            name: "create_migration",
            title: "Create Migration",
            inputSchema: { type: "object" },
          },
          {
            name: "validate_config",
            title: "Validate Config",
            inputSchema: { type: "object" },
          },
          {
            name: "deploy_service",
            title: "Deploy Service",
            inputSchema: { type: "object" },
          },
          {
            name: "rollback_deploy",
            title: "Rollback Deploy",
            inputSchema: { type: "object" },
          },
          {
            name: "check_health",
            title: "Check Health",
            inputSchema: { type: "object" },
          },
          {
            name: "generate_report",
            title: "Generate Report",
            inputSchema: { type: "object" },
          },
          {
            name: "export_csv",
            title: "Export CSV",
            inputSchema: { type: "object" },
          },
          {
            name: "import_data",
            title: "Import Data",
            inputSchema: { type: "object" },
          },
          {
            name: "send_notification",
            title: "Send Notification",
            inputSchema: { type: "object" },
          },
          {
            name: "schedule_task",
            title: "Schedule Task",
            inputSchema: { type: "object" },
          },
          {
            name: "cancel_task",
            title: "Cancel Task",
            inputSchema: { type: "object" },
          },
          {
            name: "list_connections",
            title: "List Connections",
            inputSchema: { type: "object" },
          },
          {
            name: "refresh_cache",
            title: "Refresh Cache",
            inputSchema: { type: "object" },
          },
          {
            name: "purge_logs",
            title: "Purge Logs",
            inputSchema: { type: "object" },
          },
          {
            name: "encrypt_secret",
            title: "Encrypt Secret",
            inputSchema: { type: "object" },
          },
          {
            name: "rotate_keys",
            title: "Rotate Keys",
            inputSchema: { type: "object" },
          },
          {
            name: "sync_resources",
            title: "Sync Resources",
            inputSchema: { type: "object" },
          },
          {
            name: "compile_template",
            title: "Compile Template",
            inputSchema: { type: "object" },
          },
          {
            name: "analyze_performance",
            title: "Analyze Performance",
            inputSchema: { type: "object" },
          },
          {
            name: "resize_image",
            title: "Resize Image",
            inputSchema: { type: "object" },
          },
        ]}
        selectedToolName="create_record"
        callState={{
          status: "ok",
          result: {
            content: [
              {
                type: "text",
                text: JSON.stringify(
                  {
                    id: 42,
                    title: "New Record",
                    count: 5,
                    enabled: true,
                    createdAt: "2026-03-17T12:00:00Z",
                  },
                  null,
                  2,
                ),
              },
            ],
          },
        }}
        listChanged={true}
        onRefreshList={fn()}
        onSelectTool={fn()}
        onCallTool={fn()}
        onCancelCall={fn()}
        onClearResult={fn()}
      />
    ),
  },
};

export const ResourcesActive: Story = {
  args: {
    activeTab: "Resources",
    children: (
      <ResourcesScreen
        resources={[
          {
            name: "config.json",
            uri: "file:///config.json",
            annotations: { audience: ["user"], priority: 0.8 },
          },
          { name: "README.md", uri: "file:///README.md" },
          {
            name: "schema.sql",
            uri: "file:///schema.sql",
            annotations: { priority: 0.5 },
          },
          { name: "package.json", uri: "file:///package.json" },
          { name: ".env.example", uri: "file:///.env.example" },
          {
            name: "docker-compose.yml",
            uri: "file:///docker-compose.yml",
            annotations: { priority: 0.6 },
          },
          {
            name: "migrations/001_init.sql",
            uri: "file:///migrations/001_init.sql",
          },
          {
            name: "logs/error.log",
            uri: "file:///logs/error.log",
            annotations: { priority: 0.7 },
          },
          { name: "api-spec.yaml", uri: "file:///api-spec.yaml" },
          { name: "Makefile", uri: "file:///Makefile" },
        ]}
        templates={[
          {
            name: "User Profile",
            uriTemplate: "file:///users/{userId}/profile",
            description: "Fetch a user profile by their unique identifier.",
          },
          {
            name: "Table Row",
            title: "Database Table Row",
            uriTemplate: "db://tables/{tableName}/rows/{rowId}",
          },
          {
            name: "Log File",
            title: "Application Log",
            uriTemplate: "file:///logs/{service}/{date}.log",
          },
        ]}
        subscriptions={[
          {
            resource: { name: "config.json", uri: "file:///config.json" },
            lastUpdated: new Date("2026-03-17T10:30:00Z"),
          },
          {
            resource: { name: "schema.sql", uri: "file:///schema.sql" },
            lastUpdated: new Date("2026-03-17T10:28:00Z"),
          },
        ]}
        selectedTemplateUri="file:///users/{userId}/profile"
        selectedResourceUri="file:///users/42/profile"
        readState={{
          status: "ok",
          uri: "file:///users/42/profile",
          result: {
            contents: [
              {
                uri: "file:///users/42/profile",
                mimeType: "application/json",
                text: JSON.stringify(
                  { id: 42, name: "Alice", email: "alice@example.com" },
                  null,
                  2,
                ),
              },
            ],
          },
          lastUpdated: new Date("2026-03-17T11:15:00Z"),
          isSubscribed: false,
        }}
        listChanged={true}
        onRefreshList={fn()}
        onSelectUri={fn()}
        onSelectTemplate={fn()}
        onReadResource={fn()}
        onSubscribeResource={fn()}
        onUnsubscribeResource={fn()}
      />
    ),
  },
};

export const PromptsActive: Story = {
  args: {
    activeTab: "Prompts",
    children: (
      <PromptsScreen
        prompts={[
          {
            name: "summarize",
            description: "Summarize a document",
          },
          {
            name: "translate",
            description: "Translate text to another language",
            arguments: [
              {
                name: "text",
                required: true,
                description: "The text to translate",
              },
              {
                name: "targetLanguage",
                required: true,
                description: "Target language code",
              },
            ],
          },
          {
            name: "code-review",
            description: "Review code for issues",
          },
        ]}
        selectedPromptName="translate"
        getPromptState={{
          status: "ok",
          result: {
            messages: [
              {
                role: "user",
                content: {
                  type: "text",
                  text: 'Translate the following text to Spanish: "Hello, how are you?"',
                },
              },
              {
                role: "assistant",
                content: { type: "text", text: "Hola, como estas?" },
              },
            ],
          },
        }}
        listChanged={true}
        onRefreshList={fn()}
        onSelectPrompt={fn()}
        onGetPrompt={fn()}
        onCopyMessages={fn()}
      />
    ),
  },
};

export const LoggingActive: Story = {
  args: {
    activeTab: "Logs",
    children: (
      <LoggingScreen
        currentLevel="info"
        onSetLevel={fn()}
        onClear={fn()}
        onExport={fn()}
        entries={sampleLogEntries}
        autoScroll={true}
        onToggleAutoScroll={fn()}
        onCopyAll={fn()}
      />
    ),
  },
};

export const TasksActive: Story = {
  args: {
    activeTab: "Tasks",
    children: (
      <TasksScreen
        tasks={[
          {
            taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
            status: "working",
            ttl: 300000,
            createdAt: "2026-03-29T20:18:20Z",
            lastUpdatedAt: "2026-03-29T20:18:22Z",
            statusMessage: "Processing records 650 of 1000...",
          },
          {
            taskId: "4100b5e0b0ed9cd0023330342d1bf647",
            status: "input_required",
            ttl: 300000,
            createdAt: "2026-03-29T20:17:55Z",
            lastUpdatedAt: "2026-03-29T20:17:55Z",
          },
          {
            taskId: "d487b49aa39023d907b5a2a5b506cb3",
            status: "completed",
            ttl: 300000,
            createdAt: "2026-03-29T20:16:47Z",
            lastUpdatedAt: "2026-03-29T20:16:49Z",
          },
          {
            taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
            status: "failed",
            ttl: 300000,
            createdAt: "2026-03-29T20:17:27Z",
            lastUpdatedAt: "2026-03-29T20:17:57Z",
            statusMessage: "Timeout waiting for tool response after 30s",
          },
        ]}
        progressByTaskId={{
          d0b22eba71fa36229ce5c4dfadeaa7de: {
            progress: 650,
            total: 1000,
            message: "Processing records 650 of 1000...",
          },
        }}
        onRefresh={fn()}
        onClearCompleted={fn()}
        onCancel={fn()}
      />
    ),
  },
};

export const HistoryActive: Story = {
  args: {
    activeTab: "History",
    children: (
      <HistoryScreen
        entries={[
          {
            id: "req-1",
            timestamp: new Date("2026-03-17T10:00:00Z"),
            direction: "request" as const,
            message: {
              jsonrpc: "2.0" as const,
              id: 1,
              method: "tools/call",
              params: {
                name: "send_message",
                arguments: { message: "Hello, world!" },
              },
            },
            response: {
              jsonrpc: "2.0" as const,
              id: 1,
              result: {
                content: [{ type: "text", text: "Message sent successfully" }],
              },
            },
            duration: 120,
          },
          {
            id: "req-2",
            timestamp: new Date("2026-03-17T10:01:00Z"),
            direction: "request" as const,
            message: {
              jsonrpc: "2.0" as const,
              id: 2,
              method: "resources/read",
              params: { uri: "file:///config.json" },
            },
            response: {
              jsonrpc: "2.0" as const,
              id: 2,
              result: {
                contents: [{ uri: "file:///config.json", text: "{}" }],
              },
            },
            duration: 45,
          },
          {
            id: "req-3",
            timestamp: new Date("2026-03-17T10:02:00Z"),
            direction: "request" as const,
            message: {
              jsonrpc: "2.0" as const,
              id: 3,
              method: "tools/call",
              params: { name: "delete_records", arguments: { ids: [1, 2, 3] } },
            },
            response: {
              jsonrpc: "2.0" as const,
              id: 3,
              error: { code: -32000, message: "Permission denied" },
            },
            duration: 350,
          },
          {
            id: "req-4",
            timestamp: new Date("2026-03-17T09:30:00Z"),
            direction: "request" as const,
            message: { jsonrpc: "2.0" as const, id: 4, method: "tools/list" },
            response: { jsonrpc: "2.0" as const, id: 4, result: { tools: [] } },
            duration: 80,
          },
          {
            id: "req-5",
            timestamp: new Date("2026-03-17T09:35:00Z"),
            direction: "request" as const,
            message: {
              jsonrpc: "2.0" as const,
              id: 5,
              method: "prompts/get",
              params: { name: "greeting" },
            },
            response: {
              jsonrpc: "2.0" as const,
              id: 5,
              result: {
                messages: [
                  { role: "user", content: { type: "text", text: "Hello!" } },
                ],
              },
            },
            duration: 60,
          },
        ]}
        pinnedIds={new Set(["req-4", "req-5"])}
        onClearAll={fn()}
        onExport={fn()}
        onReplay={fn()}
        onTogglePin={fn()}
      />
    ),
  },
};

export const LimitedTabs: Story = {
  args: {
    availableTabs: ["Tools", "Resources", "Prompts"],
    children: <Text>Tools screen content</Text>,
  },
};

export const LongServerName: Story = {
  args: {
    serverInfo: {
      name: "my-very-long-server-name-that-might-overflow-is",
      version: "1.0.0",
    },
    children: <Text>Tools screen content</Text>,
  },
};