const std = @import("std");
const zx = @import("zx");
const icons = @import("../components/icons.zx");
const data = @import("../data.zig");
const Pin = icons.Pin;

const TabItem = struct {
    name: []const u8,
    icon: []const u8,
    pinned: bool,
    checked: bool,
};

const TabIconProps = struct {
    name: []const u8,
};

const SwitchProps = struct {
    checked: bool,
};

const CheckboxRowProps = struct {
    label: []const u8,
    checked: bool,
    row_class: []const u8,
};

const NativeElementsSettingProps = struct {};

const tab_items = [_]TabItem{
    .{ .name = "App", .icon = "App", .pinned = false, .checked = true },
    .{ .name = "Overview", .icon = "Overview", .pinned = true, .checked = true },
    .{ .name = "Components", .icon = "Components", .pinned = true, .checked = true },
    .{ .name = "Pages", .icon = "Pages", .pinned = true, .checked = true },
    .{ .name = "Timeline", .icon = "Timeline", .pinned = true, .checked = true },

};



fn TabIcon(allocator: zx.Allocator, props: TabIconProps) zx.Component {
    const name = props.name;
    if (std.mem.eql(u8, name, "App")) {
        return (
            <svg @allocator={allocator} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
        );
    }
    if (std.mem.eql(u8, name, "Overview")) {
        return (
             <svg @allocator={allocator} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
        );
    }
    if (std.mem.eql(u8, name, "Components")) {
        return (
            <svg @allocator={allocator} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
        );
    }
    if (std.mem.eql(u8, name, "Pages")) {
        return (
             <svg @allocator={allocator} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><path d="M10 7h4"></path><path d="M17 10v4"></path></svg>
        );
    }
    if (std.mem.eql(u8, name, "Timeline")) {
        return (
            <svg @allocator={allocator} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"></path><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"></path></svg>
        );
    }
    return (<div />);
}

fn Switch(allocator: zx.Allocator, props: SwitchProps) zx.Component {
    const checked = props.checked;
    return (
        <label @allocator={allocator} class="switch">
            <input type="checkbox" checked={checked} class="settings-switch-input" />
            <div class="settings-switch-track">
                <div class="settings-switch-knob"></div>
            </div>
        </label>
    );
}

fn TabRow(allocator: zx.Allocator, props: TabItem) zx.Component {
    const item = props;
    return (
        <div @allocator={allocator} class="settings-tab-row">
            <div class="settings-row-label">
                <TabIcon allocator={allocator} name={item.icon} />
                <span class="settings-row-name">{item.name}</span>
            </div>
            <div class="settings-row-actions">
                {if (item.pinned) (<Pin @allocator={allocator} />)}
                <Switch allocator={allocator} checked={item.checked} />
            </div>
        </div>
    );
}

fn CheckboxRow(allocator: zx.Allocator, props: CheckboxRowProps) zx.Component {
    const label = props.label;
    const checked = props.checked;
    const row_class = props.row_class;
    return (
        <label @allocator={allocator} class={row_class}>
            <input type="checkbox" checked={checked} class="settings-checkbox" />
            <span class="settings-checkbox-label">{label}</span>
        </label>
    );
}

pub fn Page(ctx: zx.PageContext) zx.Component {
    return (
        <div @allocator={ctx.arena} class="settings-page">
            <div class="page-header settings-header">
                <h2 class="settings-title">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle>
                    </svg>
                    DevTools Settings
                </h2>
            </div>

            <div class="settings-grid">
                <div>
                    <h3 class="settings-section-title">Tabs</h3>
                    <div class="settings-tabs-panel">
                        {for (tab_items) |item| (<TabRow allocator={ctx.arena} name={item.name} icon={item.icon} pinned={item.pinned} checked={item.checked} />)}
                    </div>
                </div>

                <div>
                    <div class="settings-section">
                        <h3 class="settings-section-title">Appearance</h3>
                        <div class="settings-panel">
                            <button class="settings-btn settings-btn-theme">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
                                Dark
                            </button>

                            <div class="settings-divider-block">
                                <label class="settings-label">UI Scale</label>
                                <div class="settings-select-wrap">
                                    <select class="settings-select">
                                        <option>Normal</option>
                                        <option>Large</option>
                                        <option>Small</option>
                                    </select>
                                    <div class="settings-select-arrow">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                                    </div>
                                </div>
                            </div>

                            <CheckboxRow allocator={ctx.arena} label="Expand Sidebar" checked={true} row_class="settings-checkbox-row settings-checkbox-row-mb" />
                            <CheckboxRow allocator={ctx.arena} label="Scrollable Sidebar" checked={true} row_class="settings-checkbox-row" />
                        </div>
                    </div>

                    <div class="settings-section">
                        <h3 class="settings-section-title">Component Tree</h3>
                        <div class="settings-panel">
                            <NativeElementsSetting @rendering={.client} />
                        </div>
                    </div>

                    <div>
                        <h3 class="settings-section-title">Debug</h3>
                        <div>
                            <button class="settings-btn">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>
                                Reset Local Settings & State
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

pub fn NativeElementsSetting(
    ctx: *zx.ComponentCtx(NativeElementsSettingProps),
) zx.Component {
    data.loadSettings();
    const checked = data.show_native_elements;
    const track_class = if (checked) "settings-toggle-track settings-toggle-track-on" else "settings-toggle-track settings-toggle-track-off";
    const knob_class = if (checked) "settings-toggle-knob settings-toggle-knob-on" else "settings-toggle-knob settings-toggle-knob-off";
    return (
        <button @allocator={ctx.allocator} onclick={handleNativeElementsToggle} class="settings-toggle-row">
            <div class="settings-toggle-label">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>
                <span class="settings-row-name">Show Native Elements</span>
            </div>
            <div class={track_class}>
                <div class={knob_class}></div>
            </div>
        </button>
    );
}

pub fn handleNativeElementsToggle(_: zx.EventContext) void {
    data.show_native_elements = !data.show_native_elements;
    data.saveSettings();
    zx.rerender();
}