flowchart TD
    %% Definisi Simbol Mermaid:
    %% ([Text]) = Terminator (Oval - Pink)
    %% [/Text/] = Input/Output (Parallelogram - Biru Muda)
    %% [Text]   = Process (Rectangle - Kuning)
    %% {Decision} = Decision (Diamond - Oranye)

    Start([Mulai]) --> InputData[/Input: Dataset filtered_products.csv/]
    InputData --> Cleaning[Proses Cleaning & Seeding ke MySQL]
    Cleaning --> Choice{Pilih Jenis Analisis?}
    
    %% Alur Sistem Rekomendasi (AI)
    Choice -- "Analisis AI" --> CF[User-Based Collaborative Filtering]
    CF --> Cosine[Hitung Cosine Similarity]
    Cosine --> AIResult[/Output: Global Trending Products/]
    
    %% Alur Visualisasi Data
    Choice -- "Visualisasi" --> Aggregasi[Agregasi Data Pendapatan & Kategori]
    Aggregasi --> Charts[Rendering Visual via Chart.js]
    Charts --> StatResult[/Output: Visual Insight Dashboard/]

    AIResult --> Dashboard[/Dashboard Command Center/]
    StatResult --> Dashboard
    
    Dashboard --> Selesai([Selesai])

    %% STYLING SESUAI GAMBAR REFERENSI
    %% Terminator (Pink)
    style Start fill:#f8cecc,stroke:#b85450,stroke-width:2px
    style Selesai fill:#f8cecc,stroke:#b85450,stroke-width:2px

    %% Input/Output (Biru Muda)
    style InputData fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style AIResult fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style StatResult fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style Dashboard fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px

    %% Proses (Kuning)
    style Cleaning fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style CF fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style Cosine fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style Aggregasi fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style Charts fill:#fff2cc,stroke:#d6b656,stroke-width:2px

    %% Decision (Oranye)
    style Choice fill:#ffe6cc,stroke:#d79b00,stroke-width:2px