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 overflow-hidden text-slate-100"
          : "relative h-full overflow-hidden 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%)]"
        }
      />

      <main className="relative z-10 grid h-full w-full grid-rows-[minmax(330px,1.25fr)_118px_minmax(310px,1fr)_22px] gap-5 px-14 pb-3 pt-10">
        <section className="relative min-h-0 pb-10">
          <div className="max-w-[620px] pt-5">
            <h1
              className={
                isDark
                  ? "text-[52px] font-black leading-[1.03] tracking-[-0.06em] text-white"
                  : "text-[52px] font-black leading-[1.03] tracking-[-0.06em] text-[#0F172A]"
              }
            >
              Bem-vindo ao
              <br />
              <span className={isDark ? "text-[#4FD1C5]" : "text-[#0F766E]"}>
                Litoral Central
              </span>
            </h1>

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

            <p
              className={
                isDark
                  ? "mt-7 max-w-[500px] text-[15px] leading-7 text-[#A8B3C7]"
                  : "mt-7 max-w-[500px] text-[15px] leading-7 text-slate-700"
              }
            >
              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-8 inline-flex h-[52px] items-center gap-5 ${RADIUS} border border-[#2A3950] bg-[#111A2B] px-7 text-sm font-extrabold text-white transition hover:border-[#36506D] hover:bg-[#162235]`
                  : `mt-8 inline-flex h-[52px] items-center gap-5 ${RADIUS} border border-[#CBD5E1] bg-white px-7 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>

          <WeatherForecastCard
            compact
            theme={theme}
            forecast={weather.forecast}
            loading={weather.loading}
            error={weather.error}
            onOpenMeteo={onOpenMeteo}
          />
        </section>

        <section className="grid min-h-0 grid-cols-3 gap-5">
          <InfoCard
            theme={theme}
            icon={<CloudSun className="h-7 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-7 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-7 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
              ? `min-h-0 overflow-visible ${RADIUS} border border-[#263247] bg-[#0E1726]/92 p-8 shadow-[0_18px_50px_rgba(0,0,0,0.28)] backdrop-blur-md`
              : `min-h-0 overflow-visible ${RADIUS} border border-[#D7DEE8] bg-white p-8 shadow-[0_14px_40px_rgba(15,23,42,0.06)] backdrop-blur-md`
          }
        >
          <div className="grid h-full grid-cols-[minmax(0,0.9fr)_minmax(620px,1.1fr)] items-center gap-2">
            <div>
              <p
                className={
                  isDark
                    ? "text-xs font-bold uppercase tracking-[0.28em] text-[#7F8CA3]"
                    : "text-xs font-bold uppercase tracking-[0.28em] text-[#0F766E]"
                }
              >
                A Nossa Missão
              </p>

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

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

              <div
                className={
                  isDark
                    ? "mt-6 grid grid-cols-3 gap-5 border-t border-[#263247] pt-6"
                    : "mt-6 grid grid-cols-3 gap-5 border-t border-[#D7DEE8] pt-6"
                }
              >
                <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-56 text-xs text-[#7F8CA3]"
              : "flex min-h-0 items-center justify-between px-56 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: React.ReactNode;
  iconClass: string;
  title: string;
  text: string;
  onClick?: () => void;
}) {
  const isDark = theme === "dark";

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

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

          <p
            className={
              isDark
                ? "mt-2 max-w-[280px] text-sm leading-5 text-[#7F8CA3]"
                : "mt-2 max-w-[280px] text-sm leading-5 text-slate-600"
            }
          >
            {text}
          </p>
        </div>
      </div>

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

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

  return (
    <div className="flex items-center gap-3">
      <div className={isDark ? "h-7 w-7 text-[#4FD1C5]" : "h-7 w-7 text-[#0F766E]"}>
        {icon}
      </div>
      <div>
        <h4
          className={
            isDark
              ? "text-sm font-black text-white"
              : "text-sm font-black text-[#0F172A]"
          }
        >
          {title}
        </h4>
        <p
          className={
            isDark
              ? "mt-1 text-xs text-[#7F8CA3]"
              : "mt-1 text-xs text-slate-600"
          }
        >
          {text}
        </p>
      </div>
    </div>
  );
}

function FarmIllustration({ theme }: { theme: "dark" | "light" }) {
  const isDark = theme === "dark";

  return (
    <div className="relative h-full min-h-[270px] w-full overflow-visible">
      <img
        src={isDark ? farmdrawImage : farmdrawWhiteImage}
        alt=""
        className={
          isDark
            ? "absolute right-[-70px] top-1/2 h-[380px] max-w-none -translate-y-1/2 opacity-90"
            : "absolute right-[-70px] top-1/2 h-[380px] max-w-none -translate-y-1/2 opacity-100"
        }
      />
    </div>
  );
}

export default DashboardPage;