function LengthConverter() {
    const [meters, setMeters] = useState('');
    const [kilometers, setKilometers] = useState('');
    const [centimeters, setCentimeters] = useState('');
    const [millimeters, setMillimeters] = useState('');
    const [miles, setMiles] = useState('');
    const [yards, setYards] = useState('');
    const [feet, setFeet] = useState('');
    const [inches, setInches] = useState('');

    const clearAll = () => {
        setMeters('');
        setKilometers('');
        setCentimeters('');
        setMillimeters('');
        setMiles('');
        setYards('');
        setFeet('');
        setInches('');
    };

    const updateFromMeters = (value) => {
        setMeters(value);
        if (value === '') {
            clearAll();
            setMeters('');
        } else {
            const m = parseFloat(value);
            setKilometers((m / 1000).toFixed(6));
            setCentimeters((m * 100).toFixed(4));
            setMillimeters((m * 1000).toFixed(2));
            setMiles((m * 0.000621371).toFixed(6));
            setYards((m * 1.09361).toFixed(4));
            setFeet((m * 3.28084).toFixed(4));
            setInches((m * 39.3701).toFixed(2));
        }
    };

    const updateFromKilometers = (value) => {
        setKilometers(value);
        if (value === '') {
            clearAll();
            setKilometers('');
        } else {
            const km = parseFloat(value);
            const m = km * 1000;
            setMeters(m.toFixed(4));
            setCentimeters((m * 100).toFixed(4));
            setMillimeters((m * 1000).toFixed(2));
            setMiles((km * 0.621371).toFixed(6));
            setYards((m * 1.09361).toFixed(4));
            setFeet((m * 3.28084).toFixed(4));
            setInches((m * 39.3701).toFixed(2));
        }
    };

    const updateFromCentimeters = (value) => {
        setCentimeters(value);
        if (value === '') {
            clearAll();
            setCentimeters('');
        } else {
            const cm = parseFloat(value);
            const m = cm / 100;
            setMeters(m.toFixed(6));
            setKilometers((m / 1000).toFixed(6));
            setMillimeters((cm * 10).toFixed(2));
            setMiles((m * 0.000621371).toFixed(6));
            setYards((m * 1.09361).toFixed(4));
            setFeet((m * 3.28084).toFixed(4));
            setInches((cm * 0.393701).toFixed(2));
        }
    };

    const updateFromMillimeters = (value) => {
        setMillimeters(value);
        if (value === '') {
            clearAll();
            setMillimeters('');
        } else {
            const mm = parseFloat(value);
            const m = mm / 1000;
            setMeters(m.toFixed(6));
            setKilometers((m / 1000).toFixed(6));
            setCentimeters((mm / 10).toFixed(4));
            setMiles((m * 0.000621371).toFixed(6));
            setYards((m * 1.09361).toFixed(4));
            setFeet((m * 3.28084).toFixed(4));
            setInches((mm * 0.0393701).toFixed(2));
        }
    };

    const updateFromMiles = (value) => {
        setMiles(value);
        if (value === '') {
            clearAll();
            setMiles('');
        } else {
            const mi = parseFloat(value);
            const m = mi * 1609.34;
            setMeters(m.toFixed(4));
            setKilometers((m / 1000).toFixed(6));
            setCentimeters((m * 100).toFixed(4));
            setMillimeters((m * 1000).toFixed(2));
            setYards((mi * 1760).toFixed(4));
            setFeet((mi * 5280).toFixed(4));
            setInches((mi * 63360).toFixed(2));
        }
    };

    const updateFromYards = (value) => {
        setYards(value);
        if (value === '') {
            clearAll();
            setYards('');
        } else {
            const yd = parseFloat(value);
            const m = yd * 0.9144;
            setMeters(m.toFixed(6));
            setKilometers((m / 1000).toFixed(6));
            setCentimeters((m * 100).toFixed(4));
            setMillimeters((m * 1000).toFixed(2));
            setMiles((yd * 0.000568182).toFixed(6));
            setFeet((yd * 3).toFixed(4));
            setInches((yd * 36).toFixed(2));
        }
    };

    const updateFromFeet = (value) => {
        setFeet(value);
        if (value === '') {
            clearAll();
            setFeet('');
        } else {
            const ft = parseFloat(value);
            const m = ft * 0.3048;
            setMeters(m.toFixed(6));
            setKilometers((m / 1000).toFixed(6));
            setCentimeters((m * 100).toFixed(4));
            setMillimeters((m * 1000).toFixed(2));
            setMiles((ft * 0.000189394).toFixed(6));
            setYards((ft / 3).toFixed(4));
            setInches((ft * 12).toFixed(2));
        }
    };

    const updateFromInches = (value) => {
        setInches(value);
        if (value === '') {
            clearAll();
            setInches('');
        } else {
            const inch = parseFloat(value);
            const m = inch * 0.0254;
            setMeters(m.toFixed(6));
            setKilometers((m / 1000).toFixed(6));
            setCentimeters((m * 100).toFixed(4));
            setMillimeters((m * 1000).toFixed(2));
            setMiles((inch * 0.0000157828).toFixed(6));
            setYards((inch / 36).toFixed(4));
            setFeet((inch / 12).toFixed(4));
        }
    };

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>📏 Length Converter</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '16px' }}>
                Enter a value in any field for real-time conversion
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Meters (m)</label>
                    <input type="number" className="form-input" value={meters} onChange={(e) => updateFromMeters(e.target.value)} placeholder="1" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Kilometers (km)</label>
                    <input type="number" className="form-input" value={kilometers} onChange={(e) => updateFromKilometers(e.target.value)} placeholder="0.001" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Centimeters (cm)</label>
                    <input type="number" className="form-input" value={centimeters} onChange={(e) => updateFromCentimeters(e.target.value)} placeholder="100" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Millimeters (mm)</label>
                    <input type="number" className="form-input" value={millimeters} onChange={(e) => updateFromMillimeters(e.target.value)} placeholder="1000" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Miles (mi)</label>
                    <input type="number" className="form-input" value={miles} onChange={(e) => updateFromMiles(e.target.value)} placeholder="0.000621" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Yards (yd)</label>
                    <input type="number" className="form-input" value={yards} onChange={(e) => updateFromYards(e.target.value)} placeholder="1.094" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Feet (ft)</label>
                    <input type="number" className="form-input" value={feet} onChange={(e) => updateFromFeet(e.target.value)} placeholder="3.281" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Inches (in)</label>
                    <input type="number" className="form-input" value={inches} onChange={(e) => updateFromInches(e.target.value)} placeholder="39.37" />
                </div>
            </div>
        </div>
    );
}

// Export to global registry
window.LengthConverter = LengthConverter;