import type { WorkflowMetrics } from "../lib/usageMetrics";

interface LibraryCommandCenterProps {
    totalSessions: number;
    readySessions: number;
    convertingSessions: number;
    terminalSessions: number;
    workflowMetrics: WorkflowMetrics;
    latestReadySessionId: string | null;
    onStartRecording: () => void;
    onOpenLatestReady: () => void;
}

const styles = {
    shell: {
        marginTop: "18px",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-default)",
        background:
            "linear-gradient(145deg, color-mix(in srgb, var(--accent-1) 14%, var(--bg-surface)) 0%, var(--bg-surface) 45%, var(--bg-elevated) 100%)",
        boxShadow: "0 16px 34px rgba(0, 0, 0, 0.24)",
        padding: "18px",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
        gap: "16px",
    },
    headlineCol: {
        minWidth: 0,
    },
    badge: {
        display: "inline-flex",
        alignItems: "center",
        gap: "6px",
        padding: "4px 10px",
        borderRadius: "999px",
        border: "1px solid color-mix(in srgb, var(--accent-1) 45%, transparent)",
        background: "color-mix(in srgb, var(--accent-1) 20%, transparent)",
        color: "var(--accent-1)",
        fontSize: "11px",
        fontWeight: 700,
        letterSpacing: "0.04em",
        textTransform: "uppercase" as const,
    },
    title: {
        marginTop: "10px",
        fontSize: "24px",
        letterSpacing: "-0.02em",
        lineHeight: 1.2,
        fontWeight: 760,
        color: "var(--text-primary)",
    },
    subtitle: {
        marginTop: "8px",
        maxWidth: "560px",
        fontSize: "13px",
        lineHeight: 1.55,
        color: "var(--text-secondary)",
    },
    actionRow: {
        marginTop: "14px",
        display: "flex",
        flexWrap: "wrap" as const,
        gap: "10px",
    },
    actionPrimary: {
        height: "38px",
        padding: "0 14px",
        borderRadius: "10px",
        border: "1px solid color-mix(in srgb, var(--accent-1) 35%, transparent)",
        background: "var(--accent-1)",
        color: "#fff",
        fontSize: "13px",
        fontWeight: 700,
        display: "inline-flex",
        alignItems: "center",
        gap: "8px",
        cursor: "pointer",
    },
    actionSecondary: {
        height: "38px",
        padding: "0 14px",
        borderRadius: "10px",
        border: "1px solid var(--border-default)",
        background: "var(--bg-elevated)",
        color: "var(--text-primary)",
        fontSize: "13px",
        fontWeight: 650,
        display: "inline-flex",
        alignItems: "center",
        gap: "8px",
        cursor: "pointer",
    },
    metricsCol: {
        display: "grid",
        gridTemplateColumns: "repeat(2, minmax(120px, 1fr))",
        gap: "10px",
        alignContent: "start",
    },
    metricCard: {
        borderRadius: "12px",
        border: "1px solid var(--border-default)",
        background: "rgba(0, 0, 0, 0.18)",
        padding: "12px",
        minHeight: "86px",
    },
    metricLabel: {
        fontSize: "11px",
        textTransform: "uppercase" as const,
        letterSpacing: "0.05em",
        color: "var(--text-muted)",
        fontWeight: 700,
    },
    metricValue: {
        marginTop: "8px",
        fontSize: "24px",
        lineHeight: 1,
        fontWeight: 760,
        color: "var(--text-primary)",
    },
    metricHint: {
        marginTop: "6px",
        fontSize: "12px",
        color: "var(--text-tertiary)",
        lineHeight: 1.35,
    },
    footerHint: {
        marginTop: "10px",
        fontSize: "12px",
        color: "var(--text-muted)",
        fontFamily: "var(--font-mono)",
    },
    insightsRow: {
        marginTop: "10px",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))",
        gap: "8px",
    },
    insightCard: {
        borderRadius: "10px",
        border: "1px solid var(--border-default)",
        background: "rgba(0, 0, 0, 0.14)",
        padding: "8px 10px",
    },
    insightLabel: {
        fontSize: "11px",
        color: "var(--text-muted)",
        textTransform: "uppercase" as const,
        letterSpacing: "0.05em",
        fontWeight: 700,
    },
    insightValue: {
        marginTop: "4px",
        color: "var(--text-primary)",
        fontSize: "13px",
        fontWeight: 700,
        fontFamily: "var(--font-mono)",
    },
};

function LibraryCommandCenter({
    totalSessions,
    readySessions,
    convertingSessions,
    terminalSessions,
    workflowMetrics,
    latestReadySessionId,
    onStartRecording,
    onOpenLatestReady,
}: LibraryCommandCenterProps) {
    const readyRate = totalSessions > 0 ? Math.round((readySessions / totalSessions) * 100) : 0;
    const canResume = Boolean(latestReadySessionId);
    const recordToShareText =
        workflowMetrics.medianRecordToShareSeconds == null
            ? "--"
            : `${workflowMetrics.medianRecordToShareSeconds}s`;
    const editLoadText =
        workflowMetrics.medianEditsPerSharedSession == null
            ? "--"
            : String(workflowMetrics.medianEditsPerSharedSession);

    return (
        <section style={styles.shell}>
            <div style={styles.headlineCol}>
                <div style={styles.badge}>
                    <span aria-hidden>&#9889;</span>
                    Command Center
                </div>
                <div style={styles.title}>Record - Refine - Share without breaking flow.</div>
                <p style={styles.subtitle}>
                    Keep momentum high with a fast capture loop. Start a new recording, or jump
                    straight back into your latest session and ship it.
                </p>
                <div style={styles.actionRow}>
                    <button type="button" style={styles.actionPrimary} onClick={onStartRecording}>
                        <span aria-hidden>&#9679;</span>
                        Start capture
                    </button>
                    <button
                        type="button"
                        style={{
                            ...styles.actionSecondary,
                            opacity: canResume ? 1 : 0.55,
                            cursor: canResume ? "pointer" : "not-allowed",
                        }}
                        onClick={onOpenLatestReady}
                        disabled={!canResume}
                    >
                        Resume latest
                    </button>
                </div>
                <div style={styles.footerHint}>
                    Target for this sprint: record-to-share in under 60 seconds.
                </div>
                <div style={styles.insightsRow}>
                    <div style={styles.insightCard}>
                        <div style={styles.insightLabel}>Median Record to Share</div>
                        <div style={styles.insightValue}>{recordToShareText}</div>
                    </div>
                    <div style={styles.insightCard}>
                        <div style={styles.insightLabel}>Share Completion</div>
                        <div style={styles.insightValue}>
                            {workflowMetrics.shareCompletionRate}%
                        </div>
                    </div>
                    <div style={styles.insightCard}>
                        <div style={styles.insightLabel}>Median Edits per Shared Run</div>
                        <div style={styles.insightValue}>{editLoadText}</div>
                    </div>
                </div>
            </div>

            <div style={styles.metricsCol}>
                <div style={styles.metricCard}>
                    <div style={styles.metricLabel}>Ready Now</div>
                    <div style={styles.metricValue}>{readySessions}</div>
                    <div style={styles.metricHint}>{readyRate}% of library publishable</div>
                </div>
                <div style={styles.metricCard}>
                    <div style={styles.metricLabel}>Converting</div>
                    <div style={styles.metricValue}>{convertingSessions}</div>
                    <div style={styles.metricHint}>Awaiting step extraction</div>
                </div>
                <div style={styles.metricCard}>
                    <div style={styles.metricLabel}>Terminal Runs</div>
                    <div style={styles.metricValue}>{terminalSessions}</div>
                    <div style={styles.metricHint}>Command-rich walkthroughs</div>
                </div>
                <div style={styles.metricCard}>
                    <div style={styles.metricLabel}>Library</div>
                    <div style={styles.metricValue}>{totalSessions}</div>
                    <div style={styles.metricHint}>Sessions captured so far</div>
                </div>
            </div>
        </section>
    );
}

export default LibraryCommandCenter;