@push('alpine-components')
<script>
window.bitflanToolRedirectCheckerComponent = function() {
    return {
        url: '',
        loading: false,
        error: '',
        redirects: [],
        finalUrl: '',
        finalStatusCode: '',
        totalRedirects: 0,

        checkRedirects() {
            if (!this.url) {
                this.error = 'Please enter a URL';
                return;
            }

            this.loading = true;
            this.error = '';
            this.redirects = [];
            this.finalUrl = '';
            this.finalStatusCode = '';
            this.totalRedirects = 0;

            // Make the request to check redirects
            fetch(`/api/check-redirects?url=${encodeURIComponent(this.url)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        this.error = data.error;
                        this.loading = false;
                        return;
                    }

                    this.redirects = data.redirects;
                    this.finalUrl = data.finalUrl;
                    this.finalStatusCode = data.finalStatusCode;
                    this.totalRedirects = data.redirects.length;
                    this.loading = false;
                })
                .catch(error => {
                    this.error = 'An error occurred while checking redirects';
                    this.loading = false;
                });
        }
    }
}
</script>
@endpush

<div x-data="window.bitflanToolRedirectCheckerComponent()">
    <div class="form-group mb-3">
        <label class="custom-label">{{ trans('webtools/tools/redirect-checker.label') }}</label>
        <div class="copy-textarea-btn">
            <input type="text" x-model="url" class="custom-input" placeholder="{{ trans('webtools/tools/redirect-checker.placeholder') }}" />
        </div>
    </div>

    <button @click="checkRedirects()" class="btn custom--btn button__lg">
        <span x-show="!loading">
            {{ trans('webtools/tools/redirect-checker.submit') }}
        </span>
        <span x-show="loading">
            <svg width="40" height="10" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
                <circle cx="15" cy="15" r="15">
                    <animate attributeName="r" from="15" to="15"
                             begin="0s" dur="0.8s"
                             values="15;9;15" calcMode="linear"
                             repeatCount="indefinite" />
                    <animate attributeName="fill-opacity" from="1" to="1"
                             begin="0s" dur="0.8s"
                             values="1;.5;1" calcMode="linear"
                             repeatCount="indefinite" />
                </circle>
                <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributeName="r" from="9" to="9"
                             begin="0s" dur="0.8s"
                             values="9;15;9" calcMode="linear"
                             repeatCount="indefinite" />
                    <animate attributeName="fill-opacity" from="0.5" to="0.5"
                             begin="0s" dur="0.8s"
                             values=".5;1;.5" calcMode="linear"
                             repeatCount="indefinite" />
                </circle>
                <circle cx="105" cy="15" r="15">
                    <animate attributeName="r" from="15" to="15"
                             begin="0s" dur="0.8s"
                             values="15;9;15" calcMode="linear"
                             repeatCount="indefinite" />
                    <animate attributeName="fill-opacity" from="1" to="1"
                             begin="0s" dur="0.8s"
                             values="1;.5;1" calcMode="linear"
                             repeatCount="indefinite" />
                </circle>
            </svg>
        </span>
    </button>

    <div x-show="error" class="alert alert-danger mt-3">
        <i class="fas fa-exclamation-circle me-2"></i>
        <span x-text="error"></span>
    </div>

    <div x-show="redirects.length > 0" class="mt-3">
        <div class="redirect-summary mb-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-1">Redirect Chain Summary</h5>
                    <p class="mb-0 text-muted">Total Redirects: <span x-text="totalRedirects"></span></p>
                </div>
                <div class="text-end">
                    <h5 class="mb-1">Final Status: <span x-text="finalStatusCode" :class="{'text-success': finalStatusCode === '200', 'text-danger': finalStatusCode !== '200'}"></span></h5>
                    <p class="mb-0 text-muted">Final URL: <a :href="finalUrl" target="_blank" x-text="finalUrl" class="text-break"></a></p>
                </div>
            </div>
        </div>

        <div class="redirect-chain">
            <div class="timeline">
                <template x-for="(redirect, index) in redirects" :key="index">
                    <div class="timeline-item">
                        <div class="timeline-marker" :class="{'bg-success': redirect.statusCode === '200', 'bg-warning': redirect.statusCode === '301', 'bg-info': redirect.statusCode === '302', 'bg-danger': redirect.statusCode !== '200' && redirect.statusCode !== '301' && redirect.statusCode !== '302'}"></div>
                        <div class="timeline-content">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">Step <span x-text="index + 1"></span></h6>
                                    <p class="mb-1"><a :href="redirect.url" target="_blank" x-text="redirect.url" class="text-break"></a></p>
                                    <span class="badge" :class="{'bg-success': redirect.statusCode === '200', 'bg-warning': redirect.statusCode === '301', 'bg-info': redirect.statusCode === '302', 'bg-danger': redirect.statusCode !== '200' && redirect.statusCode !== '301' && redirect.statusCode !== '302'}">
                                        Status: <span x-text="redirect.statusCode"></span>
                                    </span>
                                </div>
                                <div class="text-end">
                                    <span class="text-muted" x-text="redirect.time"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

<style>
    /* Light theme styles */
    .custom-label {
        color: var(--color-black);
        font-weight: 500;
        margin-bottom: 0.5rem;
        display: block;
    }

    .custom-input {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        color: var(--color-black);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        width: 100%;
        transition: all 0.3s ease;
    }

    .custom-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(76, 63, 242, 0.15);
    }

    .redirect-summary {
        background: var(--color-white);
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid var(--color-border);
    }

    .redirect-summary h5 {
        color: var(--color-black);
    }

    .redirect-summary .text-muted {
        color: var(--color-gray) !important;
    }

    .redirect-summary a {
        color: var(--color-primary);
        text-decoration: none;
    }

    .redirect-summary a:hover {
        text-decoration: underline;
    }

    .timeline {
        position: relative;
        padding: 1rem 0;
    }

    .timeline-item {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1.5rem;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-marker {
        position: absolute;
        left: 0;
        top: 0.5rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
    }

    .timeline-content {
        background: var(--color-white);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid var(--color-border);
    }

    .timeline-content h6 {
        color: var(--color-black);
        margin-bottom: 0.5rem;
    }

    .timeline-content a {
        color: var(--color-primary);
        text-decoration: none;
    }

    .timeline-content a:hover {
        text-decoration: underline;
    }

    .badge {
        padding: 0.5rem 0.75rem;
        font-weight: 500;
    }

    /* Dark theme specific styles */
    [data-theme="dark"] .custom-label,
    .dark .custom-label {
        color: var(--color-white);
    }

    [data-theme="dark"] .custom-input,
    .dark .custom-input {
        background: var(--color-dark);
        border-color: var(--color-dark-border);
        color: var(--color-white);
    }

    [data-theme="dark"] .custom-input:focus,
    .dark .custom-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(76, 63, 242, 0.25);
    }

    [data-theme="dark"] .redirect-summary,
    .dark .redirect-summary {
        background: var(--color-dark);
        border-color: var(--color-dark-border);
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    [data-theme="dark"] .redirect-summary h5,
    .dark .redirect-summary h5 {
        color: var(--color-white);
    }

    [data-theme="dark"] .redirect-summary .text-muted,
    .dark .redirect-summary .text-muted {
        color: var(--color-gray-light) !important;
    }

    [data-theme="dark"] .timeline-content,
    .dark .timeline-content {
        background: var(--color-dark);
        border-color: var(--color-dark-border);
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    [data-theme="dark"] .timeline-content h6,
    .dark .timeline-content h6 {
        color: var(--color-white);
    }

    [data-theme="dark"] .timeline-content .text-muted,
    .dark .timeline-content .text-muted {
        color: var(--color-gray-light) !important;
    }

    [data-theme="dark"] .timeline-content a,
    .dark .timeline-content a {
        color: var(--color-white);
    }

    [data-theme="dark"] .timeline-content a:hover,
    .dark .timeline-content a:hover {
        color: var(--color-primary);
    }

    /* Status colors */
    .text-success {
        color: var(--color-success) !important;
    }

    .text-danger {
        color: var(--color-danger) !important;
    }

    .bg-success {
        background-color: var(--color-success) !important;
    }

    .bg-warning {
        background-color: var(--color-warning) !important;
    }

    .bg-info {
        background-color: var(--color-info) !important;
    }

    .bg-danger {
        background-color: var(--color-danger) !important;
    }
</style>