import type { ReactElement } from 'react'
import { useState } from 'react'
import { Button, Card, Form, Input, Space, Typography } from '@arco-design/web-react'
import { IconBook, IconCheckCircleFill, IconLaunch, IconSafe, IconUserGroup } from '@arco-design/web-react/icon'

const { Title, Text, Paragraph } = Typography

export function LoginPage({ onLogin }: { onLogin: (input: { server: string; email: string; password: string }) => void }) {
  const [server, setServer] = useState('http://127.0.0.1:8080')
  const [email, setEmail] = useState('demo@senlin.ai')
  const [password, setPassword] = useState('password123')

  return (
    <section className="login-screen">
      <Card className="login-card" bordered>
        <div className="login-brand-panel">
          <div className="brand-lockup large">
            <span className="brand-symbol">S</span>
            <Title heading={2}>SenlinAI</Title>
          </div>
          <Text className="login-slogan">私有部署 · 安全可控的智能协作平台</Text>
          <Text type="secondary">知识沉淀 · 团队协作 · AI 助理</Text>
          <Space className="login-footer-links" size={24}>
            <Text type="secondary">v1.0.0</Text>
            <Text type="secondary">隐私政策</Text>
            <Text type="secondary">服务协议</Text>
            <Text type="secondary">关于 SenlinAI</Text>
          </Space>
        </div>

        <div className="login-form-panel">
          <Title heading={4}>登录到您的 SenlinAI</Title>
          <Text type="secondary">连接私有工作台</Text>
          <Form layout="vertical" className="login-form">
            <Form.Item label="服务器地址（IP 或域名优先）">
              <Input value={server} onChange={setServer} placeholder="例如：https://10.0.0.15:8080" suffix={<IconLaunch />} />
            </Form.Item>
            <Form.Item label="账号">
              <Input value={email} onChange={setEmail} placeholder="请输入用户名或邮箱" />
            </Form.Item>
            <Form.Item label="密码">
              <Input.Password value={password} onChange={setPassword} placeholder="请输入密码" />
            </Form.Item>
            <div className="login-row">
              <Space size={8}>
                <span className="check-dot" />
                <Text>记住服务器地址</Text>
              </Space>
              <Button type="text" size="mini">无法连接?</Button>
            </div>
            <Button type="primary" long size="large" onClick={() => onLogin({ server, email, password })}>
              登录
            </Button>
            <div className="connection-card">
              <IconCheckCircleFill />
              <div>
                <Text className="connection-title">连接正常</Text>
                <Text type="secondary">已连接到 {server}</Text>
              </div>
              <Button type="text" size="mini">更换服务器</Button>
            </div>
          </Form>
        </div>

        <div className="login-value-panel">
          <Title heading={3}>安全 · 专注 · 高效</Title>
          <Paragraph>
            SenlinAI 是面向知识工作者与内部团队的私有部署工作台，帮助团队在统一空间中收集信息、整理知识、协同决策。
          </Paragraph>
          <ValuePoint icon={<IconSafe />} title="私有部署，数据自有" desc="所有数据与模型运行在您的环境中，安全可控。" />
          <ValuePoint icon={<IconBook />} title="知识沉淀，结构清晰" desc="从收集到整理，形成可复用的团队知识库。" />
          <ValuePoint icon={<IconUserGroup />} title="协同高效，聚焦成果" desc="围绕项目与任务协同，减少沟通成本，专注交付。" />
        </div>
      </Card>
    </section>
  )
}

function ValuePoint({ icon, title, desc }: { icon: ReactElement; title: string; desc: string }) {
  return (
    <div className="value-point">
      <span>{icon}</span>
      <div>
        <Text className="value-title">{title}</Text>
        <Text type="secondary">{desc}</Text>
      </div>
    </div>
  )
}