import React, { useEffect, useMemo, useState } from 'react'; export const ApiStatus = () => { const API_URL = 'https://apigw.trendyol.com/partner/seller-journey-seller-platform-health-status-checker/api/health'; // ---------- Styles (inside component = ReadMe-safe) ---------- const S = { card: { border: '1px solid #e5e7eb', background: '#ffffff', borderRadius: 16, padding: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.04)', }, topRow: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, }, title: { fontSize: 18, fontWeight: 800, color: '#111827', lineHeight: 1.2 }, dot: { width: 10, height: 10, borderRadius: 999, display: 'inline-block' }, pill: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 10px', borderRadius: 999, fontSize: 13, fontWeight: 700, }, miniPill: { display: 'inline-flex', alignItems: 'center', padding: '3px 8px', borderRadius: 999, fontSize: 11, fontWeight: 700, marginLeft: 8, }, legendRow: { display: 'flex', gap: 14, marginTop: 14, paddingTop: 14, borderTop: '1px solid #f3f4f6', flexWrap: 'wrap', }, legendItem: { display: 'flex', alignItems: 'center', gap: 8 }, linkBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '10px 12px', borderRadius: 12, background: '#111827', color: '#ffffff', fontSize: 13, fontWeight: 700, textDecoration: 'none', }, ghostBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '10px 12px', borderRadius: 12, background: '#f3f4f6', color: '#111827', fontSize: 13, fontWeight: 700, border: '1px solid #e5e7eb', cursor: 'pointer', }, sectionCard: { border: '1px solid #e5e7eb', background: '#ffffff', borderRadius: 16, overflow: 'hidden', }, // Accordion header sectionHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid #f3f4f6', background: '#fafafa', cursor: 'pointer', userSelect: 'none', }, sectionHeaderLeft: { display: 'flex', alignItems: 'center', gap: 10 }, chevron: { width: 28, height: 28, borderRadius: 10, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#ffffff', border: '1px solid #e5e7eb', color: '#111827', fontWeight: 900, fontSize: 14, lineHeight: 1, }, sectionTitle: { fontWeight: 800, color: '#111827' }, sectionMetaRight: { display: 'flex', alignItems: 'center', gap: 10 }, // Collapsible container collapseOuter: { overflow: 'hidden', transition: 'max-height 240ms ease', willChange: 'max-height', }, row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, padding: '12px 16px', borderTop: '1px solid #f3f4f6', }, leftCol: { display: 'flex', alignItems: 'center', minWidth: 260, maxWidth: 520, flex: '1 1 auto', }, serviceName: { marginLeft: 10, fontSize: 13, fontWeight: 700, color: '#111827', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, bars: { display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'flex-end', flex: '0 0 auto', }, controlsRow: { display: 'flex', gap: 10, alignItems: 'center', marginTop: 12, }, smallBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '8px 10px', borderRadius: 12, background: '#f3f4f6', color: '#111827', fontSize: 12, fontWeight: 800, border: '1px solid #e5e7eb', cursor: 'pointer', }, }; // ---------- Helpers ---------- function parseStatusColors(statusString) { if (!statusString) return Array(24).fill('green'); return String(statusString) .split('') .slice(0, 24) .map((char) => { const c = String(char).toUpperCase(); if (c === 'R') return 'red'; if (c === 'Y') return 'yellow'; if (c === 'G') return 'green'; return 'green'; }); } function normalizeServices(data) { const services = {}; (data || []).forEach((section) => { const sectionName = section?.nameEn || 'Diğer'; services[sectionName] = (section?.endpoints || []).map((endpoint) => ({ name: endpoint?.name_en || 'Unnamed', status: String(endpoint?.condition || 'OPERATIONAL').toUpperCase(), statusColors: parseStatusColors(endpoint?.status || ''), })); }); return services; } function computeOverall(apiServices) { const all = Object.values(apiServices || {}).flat(); if (all.some((s) => s.status === 'OUTAGE')) return 'OUTAGE'; if (all.some((s) => s.status === 'DEGRADED')) return 'DEGRADED'; return 'OPERATIONAL'; } function meta(status) { const s = String(status || '').toUpperCase(); if (s === 'OUTAGE') return { label: 'Outage', icon: '×', dot: '#ef4444', pillBg: '#fee2e2', pillFg: '#991b1b', }; if (s === 'DEGRADED') return { label: 'Degraded', icon: '!', dot: '#f59e0b', pillBg: '#ffedd5', pillFg: '#9a3412', }; return { label: 'Operational', icon: '✓', dot: '#22c55e', pillBg: '#dcfce7', pillFg: '#166534', }; } function segmentStyle(color) { const base = { width: 10, height: 6, borderRadius: 999, display: 'inline-block', opacity: 0.95, }; if (color === 'red') return { ...base, background: '#ef4444' }; if (color === 'yellow') return { ...base, background: '#f59e0b' }; return { ...base, background: '#22c55e' }; } function sectionWorstStatus(services) { const list = services || []; if (list.some((s) => s.status === 'OUTAGE')) return 'OUTAGE'; if (list.some((s) => s.status === 'DEGRADED')) return 'DEGRADED'; return 'OPERATIONAL'; } // ---------- State ---------- const [apiServices, setApiServices] = useState({}); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // Accordion open state: { [sectionKey]: boolean } const [openSections, setOpenSections] = useState({}); // ---------- Fetch ---------- useEffect(() => { let cancelled = false; async function fetchStatus() { const res = await fetch(API_URL, { method: 'GET' }); if (!res.ok) throw new Error('Failed to fetch API status'); return res.json(); } (async () => { try { const data = await fetchStatus(); const normalized = normalizeServices(data); if (!cancelled) setApiServices(normalized); } catch (err) { if (!cancelled) setError(err?.message || 'Error loading status'); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, []); // Auto-initialize open sections: // - open any section with DEGRADED/OUTAGE // - otherwise open first section only useEffect(() => { const entries = Object.entries(apiServices || {}); if (!entries.length) return; setOpenSections((prev) => { // don't override user toggles if already set if (Object.keys(prev).length) return prev; const next = {}; let openedAnyBad = false; entries.forEach(([key, services]) => { const worst = sectionWorstStatus(services); if (worst !== 'OPERATIONAL') { next[key] = true; openedAnyBad = true; } else { next[key] = false; } }); if (!openedAnyBad) { next[entries[0][0]] = true; // open first by default } return next; }); }, [apiServices]); const overall = useMemo(() => computeOverall(apiServices), [apiServices]); const overallMeta = useMemo(() => meta(overall), [overall]); // ---------- UI States ---------- if (loading) { return (

Loading service status…

); } if (error) { return (

Service status load failed

{error}

); } // ---------- Actions ---------- function toggleSection(key) { setOpenSections((prev) => ({ ...prev, [key]: !prev[key] })); } function expandAll() { const next = {}; Object.keys(apiServices || {}).forEach((k) => (next[k] = true)); setOpenSections(next); } function collapseAll() { const next = {}; Object.keys(apiServices || {}).forEach((k) => (next[k] = false)); setOpenSections(next); } // ---------- Render ---------- return (

{/* Summary */}

Trendyol API Status

{overallMeta.icon} {overallMeta.label} Last 24 hours

Open Ticket

{['OPERATIONAL', 'DEGRADED', 'OUTAGE'].map((s) => { const m = meta(s); return (

{m.label}

); })}

{/* Controls */}

{/* Sections (foldable) */}

{Object.entries(apiServices).map(([sectionKey, services]) => { const isOpen = !!openSections[sectionKey]; const worst = sectionWorstStatus(services); const sectionMeta = meta(worst); // maxHeight trick for smooth animation (big enough cap) const maxH = isOpen ? 2200 : 0; return (

{/* Clickable header */}

toggleSection(sectionKey)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggleSection(sectionKey); }} >

›

{sectionKey}

{sectionMeta.label}

Last 24 hours

{isOpen ? 'Fold' : 'Expand'}

{/* Collapsible content */}

{(services || []).map((service) => { const m = meta(service.status); return (

{service.name} {m.label}

{(service.statusColors || []).slice(0, 24).map((c, i) => ( ))}

); })}

); };