import { Button, Card, Col, Descriptions, InputNumber, Popconfirm, Row, Space, Switch, Tag, Typography } from "antd"
import type { ServerDetail } from "../../api/servers"
import { formatCycle, formatDate, formatMoney } from "./helpers"

const { Text } = Typography

type RenewalTabProps = {
  server: ServerDetail
  cycles: number
  loading: boolean
  autoRenewLoading: boolean
  maxCycles?: number
  onCyclesChange: (cycles: number) => void
  onSubmit: () => void
  onAutoRenewChange: (enabled: boolean) => void
}

export default function RenewalTab({
  server,
  cycles,
  loading,
  autoRenewLoading,
  maxCycles = 36,
  onCyclesChange,
  onSubmit,
  onAutoRenewChange,
}: RenewalTabProps) {
  const renewUnitAmount = server.next_renew_amount || server.unit_price || 0
  const renewTotalAmount = renewUnitAmount * cycles
  const canRenew = server.status === "active" || server.status === "suspended"
  const autoRenewEnabled = Number(server.auto_renew || 0) === 1

  return (
    <Space orientation="vertical" size={16} style={{ width: "100%" }}>
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={15}>
          <Card variant="outlined" title="续费配置">
            <Space orientation="vertical" size={18} style={{ width: "100%" }}>
              <Descriptions column={1} labelStyle={{ width: 120 }}>
                <Descriptions.Item label="实例">{server.hostname || `实例 #${server.id}`}</Descriptions.Item>
                <Descriptions.Item label="当前到期">{formatDate(server.expires_at)}</Descriptions.Item>
                <Descriptions.Item label="计费周期">
                  <Tag color="blue" style={{ marginInlineEnd: 0 }}>{formatCycle(server.cycle)}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="续费单价">{formatMoney(renewUnitAmount)} / {formatCycle(server.cycle)}</Descriptions.Item>
              </Descriptions>

              <div style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                gap: 12,
                padding: "12px 14px",
                border: "1px solid #f0f0f0",
                borderRadius: 8,
              }}>
                <Space direction="vertical" size={2}>
                  <Space size={8} wrap>
                    <Text strong>自动续费</Text>
                    <Tag color={autoRenewEnabled ? "green" : "default"} style={{ marginInlineEnd: 0 }}>
                      {autoRenewEnabled ? "已开启" : "未开启"}
                    </Tag>
                    <Tag color="blue" style={{ marginInlineEnd: 0 }}>到期前 3 天</Tag>
                  </Space>
                  <Text type="secondary">按当前续费单价自动扣除账户余额。</Text>
                </Space>
                <Switch
                  checked={autoRenewEnabled}
                  loading={autoRenewLoading}
                  disabled={server.status === "terminated"}
                  onChange={onAutoRenewChange}
                />
              </div>

              <Space orientation="vertical" size={8} style={{ width: "100%" }}>
                <Text strong>续费周期数</Text>
                <InputNumber
                  min={1}
                  max={maxCycles}
                  value={cycles}
                  onChange={(value) => onCyclesChange(Number(value || 1))}
                  addonAfter={formatCycle(server.cycle)}
                  style={{ width: 220 }}
                />
              </Space>
            </Space>
          </Card>
        </Col>
        <Col xs={24} lg={9}>
          <Card variant="outlined" title="费用确认">
            <Space orientation="vertical" size={14} style={{ width: "100%" }}>
              <div>
                <Text type="secondary">应付金额</Text>
                <div style={{ marginTop: 4 }}>
                  <Text strong style={{ fontSize: 28, color: "#1677ff" }}>{formatMoney(renewTotalAmount)}</Text>
                </div>
              </div>
              <Text type="secondary">
                续费成功后会立即扣除账户余额，并按当前计费周期延长实例到期时间。
              </Text>
              <Popconfirm
                title="确认续费该实例？"
                description={`本次将扣除 ${formatMoney(renewTotalAmount)}`}
                okText="确认续费"
                cancelText="取消"
                onConfirm={onSubmit}
                disabled={!canRenew || renewTotalAmount <= 0}
              >
                <Button
                  type="primary"
                  block
                  loading={loading}
                  disabled={!canRenew || renewTotalAmount <= 0}
                >
                  立即续费
                </Button>
              </Popconfirm>
              {!canRenew && <Text type="secondary">当前实例状态不支持续费。</Text>}
            </Space>
          </Card>
        </Col>
      </Row>
    </Space>
  )
}
