import { Button, Card, Icon, Space, Tag, Text, Title } from '@stash/ui'
import type { Project } from '../../api'

/**
 * 本地服务面板：连接状态、项目数、访问地址，以及两个操作入口。
 * 只读展示 + 触发刷新，不负责导航。
 */
type ServicePanelProps = {
  projects: Project[]
  live: boolean
  refreshing: boolean
  onRefresh: () => void
  /** 打开接口一览：走站内路由，不整页刷新 */
  onOpenApi: () => void
}

export function ServicePanel({
  projects,
  live,
  refreshing,
  onRefresh,
  onOpenApi,
}: ServicePanelProps) {
  const host = typeof window === 'undefined' ? '-' : window.location.host

  return (
    <Card padding="none" className="service-panel">
      <Space justify="between">
        <Title level={4} as="h2" weight="semibold">
          本地服务
        </Title>
        <Tag tone={live ? 'success' : 'neutral'} dot className="service-status">
          {live ? '已连接' : '未连接'}
        </Tag>
      </Space>

      <div className="service-stats">
        <Space justify="between">
          <Text size="xs" tone="sub">
            项目数
          </Text>
          <Text size="xs" strong>{projects.length}</Text>
        </Space>
        <Space justify="between">
          <Text size="xs" tone="sub">
            访问地址
          </Text>
          <Text size="xs" truncate title={host} className="service-host">
            {host}
          </Text>
        </Space>
      </div>

      <div className="service-actions">
        <Button
          size="sm"
          variant="secondary"
          className="service-action"
          spinning={refreshing}
          icon={<Icon name="refresh_3_line" />}
          onClick={onRefresh}
          title="重新扫描项目"
        >
          重新扫描
        </Button>

        <a
          className="link-button"
          href="/interface"
          onClick={(event) => {
            // 无修饰键时接管点击，走站内路由，只换右侧内容；按住修饰键仍可新标签打开
            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
            event.preventDefault()
            onOpenApi()
          }}
        >
          <Icon name="link_3_line" />
          查看接口
        </a>
      </div>
    </Card>
  )
}