import Foundation
import SwiftUI

// MARK: - FigmaMCP Typography Extensions

public extension TypographyV1 {
    /// Figma MCP Typography namespace
    enum FigmaMCP {
        // MARK: - Typography Tokens

        /// Typography tokens generated from Figma text styles
        /// These match exactly the typography system defined in Figma

        // MARK: - Display Styles (PP Editorial New Light)

        public static let displayLarge: TypographyV1 = .init(
            name: "Display Large",
            size: 40,
            style: .largeTitle,
            weight: .editorialNewLight,
            kerning: -0.8, // -2% letter spacing
            lineHeight: 48
        )

        public static let displayMedium: TypographyV1 = .init(
            name: "Display Medium",
            size: 36,
            style: .largeTitle,
            weight: .editorialNewLight,
            kerning: -0.72, // -2% letter spacing
            lineHeight: 40
        )

        public static let displaySmall: TypographyV1 = .init(
            name: "Display Small",
            size: 28,
            style: .title,
            weight: .editorialNewLight,
            kerning: -0.56, // -2% letter spacing
            lineHeight: 32
        )

        // MARK: - Heading Styles (PP Neue Montreal)

        public static let headingH1: TypographyV1 = .init(
            name: "Heading H1",
            size: 40,
            style: .largeTitle,
            weight: .ppNeueMontrealMedium,
            lineHeight: 48
        )

        public static let headingH2: TypographyV1 = .init(
            name: "Heading H2",
            size: 28,
            style: .title,
            weight: .ppNeueMontrealMedium,
            lineHeight: 32
        )

        public static let headingH3: TypographyV1 = .init(
            name: "Heading H3",
            size: 20,
            style: .title2,
            weight: .ppNeueMontrealMedium,
            lineHeight: 24
        )

        public static let headingH4: TypographyV1 = .init(
            name: "Heading H4",
            size: 16,
            style: .headline,
            weight: .neueMontrealRegular,
            lineHeight: 20
        )

        // MARK: - Paragraph Styles (PP Neue Montreal)

        public static let paragraphLarge: TypographyV1 = .init(
            name: "Paragraph Large",
            size: 18,
            style: .body,
            weight: .neueMontrealRegular,
            lineHeight: 24
        )

        public static let paragraphMedium: TypographyV1 = .init(
            name: "Paragraph Medium",
            size: 16,
            style: .body,
            weight: .neueMontrealRegular,
            lineHeight: 24
        )

        public static let paragraphSmall: TypographyV1 = .init(
            name: "Paragraph Small",
            size: 14,
            style: .body,
            weight: .neueMontrealRegular,
            lineHeight: 20
        )

        public static let paragraphXSmall: TypographyV1 = .init(
            name: "Paragraph XSmall",
            size: 12,
            style: .caption,
            weight: .neueMontrealRegular,
            lineHeight: 16
        )

        // MARK: - Subtitle Styles (PP Neue Montreal Medium)

        public static let subtitleLarge: TypographyV1 = .init(
            name: "Subtitle Large",
            size: 18,
            style: .body,
            weight: .ppNeueMontrealMedium,
            lineHeight: 24
        )

        public static let subtitleMedium: TypographyV1 = .init(
            name: "Subtitle Medium",
            size: 16,
            style: .body,
            weight: .ppNeueMontrealMedium,
            lineHeight: 24
        )

        public static let subtitleSmall: TypographyV1 = .init(
            name: "Subtitle Small",
            size: 14,
            style: .body,
            weight: .ppNeueMontrealMedium,
            lineHeight: 20
        )

        // MARK: - Body Styles (Legacy - keeping for backwards compatibility)

        public static let bodyMedium: TypographyV1 = paragraphMedium

        // MARK: - Swift-vibes Typography Styles (from Constants.swift)

        // These match the typography system used in the swift-vibes project

        // Timecode - 10/12 - Using Input Sans Regular
        public static let timecode: TypographyV1 = .init(
            name: "Timecode",
            size: 10,
            style: .caption2,
            weight: .inputSansRegular,
            lineHeight: 12
        )

        // xSmall (Title) - 12/16 - PPNeueMontreal-Medium
        public static let xSmallTitle: TypographyV1 = .init(
            name: "XSmall Title",
            size: 12,
            style: .caption,
            weight: .ppNeueMontrealMedium,
            lineHeight: 16
        )

        // xSmall (Regular) - 12/16 - PP Neue Montreal
        public static let xSmallRegular: TypographyV1 = .init(
            name: "XSmall Regular",
            size: 12,
            style: .caption,
            weight: .ppNeueMontrealRegular,
            lineHeight: 16
        )

        // Small (Title) - 14/20 - PPNeueMontreal-Medium
        public static let smallTitle: TypographyV1 = .init(
            name: "Small Title",
            size: 14,
            style: .caption,
            weight: .ppNeueMontrealMedium,
            lineHeight: 20
        )

        // Small - 14/20 - PP Neue Montreal
        public static let small: TypographyV1 = .init(
            name: "Small",
            size: 14,
            style: .caption,
            weight: .ppNeueMontrealRegular,
            lineHeight: 20
        )

        // Medium (Title) - 16/24 - PPNeueMontreal-Medium
        public static let mediumTitle: TypographyV1 = .init(
            name: "Medium Title",
            size: 16,
            style: .body,
            weight: .ppNeueMontrealMedium,
            lineHeight: 24
        )

        // Medium (Regular) - 16/24 - PP Neue Montreal
        public static let mediumRegular: TypographyV1 = .init(
            name: "Medium Regular",
            size: 16,
            style: .body,
            weight: .ppNeueMontrealRegular,
            lineHeight: 24
        )

        // Large (Title) - 18/28 - PPNeueMontreal-Medium
        public static let largeTitle: TypographyV1 = .init(
            name: "Large Title",
            size: 18,
            style: .body,
            weight: .ppNeueMontrealMedium,
            lineHeight: 28
        )

        // Large (Regular) - 18/28 - PP Neue Montreal
        public static let largeRegular: TypographyV1 = .init(
            name: "Large Regular",
            size: 18,
            style: .body,
            weight: .ppNeueMontrealRegular,
            lineHeight: 28
        )

        // MARK: - Caption Styles (PP Neue Montreal)

        public static let captionMedium: TypographyV1 = .init(
            name: "Caption Medium",
            size: 14,
            style: .caption,
            weight: .ppNeueMontrealMedium,
            lineHeight: 16
        )

        public static let captionSmall: TypographyV1 = .init(
            name: "Caption Small",
            size: 10,
            style: .caption2,
            weight: .ppNeueMontrealMedium,
            lineHeight: 12
        )
    }
}

// MARK: - Typography Application Extensions

public extension Text {
    /// Apply FigmaMCP typography styles
    func figmaMCPTypography(_ typography: TypographyV1) -> some View {
        self.typographyV1(typography)
    }
}

public extension View {
    /// Apply FigmaMCP typography styles to any view
    func figmaMCPTypography(_ typography: TypographyV1) -> some View {
        self.typographyV1(typography)
    }
}

#if DEBUG

    // MARK: - Preview Support

    struct FigmaMCPTypographyPreview: View {
        var body: some View {
            ScrollView {
                VStack(alignment: .leading, spacing: 24) {
                    Text("FigmaMCP Typography System")
                        .font(.title)
                        .padding(.bottom)

                    VStack(alignment: .leading, spacing: 16) {
                        Text("Display Styles")
                            .font(.headline)

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.displayLarge,
                            sampleText: "Display Large"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.displayMedium,
                            sampleText: "Display Medium"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.displaySmall,
                            sampleText: "Display Small"
                        )
                    }

                    VStack(alignment: .leading, spacing: 16) {
                        Text("Heading Styles")
                            .font(.headline)

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.headingH1,
                            sampleText: "Heading H1"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.headingH2,
                            sampleText: "Heading H2"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.headingH3,
                            sampleText: "Heading H3"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.headingH4,
                            sampleText: "Heading H4"
                        )
                    }

                    VStack(alignment: .leading, spacing: 16) {
                        Text("Paragraph Styles")
                            .font(.headline)

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.paragraphLarge,
                            sampleText: "This is paragraph large text used for larger body content and important descriptions."
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.paragraphMedium,
                            sampleText: "This is paragraph medium text used for general content and standard body text."
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.paragraphSmall,
                            sampleText: "This is paragraph small text used for compact content areas and secondary information."
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.paragraphXSmall,
                            sampleText: "This is paragraph extra small text used for fine print and minimal content."
                        )
                    }

                    VStack(alignment: .leading, spacing: 16) {
                        Text("Subtitle Styles")
                            .font(.headline)

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.subtitleLarge,
                            sampleText: "Subtitle Large for section introductions"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.subtitleMedium,
                            sampleText: "Subtitle Medium for content organization"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.subtitleSmall,
                            sampleText: "Subtitle Small for compact headers"
                        )
                    }

                    VStack(alignment: .leading, spacing: 16) {
                        Text("Caption Styles")
                            .font(.headline)

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.captionMedium,
                            sampleText: "Caption medium text for labels and metadata"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.captionSmall,
                            sampleText: "Caption small for minimal labels"
                        )
                    }

                    VStack(alignment: .leading, spacing: 16) {
                        Text("Swift-vibes Typography Styles")
                            .font(.headline)

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.timecode,
                            sampleText: "00:45 - Timecode style (Input Sans)"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.xSmallTitle,
                            sampleText: "XSmall Title - 12pt Medium"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.xSmallRegular,
                            sampleText: "XSmall Regular - 12pt Regular text for small UI elements"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.smallTitle,
                            sampleText: "Small Title - 14pt Medium"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.small,
                            sampleText: "Small - 14pt Regular text for compact areas"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.mediumTitle,
                            sampleText: "Medium Title - 16pt Medium"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.mediumRegular,
                            sampleText: "Medium Regular - 16pt Regular text for standard content"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.largeTitle,
                            sampleText: "Large Title - 18pt Medium"
                        )

                        TypographySample(
                            typography: TypographyV1.FigmaMCP.largeRegular,
                            sampleText: "Large Regular - 18pt Regular text for prominent content"
                        )
                    }

                    Spacer(minLength: 100)
                }
                .padding()
            }
        }
    }

    struct TypographySample: View {
        let typography: TypographyV1
        let sampleText: String

        var body: some View {
            VStack(alignment: .leading, spacing: 8) {
                // Typography info
                HStack {
                    Text(typography.name)
                        .font(.caption)
                        .fontWeight(.semibold)
                    Spacer()
                    Text("\(Int(typography.size))pt / \(Int(typography.lineHeight))pt")
                        .font(.caption)
                        .foregroundColor(.secondary)
                }

                // Sample text with typography applied
                Text(sampleText)
                    .figmaMCPTypography(typography)
                    .padding(.vertical, 8)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.gray.opacity(0.1))
                    .cornerRadius(8)
            }
            .padding(.vertical, 4)
        }
    }

    #Preview {
        FigmaMCPTypographyPreview()
    }
#endif