import re
import gradio as gr
from PIL import Image

def create_detection_tab(predict_fn, example_images):
    with gr.TabItem("Breed Detection"):
        gr.HTML("""
            <div style='
                text-align: center;
                padding: 20px 0;
                margin: 15px 0;
                background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
                border-radius: 10px;
            '>
                <p style='
                    font-size: 1.2em;
                    margin: 0;
                    padding: 0 20px;
                    line-height: 1.5;
                    background: linear-gradient(90deg, #4299e1, #48bb78);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 600;
                '>
                    Upload a picture of a dog or take a photo, and the model will predict its breed and provide detailed information!
                </p>
                <p style='
                    font-size: 0.9em;
                    color: #666;
                    margin-top: 8px;
                    padding: 0 20px;
                '>
                    Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.
                </p>
            </div>
        """)
        
        with gr.Tabs():
            # tab1: upload images
            with gr.TabItem("Upload Image"):
                input_image = gr.Image(label="Upload a dog image", type="pil")
                gr.Examples(
                    examples=example_images,
                    inputs=input_image
                )
            
            # tab2: camera feature
            with gr.TabItem("Take Photo"):
                camera_input = gr.Image(
                    source="webcam",
                    label="Take a photo of a dog",
                    type="pil",
                    tool="editor"  # 允許用戶編輯拍攝的照片
                )
        
        # output area
        with gr.Row():
            output_image = gr.Image(label="Annotated Image")
            output = gr.HTML(label="Prediction Results")
        
        # utilize state to store results
        initial_state = gr.State()
        
        def detect_from_inputs(upload_image, camera_image):
            image_to_use = camera_image if camera_image is not None else upload_image
            
            if image_to_use is None:
                return "Please upload an image or take a photo first.", None, None
            
            return predict_fn(image_to_use)
        
        input_image.change(
            predict_fn,
            inputs=input_image,
            outputs=[output, output_image, initial_state]
        )
        
        # add camera input
        camera_input.change(
            predict_fn,
            inputs=camera_input,
            outputs=[output, output_image, initial_state]
        )
        
        with gr.Row():
            detect_btn = gr.Button("Detect Breed", variant="primary")
        
        detect_btn.click(
            detect_from_inputs,
            inputs=[input_image, camera_input],
            outputs=[output, output_image, initial_state]
        )

    return {
        'input_image': input_image,
        'camera_input': camera_input,
        'output_image': output_image,
        'output': output,
        'initial_state': initial_state,
        'detect_btn': detect_btn
    }