<?php
// index.php - Aplicație meteo completă cu Open-Meteo + MET Norway
?>
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meteo Telefon</title>

<style>
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#eaf4ff;color:#102033}
body.dark{background:#0d1117;color:white}
.app{max-width:480px;margin:auto;padding:18px}
header{display:flex;justify-content:space-between;align-items:center}
h1,h2,h3,p{margin:0}
.card{background:white;border-radius:22px;padding:18px;margin:15px 0;box-shadow:0 10px 25px #0002}
body.dark .card{background:#161b22}
input,button{width:100%;padding:14px;margin-top:10px;border-radius:14px;border:0;font-size:16px}
input{background:white;border:1px solid #ccc;color:#111}
body.dark input{background:#0d1117;color:white;border:1px solid #333}
button{background:#2196f3;color:white;font-weight:bold}
.gps{background:#2e7d32}
.theme{width:50px;height:50px;border-radius:50%;padding:0;margin:0}
#sugestii{background:white;border-radius:14px;margin-top:8px;overflow:hidden;box-shadow:0 5px 15px #0001}
body.dark #sugestii{background:#161b22}
.sugestie{padding:13px;border-bottom:1px solid #ddd;cursor:pointer}
body.dark .sugestie{border-bottom:1px solid #333}
.sugestie:hover{background:#2196f322}
.temp{font-size:52px;font-weight:bold}
.icon{font-size:70px}
.meteo-flex{display:flex;align-items:center;gap:20px;margin:20px 0}
.row{display:flex;justify-content:space-between;padding:12px;background:#0001;border-radius:12px;margin-top:8px}
body.dark .row{background:#ffffff10}
.forecast,.ora{display:grid;grid-template-columns:1fr .5fr 1fr;padding:12px 0;border-bottom:1px solid #ccc;align-items:center}
.ora{grid-template-columns:1fr .5fr 1fr 1fr}
body.dark .forecast,body.dark .ora{border-bottom:1px solid #333}
.forecast div:nth-child(2),.ora div:nth-child(2){font-size:24px;text-align:center}
.forecast div:nth-child(3),.ora div:nth-child(3),.ora div:nth-child(4){text-align:right;font-weight:bold}
.hidden{display:none}
.error{color:red;font-weight:bold}
.small{color:#666;font-size:14px;margin-top:6px}
body.dark .small{color:#aaa}
.source-box{font-size:14px;line-height:1.7}
</style>
</head>

<body>
<div class="app">

<header>
    <div>
        <h1>🌦️ Meteo</h1>
        <p>Open-Meteo + MET Norway</p>
    </div>
    <button class="theme" onclick="schimbaTema()">🌙</button>
</header>

<div class="card">
    <input id="oras" placeholder="Scrie minim 2 litere, ex: Ve" oninput="sugereazaOrase()" autocomplete="off">
    <div id="sugestii"></div>
    <button onclick="cautaOras()">Caută</button>
    <button class="gps" onclick="locatiaMea()">📍 Locația mea</button>
    <p class="small">Sugestiile apar după minimum 2 litere.</p>
</div>

<div id="mesaj" class="card hidden"></div>

<div id="meteo" class="hidden">

    <div class="card">
        <h2 id="numeOras"></h2>
        <p id="data"></p>

        <div class="meteo-flex">
            <div id="icon" class="icon">☀️</div>
            <div>
                <div id="temp" class="temp">--°C</div>
                <div id="descriere"></div>
            </div>
        </div>

        <div class="row"><span>💧 Umiditate</span><b id="umiditate"></b></div>
        <div class="row"><span>💨 Vânt</span><b id="vant"></b></div>
        <div class="row"><span>🌧️ Ploaie</span><b id="ploaie"></b></div>
    </div>

    <div class="card source-box">
        <h3>Comparație surse</h3>
        <div id="surse"></div>
    </div>

    <div class="card">
        <h3>Prognoză pe ore</h3>
        <div id="prognozaOre"></div>
    </div>

    <div class="card">
        <h3>Prognoză 7 zile</h3>
        <div id="prognoza"></div>
    </div>

</div>
</div>

<script>
const coduri={
0:["☀️","Cer senin"],1:["🌤️","Mai mult senin"],2:["⛅","Parțial noros"],3:["☁️","Noros"],
45:["🌫️","Ceață"],48:["🌫️","Ceață"],51:["🌦️","Burniță"],53:["🌦️","Burniță"],55:["🌧️","Burniță puternică"],
61:["🌧️","Ploaie slabă"],63:["🌧️","Ploaie"],65:["🌧️","Ploaie puternică"],
71:["🌨️","Ninsoare"],73:["🌨️","Ninsoare"],75:["❄️","Ninsoare puternică"],
80:["🌦️","Averse"],81:["🌧️","Averse"],82:["⛈️","Averse puternice"],
95:["⛈️","Furtună"],96:["⛈️","Furtună"],99:["⛈️","Furtună puternică"]
};

let timerSugestii;

function info(cod){return coduri[cod]||["🌡️","Vreme necunoscută"]}

function mesaj(text,eroare=false){
    let m=document.getElementById("mesaj");
    m.innerHTML=text;
    m.className="card"+(eroare?" error":"");
    m.classList.remove("hidden");
}

function ascundeMesaj(){
    document.getElementById("mesaj").classList.add("hidden");
}

function curataText(text){
    return String(text).replaceAll("'","").replaceAll('"',"").replaceAll("`","");
}

function sugereazaOrase(){
    clearTimeout(timerSugestii);
    let text=document.getElementById("oras").value.trim();
    let box=document.getElementById("sugestii");

    if(text.length<2){
        box.innerHTML="";
        return;
    }

    timerSugestii=setTimeout(async function(){
        try{
            let r=await fetch("https://geocoding-api.open-meteo.com/v1/search?count=8&language=ro&format=json&name="+encodeURIComponent(text));
            let data=await r.json();

            if(!data.results){
                box.innerHTML="";
                return;
            }

            box.innerHTML=data.results.map(o=>{
                let afisat=curataText(o.name+(o.admin1?", "+o.admin1:"")+(o.country?", "+o.country:""));
                let simplu=curataText(o.name+(o.country?", "+o.country:""));
                return `<div class="sugestie" onclick="alegeOras(${o.latitude},${o.longitude},'${simplu}')">${afisat}</div>`;
            }).join("");

        }catch(e){
            box.innerHTML="";
        }
    },300);
}

function alegeOras(lat,lon,nume){
    document.getElementById("oras").value=nume;
    document.getElementById("sugestii").innerHTML="";
    incarcaMeteo(lat,lon,nume);
}

async function cautaOras(){
    let oras=document.getElementById("oras").value.trim();
    if(!oras){
        mesaj("Scrie un oraș.",true);
        return;
    }

    mesaj("Se caută vremea...");

    try{
        let g=await fetch("https://geocoding-api.open-meteo.com/v1/search?count=1&language=ro&format=json&name="+encodeURIComponent(oras));
        let geo=await g.json();

        if(!geo.results){
            mesaj("Oraș negăsit.",true);
            return;
        }

        let p=geo.results[0];
        let nume=p.name+(p.country?", "+p.country:"");

        document.getElementById("sugestii").innerHTML="";
        incarcaMeteo(p.latitude,p.longitude,nume);

    }catch(e){
        mesaj("Nu s-a putut căuta orașul.",true);
    }
}

function locatiaMea(){
    if(!navigator.geolocation){
        mesaj("GPS indisponibil pe acest browser.",true);
        return;
    }

    mesaj("Se preia locația exactă...");

    navigator.geolocation.getCurrentPosition(
        async function(p){
            let lat=p.coords.latitude;
            let lon=p.coords.longitude;
            let nume="Locația mea";

            try{
                let r=await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lon}&zoom=10&addressdetails=1`);
                let d=await r.json();
                let a=d.address||{};
                nume=a.city||a.town||a.village||a.municipality||a.county||"Locația mea";
            }catch(e){}

            document.getElementById("sugestii").innerHTML="";
            incarcaMeteo(lat,lon,nume);
        },
        function(){
            mesaj("Nu am putut prelua locația. Activează GPS și permite accesul.",true);
        },
        {enableHighAccuracy:true,timeout:20000,maximumAge:0}
    );
}

async function incarcaMeteo(lat,lon,nume){
    try{
        let openMeteoUrl=
            `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}`+
            `&current=temperature_2m,relative_humidity_2m,precipitation,weather_code,wind_speed_10m`+
            `&hourly=temperature_2m,relative_humidity_2m,precipitation,weather_code,wind_speed_10m`+
            `&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum`+
            `&forecast_days=7&timezone=auto`;

        let metUrl=`https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${lat}&lon=${lon}`;

        let [r1,r2]=await Promise.allSettled([
            fetch(openMeteoUrl),
            fetch(metUrl)
        ]);

        if(r1.status!=="fulfilled"){
            mesaj("Open-Meteo nu a răspuns.",true);
            return;
        }

        let d=await r1.value.json();

        let metData=null;
        if(r2.status==="fulfilled"){
            try{metData=await r2.value.json();}catch(e){}
        }

        afiseazaOpenMeteo(d,nume);
        afiseazaMetNorway(metData,d);

        document.getElementById("meteo").classList.remove("hidden");
        ascundeMesaj();

    }catch(e){
        mesaj("Nu s-au putut prelua datele meteo.",true);
    }
}

function afiseazaOpenMeteo(d,nume){
    let c=d.current;
    let i=info(c.weather_code);

    document.getElementById("numeOras").innerText=nume;
    document.getElementById("data").innerText=new Date(c.time).toLocaleString("ro-RO");
    document.getElementById("icon").innerText=i[0];
    document.getElementById("descriere").innerText=i[1];
    document.getElementById("temp").innerText=Math.round(c.temperature_2m)+"°C";
    document.getElementById("umiditate").innerText=c.relative_humidity_2m+"%";
    document.getElementById("vant").innerText=c.wind_speed_10m+" km/h";
    document.getElementById("ploaie").innerText=c.precipitation+" mm";

    let listaOre="";
    let acum=new Date();

    for(let k=0;k<d.hourly.time.length && listaOre.split("ora").length<26;k++){
        let t=new Date(d.hourly.time[k]);
        if(t>=acum){
            let x=info(d.hourly.weather_code[k]);
            let ora=t.toLocaleTimeString("ro-RO",{hour:"2-digit",minute:"2-digit"});
            listaOre+=`
                <div class="ora">
                    <div>${ora}</div>
                    <div>${x[0]}</div>
                    <div>${Math.round(d.hourly.temperature_2m[k])}°C</div>
                    <div>${d.hourly.precipitation[k]} mm</div>
                </div>`;
        }
        if((listaOre.match(/class="ora"/g)||[]).length>=24) break;
    }

    document.getElementById("prognozaOre").innerHTML=listaOre;

    let lista="";
    d.daily.time.forEach(function(zi,k){
        let x=info(d.daily.weather_code[k]);
        let dataZi=new Date(zi).toLocaleDateString("ro-RO",{weekday:"short",day:"2-digit",month:"2-digit"});
        lista+=`
            <div class="forecast">
                <div>${dataZi}</div>
                <div>${x[0]}</div>
                <div>${Math.round(d.daily.temperature_2m_min[k])}° / ${Math.round(d.daily.temperature_2m_max[k])}°</div>
            </div>`;
    });

    document.getElementById("prognoza").innerHTML=lista;
}

function afiseazaMetNorway(metData,openData){
    let html="";
    let tempOpen=openData.current.temperature_2m;

    html+=`Open-Meteo: <b>${tempOpen}°C</b><br>`;

    if(metData && metData.properties && metData.properties.timeseries && metData.properties.timeseries.length>0){
        let instant=metData.properties.timeseries[0].data.instant.details;
        let tempMet=instant.air_temperature;
        let vantMet=instant.wind_speed;

        html+=`MET Norway: <b>${tempMet}°C</b><br>`;
        html+=`Vânt MET Norway: <b>${vantMet} m/s</b><br>`;

        let diferenta=Math.abs(tempOpen-tempMet).toFixed(1);
        let media=((tempOpen+tempMet)/2).toFixed(1);

        html+=`Diferență temperatură: <b>${diferenta}°C</b><br>`;
        html+=`Medie între surse: <b>${media}°C</b>`;
    }else{
        html+=`MET Norway: <b>indisponibil momentan</b><br>`;
        html+=`Aplicația folosește automat Open-Meteo.`;
    }

    document.getElementById("surse").innerHTML=html;
}

function schimbaTema(){
    document.body.classList.toggle("dark");
    if(document.body.classList.contains("dark")){
        localStorage.setItem("tema","dark");
        document.querySelector(".theme").innerText="☀️";
    }else{
        localStorage.setItem("tema","light");
        document.querySelector(".theme").innerText="🌙";
    }
}

if(localStorage.getItem("tema")==="dark"){
    document.body.classList.add("dark");
    document.querySelector(".theme").innerText="☀️";
}

document.getElementById("oras").addEventListener("keydown",function(e){
    if(e.key==="Enter") cautaOras();
});

document.getElementById("oras").value="Vechta";
cautaOras();
</script>

</body>
</html>