import React from "react";
import { FlexWidget, TextWidget } from "react-native-android-widget";
import { getDelayData } from "./TraInfoEXWidget";
import { getInfoString } from "./InfoWidget";
import { getFelicaQuickAccessData } from "./FelicaQuickAccessWidget";
import { isAvailable as isNfcAvailable } from "../../modules/expo-felica-reader/src";
import { WidgetColors, widgetLightColors } from "./widget-theme";

export async function getShortcutData() {
  const hasNfc = isNfcAvailable();

  const [delayResult, infoResult, felicaResult] = await Promise.allSettled([
    getDelayData(),
    getInfoString(),
    hasNfc ? getFelicaQuickAccessData() : Promise.resolve({ amountText: "" }),
  ]);

  const delayCount =
    delayResult.status === "fulfilled" && delayResult.value.delayString
      ? delayResult.value.delayString.length
      : 0;

  const hasInfo =
    infoResult.status === "fulfilled" &&
    infoResult.value.text != null &&
    infoResult.value.text.length > 0;

  const amountText =
    felicaResult.status === "fulfilled"
      ? felicaResult.value.amountText
      : "未読取";

  return { delayCount, hasInfo, amountText, hasNfc };
}

export type ShortcutWidgetProps = {
  delayCount: number;
  hasInfo: boolean;
  amountText: string;
  hasNfc: boolean;
  widgetWidth?: number;
  widgetHeight?: number;
  colors?: WidgetColors;
};

const SPACING = 2;

/** 汎用グリッドタイル */
function GridTile({
  icon,
  label,
  sub,
  subColor,
  badgeText,
  badgeColor,
  bottomTrailing,
  uri,
  colors,
}: {
  icon: string;
  label: string;
  sub?: string;
  subColor?: string;
  badgeText?: string;
  badgeColor?: string;
  bottomTrailing?: string;
  uri: string;
  colors: WidgetColors;
}) {
  return (
    <FlexWidget
      style={{
        flex: 1,
        backgroundColor: colors.tileBg,
        borderRadius: 10,
        padding: 8,
        justifyContent: "center",
      }}
      clickAction="OPEN_URI"
      clickActionData={{ uri }}
    >
      <FlexWidget style={{ flexDirection: "row", alignItems: "center" }}>
        <TextWidget text={icon} style={{ fontSize: 22 }} />
        <FlexWidget style={{ marginLeft: 6, flex: 1 }}>
          {badgeText !== undefined && badgeColor !== undefined ? (
            <FlexWidget style={{ flexDirection: "row", alignItems: "center" }}>
              <TextWidget
                text={label}
                style={{ color: colors.text, fontSize: 12, fontWeight: "bold" }}
              />
              <FlexWidget
                style={{
                  backgroundColor: badgeColor as any,
                  borderRadius: 6,
                  paddingLeft: 4,
                  paddingRight: 4,
                  paddingTop: 1,
                  paddingBottom: 1,
                  marginLeft: 3,
                }}
              >
                <TextWidget
                  text={badgeText}
                  style={{ color: colors.badgeText, fontSize: 9, fontWeight: "bold" }}
                />
              </FlexWidget>
            </FlexWidget>
          ) : (
            <TextWidget
              text={label}
              style={{ color: colors.text, fontSize: 12, fontWeight: "bold" }}
            />
          )}
          {sub !== undefined ? (
            <TextWidget
              text={sub}
              style={{ color: (subColor ?? colors.textSecondary) as any, fontSize: 10, marginTop: 1 }}
            />
          ) : (
            <TextWidget text="" style={{ fontSize: 1 }} />
          )}
        </FlexWidget>
      </FlexWidget>
      {bottomTrailing !== undefined && (
        <FlexWidget
          style={{
            flexDirection: "row",
            justifyContent: "flex-end",
            width: "match_parent",
          }}
        >
          <TextWidget
            text={bottomTrailing}
            style={{ color: colors.textSecondary, fontSize: 8, fontWeight: "600" }}
          />
        </FlexWidget>
      )}
    </FlexWidget>
  );
}

/** アイコンだけのコンパクトタイル */
function IconTile({ icon, uri, colors }: { icon: string; uri: string; colors: WidgetColors }) {
  return (
    <FlexWidget
      style={{
        flex: 1,
        backgroundColor: colors.tileBg,
        borderRadius: 10,
        justifyContent: "center",
        alignItems: "center",
      }}
      clickAction="OPEN_URI"
      clickActionData={{ uri }}
    >
      <TextWidget text={icon} style={{ fontSize: 28 }} />
    </FlexWidget>
  );
}

export function ShortcutWidget({ delayCount, hasInfo, amountText, hasNfc, widgetWidth, widgetHeight, colors = widgetLightColors }: ShortcutWidgetProps) {
  const compact = (widgetWidth ?? 300) < 200 || (widgetHeight ?? 300) < 150;

  if (compact) {
    return (
      <FlexWidget
        style={{
          height: "match_parent",
          width: "match_parent",
          backgroundColor: colors.background,
          borderRadius: 16,
          padding: 4,
        }}
      >
        <FlexWidget
          style={{
            flexDirection: "row",
            width: "match_parent",
            flex: 1,
          }}
        >
          <IconTile icon="🚃" uri="jrshikoku://positions/apps" colors={colors} />
          <FlexWidget style={{ width: 4, height: "match_parent" }}>
            <TextWidget text="" style={{ fontSize: 1 }} />
          </FlexWidget>
          <IconTile icon="⚡" uri="jrshikoku://open/traininfo" colors={colors} />
        </FlexWidget>
        <FlexWidget
          style={{
            flexDirection: "row",
            width: "match_parent",
            flex: 1,
          }}
        >
          <IconTile icon="📋" uri="jrshikoku://open/operation" colors={colors} />
          <FlexWidget style={{ width: 4, height: "match_parent" }}>
            <TextWidget text="" style={{ fontSize: 1 }} />
          </FlexWidget>
          <IconTile icon="🏠" uri="jrshikoku://open/topmenu" colors={colors} />
        </FlexWidget>
      </FlexWidget>
    );
  }

  return (
    <FlexWidget
      style={{
        height: "match_parent",
        width: "match_parent",
        backgroundColor: colors.background,
        borderRadius: 16,
        padding: 16,
      }}
    >
      {/* Row 1: 走行位置 | 遅延速報EX */}
      <FlexWidget
        style={{
          flexDirection: "row",
          width: "match_parent",
          flex: 1,
        }}
      >
        <GridTile icon="🚃" label="走行位置" sub="列車の現在位置" uri="jrshikoku://positions/apps" colors={colors} />
        <FlexWidget style={{ width: SPACING, height: "match_parent" }}>
          <TextWidget text="" style={{ fontSize: 1 }} />
        </FlexWidget>
        <GridTile
          icon="⚡"
          label="遅延速報EX"
          sub="列車の遅延情報"
          uri="jrshikoku://open/traininfo"
          badgeText={delayCount > 0 ? `${delayCount}件` : "なし"}
          badgeColor={delayCount > 0 ? "#E53935" : "#9E9E9E"}
          colors={colors}
        />
      </FlexWidget>

      {/* Row 2: 運行情報 | ICカード */}
      <FlexWidget
        style={{
          flexDirection: "row",
          width: "match_parent",
          flex: 1,
        }}
      >
        <GridTile
          icon="📋"
          label="運行情報"
          sub="列車の運行状況"
          uri="jrshikoku://open/operation"
          badgeText={hasInfo ? "あり" : "なし"}
          badgeColor={hasInfo ? "#FF7043" : "#9E9E9E"}
          colors={colors}
        />
        {hasNfc && (
          <FlexWidget style={{ width: SPACING, height: "match_parent" }}>
            <TextWidget text="" style={{ fontSize: 1 }} />
          </FlexWidget>
        )}
        {hasNfc && (
          <GridTile
            icon="💳"
            label="ICカード"
            sub={amountText}
            subColor="#0099CC"
            uri="jrshikoku://open/felica"
            colors={colors}
          />
        )}
      </FlexWidget>

      {/* Row 3: トップメニュー（全幅） */}
      <FlexWidget
        style={{
          flexDirection: "row",
          width: "match_parent",
          flex: 1,
        }}
      >
        <GridTile
          icon="🏠"
          label="トップメニュー"
          sub="アプリのトップへ"
          bottomTrailing="クイックアクセス"
          uri="jrshikoku://open/topmenu"
          colors={colors}
        />
      </FlexWidget>
    </FlexWidget>
  );
}