import type { ReactNode } from "react";
import {
  ArrowRight,
  BarChart3,
  CloudSun,
  ShieldCheck,
  Sprout,
  TabletSmartphone,
  Users,
} from "lucide-react";
import backgroundImage from "../../../assets/background.png";
import farmdrawImage from "../../../assets/farmdraw.png";
import farmdrawWhiteImage from "../../../assets/farm-draw.png";
import { WeatherForecastCard } from "../../meteo/components/WeatherForecastCard";
import { useWeatherForecast } from "../../meteo/hooks/useWeatherForecast";
import type { AppPage } from "../../../app/App";

type DashboardPageProps = {
  theme: "dark" | "light";
  onOpenMeteo: () => void;
  onNavigate: (page: AppPage) => void;
};

const RADIUS = "rounded-[6px]";

export function DashboardPage({ theme, onOpenMeteo, onNavigate }: DashboardPageProps) {
  const isDark = theme === "dark";
  const weather = useWeatherForecast();

  return (
    <div className={isDark ? "relative h-full text-slate-100" : "relative h-full text-[#0F172A]"}>
      <img src={backgroundImage} alt="" className="absolute inset-0 h-full w-full object-cover" />

      <div className={isDark ? "absolute inset-0 bg-[#07101B]/62" : "absolute inset-0 bg-white/20"} />

      <div
        className={
          isDark
            ? "absolute inset-0 bg-[linear-gradient(90deg,#07101B_0%,#07101B_18%,rgba(7,16,27,0.96)_30%,rgba(7,16,27,0.82)_48%,rgba(7,16,27,0.35)_72%,rgba(7,16,27,0.06)_100%)]"
            : "absolute inset-0 bg-[linear-gradient(90deg,#ffffff_0%,rgba(255,255,255,0.98)_14%,rgba(255,255,255,0.82)_32%,rgba(255,255,255,0.42)_54%,rgba(255,255,255,0.10)_78%,rgba(255,255,255,0)_100%)]"
        }
      />

      <style>{`
        .dashboard-weather-card > * {
          position: relative !important;
          inset: auto !important;
          right: auto !important;
          top: auto !important;
          transform: none !important;
          width: 100% !important;
          max-width: 360px !important;
        }
      `}</style>

      <main className="relative z-10 grid h-full w-full grid-rows-[auto_auto_minmax(260px,1fr)_24px] gap-4 px-5 pb-3 pt-8 xl:px-7 2xl:px-9">
        <section className="grid grid-cols-[minmax(0,1fr)_340px] items-start gap-6 xl:grid-cols-[minmax(0,1fr)_360px] 2xl:grid-cols-[minmax(0,1fr)_380px]">
          <div className="min-w-0 max-w-[640px]">
            <h1 className={isDark ? "text-[42px] font-black leading-[1.02] tracking-[-0.06em] text-white xl:text-[48px] 2xl:text-[54px]" : "text-[42px] font-black leading-[1.02] tracking-[-0.06em] text-[#0F172A] xl:text-[48px] 2xl:text-[54px]"}>
              Bem-vindo ao
              <br />
              <span className={isDark ? "text-[#4FD1C5]" : "text-[#0F766E]"}>Litoral Central</span>
            </h1>

            <div className={isDark ? "mt-5 h-[2px] w-14 bg-[#4FD1C5]" : "mt-5 h-[2px] w-14 bg-[#0F766E]"} />

            <p className={isDark ? "mt-5 max-w-[560px] text-[14px] leading-6 text-[#A8B3C7] xl:text-[15px] xl:leading-7" : "mt-5 max-w-[560px] text-[14px] leading-6 text-slate-700 xl:text-[15px] xl:leading-7"}>
              A sua plataforma inteligente para gestão de operações agrícolas.
              Acompanhe as condições, controle os sistemas e maximize a eficiência no campo.
            </p>

            <button
              type="button"
              onClick={onOpenMeteo}
              className={isDark ? `mt-6 inline-flex h-[48px] items-center gap-4 ${RADIUS} border border-[#2A3950] bg-[#111A2B] px-6 text-sm font-extrabold text-white transition hover:border-[#36506D] hover:bg-[#162235]` : `mt-6 inline-flex h-[48px] items-center gap-4 ${RADIUS} border border-[#CBD5E1] bg-white px-6 text-sm font-extrabold text-[#0F172A] transition hover:bg-[#F8FAFC]`}
            >
              Explorar plataforma
              <ArrowRight className={isDark ? "h-5 w-5 text-[#4FD1C5]" : "h-5 w-5 text-[#0F766E]"} />
            </button>
          </div>

          <div className="dashboard-weather-card flex justify-end pt-3">
            <WeatherForecastCard
              compact
              theme={theme}
              forecast={weather.forecast}
              loading={weather.loading}
              error={weather.error}
              onOpenMeteo={onOpenMeteo}
            />
          </div>
        </section>

        <section className="grid grid-cols-3 gap-3 xl:gap-4">
          <InfoCard theme={theme} icon={<CloudSun className="h-6 w-6 xl:h-7 xl:w-7" />} iconClass={isDark ? "bg-[#13202F] text-[#4FD1C5]" : "bg-[#ECFDF5] text-[#0F766E]"} title="Meteorologia" text="Consulte previsões, vento, radiação solar e condições meteorológicas." onClick={() => onNavigate("meteo")} />
          <InfoCard theme={theme} icon={<TabletSmartphone className="h-6 w-6 xl:h-7 xl:w-7" />} iconClass={isDark ? "bg-[#13202F] text-[#7DD3FC]" : "bg-[#EFF6FF] text-[#0369A1]"} title="Consola VNC" text="Aceda remotamente ao controlador e acompanhe a instalação em tempo real." onClick={() => onNavigate("console")} />
          <InfoCard theme={theme} icon={<BarChart3 className="h-6 w-6 xl:h-7 xl:w-7" />} iconClass={isDark ? "bg-[#171B2B] text-[#A5B4FC]" : "bg-[#EEF2FF] text-[#4F46E5]"} title="Gráficos Climáticos" text="Visualize históricos, tendências e análise detalhada dos sensores." onClick={() => onNavigate("climateCharts")} />
        </section>

        <section className={isDark ? `${RADIUS} min-h-0 border border-[#263247] bg-[#0E1726]/92 p-5 shadow-[0_18px_50px_rgba(0,0,0,0.28)] backdrop-blur-md xl:p-6` : `${RADIUS} min-h-0 border border-[#D7DEE8] bg-white p-5 shadow-[0_14px_40px_rgba(15,23,42,0.06)] backdrop-blur-md xl:p-6`}>
          <div className="grid h-full min-h-0 grid-cols-[minmax(0,0.95fr)_minmax(420px,1fr)] items-center gap-4 xl:grid-cols-[minmax(0,0.85fr)_minmax(520px,1fr)]">
            <div className="min-w-0">
              <p className={isDark ? "text-[11px] font-bold uppercase tracking-[0.24em] text-[#7F8CA3] xl:text-xs" : "text-[11px] font-bold uppercase tracking-[0.24em] text-[#0F766E] xl:text-xs"}>A Nossa Missão</p>

              <h2 className={isDark ? "mt-3 text-[25px] font-black leading-tight tracking-[-0.045em] text-white xl:text-[29px]" : "mt-3 text-[25px] font-black leading-tight tracking-[-0.045em] text-[#0F172A] xl:text-[29px]"}>
                Soluções inovadoras para
                <br />
                uma <span className={isDark ? "text-[#4FD1C5]" : "text-[#0F766E]"}>agricultura sustentável</span>
              </h2>

              <p className={isDark ? "mt-3 max-w-[560px] text-[13px] leading-5 text-[#7F8CA3] xl:text-sm xl:leading-6" : "mt-3 max-w-[560px] text-[13px] leading-5 text-slate-600 xl:text-sm xl:leading-6"}>
                Tecnologia, conhecimento e proximidade para impulsionar o futuro do setor agrícola em Portugal.
              </p>

              <div className={isDark ? "mt-4 grid grid-cols-3 gap-3 border-t border-[#263247] pt-4" : "mt-4 grid grid-cols-3 gap-3 border-t border-[#D7DEE8] pt-4"}>
                <MissionItem theme={theme} icon={<Sprout />} title="Sustentabilidade" text="Compromisso com o futuro" />
                <MissionItem theme={theme} icon={<ShieldCheck />} title="Confiabilidade" text="Tecnologia robusta e segura" />
                <MissionItem theme={theme} icon={<Users />} title="Apoio próximo" text="Sempre ao seu lado" />
              </div>
            </div>

            <FarmIllustration theme={theme} />
          </div>
        </section>

        <footer className={isDark ? "flex min-h-0 items-center justify-between px-1 text-xs text-[#7F8CA3]" : "flex min-h-0 items-center justify-between px-1 text-xs text-slate-500"}>
          <span>© 2026 Litoral Central. Todos os direitos reservados.</span>
          <span>Feito em Portugal <span className="ml-2">🇵🇹</span></span>
        </footer>
      </main>
    </div>
  );
}

function InfoCard({ theme, icon, iconClass, title, text, onClick }: { theme: "dark" | "light"; icon: ReactNode; iconClass: string; title: string; text: string; onClick?: () => void }) {
  const isDark = theme === "dark";

  return (
    <button type="button" onClick={onClick} className={isDark ? `${RADIUS} flex min-h-[106px] w-full items-center justify-between border border-[#263247] bg-[#0E1726]/92 p-4 text-left shadow-[0_18px_50px_rgba(0,0,0,0.24)] backdrop-blur-md transition hover:border-[#36506D] hover:bg-[#132033] xl:min-h-[114px] xl:p-5` : `${RADIUS} flex min-h-[106px] w-full items-center justify-between border border-[#D7DEE8] bg-white p-4 text-left shadow-[0_8px_24px_rgba(15,23,42,0.05)] backdrop-blur-md transition hover:bg-[#F8FAFC] xl:min-h-[114px] xl:p-5`}>
      <div className="flex min-w-0 items-center gap-3 xl:gap-4">
        <div className={`grid h-[50px] w-[50px] shrink-0 place-items-center ${RADIUS} ${iconClass} xl:h-[58px] xl:w-[58px]`}>
          {icon}
        </div>

        <div className="min-w-0">
          <h3 className={isDark ? "truncate text-sm font-black text-white xl:text-base" : "truncate text-sm font-black text-[#0F172A] xl:text-base"}>
            {title}
          </h3>

          <p className={isDark ? "mt-1 line-clamp-2 max-w-[300px] text-xs leading-4 text-[#7F8CA3] xl:text-sm xl:leading-5" : "mt-1 line-clamp-2 max-w-[300px] text-xs leading-4 text-slate-600 xl:text-sm xl:leading-5"}>
            {text}
          </p>
        </div>
      </div>

      <ArrowRight className={isDark ? "ml-3 h-4 w-4 shrink-0 text-[#4FD1C5] xl:h-5 xl:w-5" : "ml-3 h-4 w-4 shrink-0 text-[#0F766E] xl:h-5 xl:w-5"} />
    </button>
  );
}

function MissionItem({ theme, icon, title, text }: { theme: "dark" | "light"; icon: ReactNode; title: string; text: string }) {
  const isDark = theme === "dark";

  return (
    <div className="flex min-w-0 items-center gap-2 xl:gap-3">
      <div className={isDark ? "h-5 w-5 shrink-0 text-[#4FD1C5] xl:h-6 xl:w-6" : "h-5 w-5 shrink-0 text-[#0F766E] xl:h-6 xl:w-6"}>
        {icon}
      </div>

      <div className="min-w-0">
        <h4 className={isDark ? "truncate text-xs font-black text-white xl:text-sm" : "truncate text-xs font-black text-[#0F172A] xl:text-sm"}>
          {title}
        </h4>
        <p className={isDark ? "mt-1 truncate text-[11px] text-[#7F8CA3] xl:text-xs" : "mt-1 truncate text-[11px] text-slate-600 xl:text-xs"}>
          {text}
        </p>
      </div>
    </div>
  );
}

function FarmIllustration({ theme }: { theme: "dark" | "light" }) {
  return (
    <div className="relative h-full min-h-[210px] w-full overflow-hidden">
      <img
        src={theme === "dark" ? farmdrawImage : farmdrawWhiteImage}
        alt=""
        className="absolute right-[-10px] top-1/2 h-[280px] max-w-none -translate-y-1/2 opacity-95 xl:h-[330px] 2xl:h-[360px]"
      />
    </div>
  );
}

export default DashboardPage;