import { CodeBlock } from "@astryxdesign/core/CodeBlock";
import { Divider } from "@astryxdesign/core/Divider";
import { Grid } from "@astryxdesign/core/Grid";
import { VStack } from "@astryxdesign/core/Layout";
import { Text } from "@astryxdesign/core/Text";
import { SectionHeader } from "../../../components/SectionHeader";
import { pluginManifest, type AgentPlugin } from "../lib/agent-plugin-data";

interface PluginSettingsSectionProps {
  plugin: AgentPlugin;
}

export function PluginSettingsSection({ plugin }: PluginSettingsSectionProps) {
  return (
    <VStack gap={8}>
      <Grid columns={{ minWidth: 320, max: 2 }} gap={10} align="start">
        <SectionHeader
          title="Package configuration"
          description="Package identity and Agent Plugins compatibility declared by this installation."
          gap={1}
        />
        <Grid columns={{ minWidth: 180, max: 2 }} gap={4}>
          <VStack gap={1}>
            <Text type="supporting" color="secondary">
              Package
            </Text>
            <Text type="body" weight="semibold">
              {plugin.name}
            </Text>
          </VStack>
          <VStack gap={1}>
            <Text type="supporting" color="secondary">
              Version
            </Text>
            <Text type="body" weight="semibold">
              {plugin.version}
            </Text>
          </VStack>
          <VStack gap={1}>
            <Text type="supporting" color="secondary">
              Author
            </Text>
            <Text type="body" weight="semibold">
              {plugin.author}
            </Text>
          </VStack>
          <VStack gap={1}>
            <Text type="supporting" color="secondary">
              Specification
            </Text>
            <Text type="body" weight="semibold">
              Agent Plugins 1.0.0
            </Text>
          </VStack>
        </Grid>
      </Grid>

      <Divider />

      <Grid columns={{ minWidth: 320, max: 2 }} gap={10} align="start">
        <SectionHeader
          title="Installation source"
          description="Source and installation details for this organization-managed package."
          gap={1}
        />
        <VStack gap={4}>
          <VStack gap={1}>
            <Text type="supporting" color="secondary">
              Source
            </Text>
            <Text type="body" weight="semibold">
              {plugin.source}
            </Text>
          </VStack>
          <VStack gap={1}>
            <Text type="supporting" color="secondary">
              Installed
            </Text>
            <Text type="body" weight="semibold">
              {plugin.installedAt}
            </Text>
          </VStack>
        </VStack>
      </Grid>

      <Divider />

      <Grid columns={{ minWidth: 320, max: 2 }} gap={10} align="start">
        <SectionHeader
          title="Plugin manifest"
          description="Read-only manifest for the installed package. Configuration is managed at its source."
          gap={1}
        />
        <CodeBlock
          code={pluginManifest(plugin)}
          language="json"
          title="plugin.json"
          hasCopyButton
          width="100%"
        />
      </Grid>
    </VStack>
  );
}