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
}

export function ServicePanel({ projects, live, refreshing, onRefresh }: 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="/api/projects" target="_blank" rel="noreferrer">
          <Icon name="link_3_line" />
          查看接口
        </a>
      </div>
    </Card>
  )
}