DesignSystem.swift

//
//  DesignSystem.swift
//  dsespeaking
//
//  Created by AI Assistant on 30/9/2025.
//  设计系统 - 极简硅谷美学（参考OpenAI、Notion）
//

import SwiftUI

// MARK: - 设计系统核心
/// DSE Speaking 设计系统
/// 设计理念：极简、黑白灰、高雅、克制
/// 参考：OpenAI ChatGPT、Notion、Linear
struct DSDesignSystem {
    
    // MARK: - 颜色系统（黑白灰 + 米白色）
    struct Colors {
        
        // MARK: 基础色 - 纯粹的黑白灰
        /// 纯黑（深色模式下为纯白）
        static let black = Color(uiColor: .label)
        /// 纯白（深色模式下为深黑）
        static let white = Color(uiColor: .systemBackground)
        
        // MARK: 灰度系统 - 5级灰阶
        /// 灰度1 - 最浅（背景色）
        static let gray1 = Color(hex: "#FAFAFA") // 米白色背景
        /// 灰度2 - 浅灰（次级背景）
        static let gray2 = Color(hex: "#F5F5F5")
        /// 灰度3 - 中灰（边框、分隔线）
        static let gray3 = Color(hex: "#E5E5E5")
        /// 灰度4 - 深灰（次要文本）
        static let gray4 = Color(hex: "#A3A3A3")
        /// 灰度5 - 最深灰（主要文本）
        static let gray5 = Color(hex: "#262626")
        
        // MARK: 深色模式适配
        /// 背景色 - 自适应
        static let background = Color(light: gray1, dark: Color(hex: "#000000"))
        /// 次级背景 - 自适应
        static let backgroundSecondary = Color(light: gray2, dark: Color(hex: "#0A0A0A"))
        /// 卡片背景 - 自适应
        static let surface = Color(light: .white, dark: Color(hex: "#171717"))
        
        // MARK: 文本色系 - 黑白灰
        /// 主文本 - 最高对比度
        static let textPrimary = Color(light: gray5, dark: .white)
        /// 次要文本 - 中等对比度
        static let textSecondary = Color(light: gray4, dark: Color(hex: "#A3A3A3"))
        /// 三级文本 - 低对比度
        static let textTertiary = Color(light: gray3, dark: Color(hex: "#525252"))
        
        // MARK: 边框和分隔线 - 极淡
        /// 分隔线 - 极浅灰
        static let separator = Color(light: gray3, dark: Color(hex: "#262626"))
        /// 边框 - 几乎不可见
        static let border = Color(light: gray3.opacity(0.6), dark: Color(hex: "#262626").opacity(0.6))
        
        // MARK: 强调色 - 克制使用
        /// 主要操作 - 纯黑（深色模式为纯白）
        static let accent = Color(light: .black, dark: .white)
        /// 成功提示 - 深灰绿
        static let success = Color(hex: "#18181B")
        /// 警告提示 - 中性灰
        static let warning = Color(hex: "#52525B")
        
        // MARK: 特殊效果
        /// 悬停效果 - 极淡遮罩
        static let hoverOverlay = Color.black.opacity(0.03)
        /// 激活效果 - 淡遮罩
        static let activeOverlay = Color.black.opacity(0.06)
    }
    
    // MARK: - 字体系统（更简洁的层级）
    struct Typography {
        // MARK: 标题 - 只保留必要层级
        /// 大标题 - 页面主标题
        static let title = Font.system(size: 32, weight: .semibold, design: .default)
        /// 子标题 - 区块标题
        static let subtitle = Font.system(size: 20, weight: .medium, design: .default)
        
        // MARK: 正文 - 统一字重
        /// 正文 - 标准
        static let body = Font.system(size: 15, weight: .regular, design: .default)
        /// 正文强调
        static let bodyMedium = Font.system(size: 15, weight: .medium, design: .default)
        
        // MARK: 辅助文字
        /// 说明文字
        static let caption = Font.system(size: 13, weight: .regular, design: .default)
        /// 小标签
        static let label = Font.system(size: 12, weight: .medium, design: .default)
    }
    
    // MARK: - 间距系统（8pt网格 + 更多留白）
    struct Spacing {
        static let xs: CGFloat = 8      // 小间距
        static let sm: CGFloat = 12     // 中小间距
        static let md: CGFloat = 16     // 中等间距
        static let lg: CGFloat = 24     // 大间距
        static let xl: CGFloat = 32     // 超大间距
        static let xxl: CGFloat = 48    // 超超大间距
    }
    
    // MARK: - 圆角系统（更小的圆角）
    struct CornerRadius {
        static let sm: CGFloat = 6      // 小圆角
        static let md: CGFloat = 8      // 中等圆角
        static let lg: CGFloat = 12     // 大圆角
    }
    
    // MARK: - 阴影系统（极淡阴影）
    struct Shadows {
        /// 卡片阴影 - 极淡
        static let card = (color: Color.black.opacity(0.04), radius: 8.0, x: 0.0, y: 2.0)
        /// 浮动阴影 - 淡
        static let elevated = (color: Color.black.opacity(0.06), radius: 12.0, x: 0.0, y: 4.0)
    }
    
    // MARK: - 动画系统
    struct Animation {
        static let quick = SwiftUI.Animation.easeOut(duration: 0.15)
        static let standard = SwiftUI.Animation.easeInOut(duration: 0.2)
        static let smooth = SwiftUI.Animation.spring(response: 0.25, dampingFraction: 0.8)
    }
}

// MARK: - Color Extension
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default: (a, r, g, b) = (1, 1, 1, 0)
        }
        self.init(.sRGB, red: Double(r)/255, green: Double(g)/255, blue: Double(b)/255, opacity: Double(a)/255)
    }
    
    /// 根据深浅模式自适应
    init(light: Color, dark: Color) {
        self.init(uiColor: UIColor { $0.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light) })
    }
}

// MARK: - 视图修饰符
extension View {
    
    /// 极简卡片样式 - 纯白背景 + 细边框
    func minimalistCard() -> some View {
        self
            .background(DSDesignSystem.Colors.surface)
            .cornerRadius(DSDesignSystem.CornerRadius.md)
            .overlay(
                RoundedRectangle(cornerRadius: DSDesignSystem.CornerRadius.md)
                    .strokeBorder(DSDesignSystem.Colors.border, lineWidth: 0.5)
            )
    }
    
    /// 主按钮样式 - 自适应黑白反转
    func primaryButton() -> some View {
        self
            .font(DSDesignSystem.Typography.bodyMedium)
            .foregroundColor(DSDesignSystem.Colors.background)
            .frame(height: 44)
            .frame(maxWidth: .infinity)
            .background(DSDesignSystem.Colors.accent)
            .cornerRadius(DSDesignSystem.CornerRadius.sm)
    }
    
    /// 次要按钮样式 - 透明背景 + 细边框
    func secondaryButton() -> some View {
        self
            .font(DSDesignSystem.Typography.bodyMedium)
            .foregroundColor(DSDesignSystem.Colors.textPrimary)
            .frame(height: 44)
            .frame(maxWidth: .infinity)
            .background(DSDesignSystem.Colors.surface)
            .cornerRadius(DSDesignSystem.CornerRadius.sm)
            .overlay(
                RoundedRectangle(cornerRadius: DSDesignSystem.CornerRadius.sm)
                    .strokeBorder(DSDesignSystem.Colors.border, lineWidth: 1)
            )
    }
    
    /// 幽灵按钮 - 纯文字
    func ghostButton() -> some View {
        self
            .font(DSDesignSystem.Typography.bodyMedium)
            .foregroundColor(DSDesignSystem.Colors.textSecondary)
    }
}

/*
 # 设计原则
 
 ## 1. 极简主义
 - 去除所有不必要的装饰
 - 只保留最核心的信息
 - 大量留白，让内容呼吸
 
 ## 2. 黑白灰配色
 - 主色调：黑、白、灰
 - 背景：米白色 #FAFAFA
 - 文本：纯黑 #262626
 - 避免鲜艳色彩
 
 ## 3. 克制的交互
 - 微妙的阴影（几乎看不见）
 - 极淡的边框
 - 平滑的动画
 
 ## 4. 优雅的层次
 - 通过字重区分层级
 - 通过灰度区分重要性
 - 通过留白区分区块
 
 */