# import mysql.connector
# import gradio as gr

# # Koneksi ke database MySQL
# conn = mysql.connector.connect(
#     host="localhost",
#     user="root",
#     password="",  # kosong karena kamu nggak pakai password
#     database="kain_gringsing"
# )

# def search_motif(keyword):
#     cursor = conn.cursor()
#     query = "SELECT nama_motif, gambar, makna, sejarah, kegunaan FROM motif WHERE nama_motif LIKE %s"
#     cursor.execute(query, ('%' + keyword + '%',))
#     result = cursor.fetchone()

#     if result:
#         nama_motif, gambar_url, makna, sejarah, kegunaan = result
#         return (
#             f"**Nama Motif:** {nama_motif}\n\n"
#             f"**Makna:** {makna}\n\n"
#             f"**Sejarah:** {sejarah}\n\n"
#             f"**Kegunaan:** {kegunaan}\n\n",
#             gambar_url
#         )
#     else:
#         return "Motif tidak ditemukan.", None

# # Komponen Gradio
# input_text = gr.Textbox(label="Cari Nama Motif")
# output_text = gr.Markdown()
# output_image = gr.Image(type="pil", label="Gambar Motif")

# gr.Interface(
#     fn=search_motif,
#     inputs=input_text,
#     outputs=[output_text, output_image],
#     title="Pencarian Motif Kain Gringsing"
# ).launch()

# import mysql.connector
# import gradio as gr

# def get_motif_list():
#     conn = mysql.connector.connect(
#         host='localhost',
#         user='root',
#         password='',
#         database='kain_gringsing'
#     )
#     cursor = conn.cursor()
#     cursor.execute("SELECT nama_motif FROM motif ORDER BY nama_motif")
#     data = cursor.fetchall()
#     conn.close()
#     return [row[0] for row in data]

# def search_motif(nama_motif):
#     conn = mysql.connector.connect(
#         host='localhost',
#         user='root',
#         password='',
#         database='kain_gringsing'
#     )
#     cursor = conn.cursor(dictionary=True)

#     # Ambil data motif berdasarkan nama_motif yang dipilih (case insensitive)
#     query = "SELECT * FROM motif WHERE LOWER(nama_motif) = %s"
#     cursor.execute(query, (nama_motif.lower(),))
#     motif = cursor.fetchone()
#     if not motif:
#         conn.close()
#         return None, "Motif tidak ditemukan", "", ""

#     # Ambil proses
#     cursor.execute("SELECT proses_pembuatan FROM proses WHERE id_motif = %s", (motif["id_motif"],))
#     proses = cursor.fetchone()

#     # Ambil sumber
#     cursor.execute("SELECT nama_narasumber, tanggal_wawancara FROM sumber WHERE id_motif = %s", (motif["id_motif"],))
#     sumber = cursor.fetchone()

#     conn.close()

#     info = f"""**Makna:** {motif['makna']}\n\n**Sejarah:** {motif['sejarah']}\n\n**Kegunaan:** {motif['kegunaan']}"""
#     proses_text = proses['proses_pembuatan'] if proses else "Data proses tidak ditemukan"
#     sumber_text = f"{sumber['nama_narasumber']} ({sumber['tanggal_wawancara']})" if sumber else "Data narasumber tidak ditemukan"

#     return motif['gambar'], info, proses_text, sumber_text


# motif_list = get_motif_list()

# with gr.Blocks() as demo:
#     gr.Markdown("#Cari Motif Kain Gringsing")

#     with gr.Row():
#         dropdown_motif = gr.Dropdown(choices=motif_list, label="Pilih Nama Motif")
#         button_cari = gr.Button("Cari")

#     gambar = gr.Image(label="Gambar Motif")
#     info_motif = gr.Markdown()

#     with gr.Accordion("Teknik Pembuatan"):
#         markdown_proses = gr.Markdown()

#     with gr.Accordion("Sumber Informasi"):
#         markdown_sumber = gr.Markdown()

#     button_cari.click(
#         fn=search_motif,
#         inputs=[dropdown_motif],
#         outputs=[gambar, info_motif, markdown_proses, markdown_sumber]
#     )

# demo.launch()

# import gradio as gr
# import pandas as pd

# # Load CSV
# df = pd.read_csv("motif_kain_gringsing.csv")

# # List nama motif saja
# motif_list = df["nama_motif"].tolist()

# # Fungsi untuk menampilkan detail setelah diklik
# def tampilkan_detail(nama_motif):
#     row = df[df["nama_motif"] == nama_motif].iloc[0]
#     return (
#         row["gambar"],
#         f"""
# ### {row['nama_motif']}

# **Makna**: {row['makna']}

# **Elemen Motif**: {row['gambar_dalam_motif']}

# **Kegunaan**: {row['kegunaan']}
# """
#     )

# # UI
# with gr.Blocks(css="""
# .gradio-container {
#     font-family: 'Segoe UI', sans-serif;
#     background: #fffdf8;
#     padding: 20px;
# }
# h1 { text-align: center; color: #6e0000; }
# """) as demo:
#     gr.Markdown("#MOTIF KAIN GRINGSING")
#     gr.Markdown("Pilih nama motif di bawah untuk melihat detail gambarnya dan filosofinya.\n")

#     dropdown = gr.Dropdown(choices=motif_list, label="Pilih Motif", interactive=True)

#     image_output = gr.Image()
#     detail_output = gr.Markdown()

#     dropdown.change(fn=tampilkan_detail, inputs=dropdown, outputs=[image_output, detail_output])

# demo.launch(share=True)

import gradio as gr
import pandas as pd

# Load CSV
df = pd.read_csv("motif_kain_gringsing.csv")

# List nama motif saja
motif_list = df["nama_motif"].tolist()

# Fungsi untuk menampilkan detail setelah diklik (pakai collapsible)
def tampilkan_detail(nama_motif):
    row = df[df["nama_motif"] == nama_motif].iloc[0]
    return (
        row["gambar"],
        f"""
### {row['nama_motif']}

<details>
<summary><strong>Makna</strong></summary>
<p>{row['makna']}</p>
</details>

<details>
<summary><strong>Elemen Motif</strong></summary>
<p>{row['gambar_dalam_motif']}</p>
</details>

<details>
<summary><strong>Kegunaan</strong></summary>
<p>{row['kegunaan']}</p>
</details>
"""
    )

# UI
with gr.Blocks(css="""
.gradio-container {
    font-family: 'Segoe UI', sans-serif;
    background: #fffdf8;
    padding: 20px;
}
h1 { text-align: center; color: #6e0000; }
summary {
    cursor: pointer;
    font-size: 16px;
    margin: 10px 0;
    color: #6e0000;
}
details p {
    margin-left: 20px;
    margin-bottom: 10px;
}
""") as demo:
    gr.Markdown("""
<h1 style='text-align: center; color: #6e0000; font-family: Georgia, serif; font-size: 40px;'>
    MOTIF PADA KAIN GRINGSING
</h1>
<hr style='border-top: 3px double #6e0000; width: 60%; margin: auto; margin-top: -10px; margin-bottom: 20px;' />
""")

    gr.Markdown("Pilih nama motif di bawah untuk melihat detail gambarnya dan filosofinya.\n")

    dropdown = gr.Dropdown(choices=motif_list, label="Pilih Motif", interactive=True)

    image_output = gr.Image()
    detail_output = gr.Markdown()

    dropdown.change(fn=tampilkan_detail, inputs=dropdown, outputs=[image_output, detail_output])

demo.launch(share=True)