"use client";

import React from "react";
import {
  DevicePhoneMobileIcon,
  WifiIcon,
  SignalIcon,
  ClockIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import type { SimDetails } from "@customer-portal/domain/sim";
import { Formatting } from "@customer-portal/domain/toolkit";
import { formatIsoDate } from "@/shared/utils";
import { formatPlanShort } from "@/features/subscriptions/utils/plan";

// Re-export for backwards compatibility
export type { SimDetails };

const CARD_BASE_CLASS = "bg-card shadow-sm rounded-[var(--cp-card-radius)] border border-border";
const CARD_PADDING_CLASS = "p-[var(--cp-card-padding)] lg:p-[var(--cp-card-padding-lg)]";
const SECTION_PADDING_CLASS = "px-[var(--cp-space-6)] py-[var(--cp-space-4)]";
const CONTENT_PADDING_CLASS = "px-[var(--cp-space-6)] py-[var(--cp-space-6)]";

const STATUS_ICON_MAP: Record<string, React.ReactNode> = {
  active: <CheckCircleIcon className="h-6 w-6 text-success" />,
  suspended: <ExclamationTriangleIcon className="h-6 w-6 text-warning" />,
  cancelled: <XCircleIcon className="h-6 w-6 text-danger" />,
  pending: <ClockIcon className="h-6 w-6 text-info" />,
};

const STATUS_COLOR_MAP: Record<string, string> = {
  active: "bg-success-soft text-success",
  suspended: "bg-warning-soft text-warning",
  cancelled: "bg-danger-soft text-danger",
  pending: "bg-info-soft text-info",
};

const DEFAULT_STATUS_COLOR = "bg-muted text-muted-foreground";

function getStatusIcon(status: string) {
  return (
    STATUS_ICON_MAP[status] ?? <DevicePhoneMobileIcon className="h-6 w-6 text-muted-foreground" />
  );
}

function getStatusColor(status: string) {
  return STATUS_COLOR_MAP[status] ?? DEFAULT_STATUS_COLOR;
}

function formatPlan(code?: string) {
  const formatted = formatPlanShort(code);
  return formatted?.replace(/^PASI\s*/, "") || formatted;
}

function formatDate(dateString: string) {
  const formatted = formatIsoDate(dateString, { fallback: dateString, dateStyle: "medium" });
  return formatted === "Invalid date" ? dateString : formatted;
}

function formatQuota(quotaMb: number) {
  if (quotaMb >= 1000) return `${(quotaMb / 1000).toFixed(1)} GB`;
  return `${quotaMb.toFixed(0)} MB`;
}

function featureColorClass(enabled: boolean | undefined) {
  return enabled ? "text-success" : "text-muted-foreground";
}

interface SimDetailsCardProps {
  simDetails: SimDetails;
  isLoading?: boolean;
  error?: string | null;
  embedded?: boolean;
  showFeaturesSummary?: boolean;
}

function SimDetailsCardSkeleton({ embedded }: { embedded: boolean }) {
  const containerClass = embedded
    ? CARD_PADDING_CLASS
    : [
        CARD_BASE_CLASS,
        "hover:shadow-md transition-shadow duration-[var(--cp-transition-normal)]",
        CARD_PADDING_CLASS,
      ].join(" ");
  return (
    <div className={containerClass}>
      <div className="animate-pulse">
        <div className="flex items-center space-x-4">
          <div className="rounded-full bg-gradient-to-br from-primary-soft to-accent-soft h-14 w-14"></div>
          <div className="flex-1 space-y-3">
            <div className="h-5 bg-gradient-to-r from-muted to-muted-hover rounded-[var(--cp-radius-md)] w-3/4"></div>
            <div className="h-4 bg-gradient-to-r from-muted to-muted-hover rounded-[var(--cp-radius-md)] w-1/2"></div>
          </div>
        </div>
        <div className="mt-8 space-y-4">
          <div className="h-4 bg-gradient-to-r from-muted to-muted-hover rounded-[var(--cp-radius-md)]"></div>
          <div className="h-4 bg-gradient-to-r from-muted to-muted-hover rounded-[var(--cp-radius-md)] w-5/6"></div>
          <div className="h-4 bg-gradient-to-r from-muted to-muted-hover rounded-[var(--cp-radius-md)] w-4/6"></div>
        </div>
      </div>
    </div>
  );
}

function SimDetailsCardError({ embedded, error }: { embedded: boolean; error: string }) {
  return (
    <div
      className={`${embedded ? "" : "bg-card shadow-sm rounded-[var(--cp-card-radius)] border border-danger-soft "}${CARD_PADDING_CLASS}`}
    >
      <div className="text-center">
        <div className="bg-danger-soft rounded-full p-3 w-16 h-16 mx-auto mb-4">
          <ExclamationTriangleIcon className="h-10 w-10 text-danger mx-auto" />
        </div>
        <h3 className="text-lg font-semibold text-foreground mb-2">Error Loading SIM Details</h3>
        <p className="text-danger text-sm">{error}</p>
      </div>
    </div>
  );
}

function UsageDonut({
  size = 120,
  usagePercentage,
  remainingGB,
}: {
  size?: number;
  usagePercentage: number;
  remainingGB: number;
}) {
  const radius = (size - 16) / 2;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (usagePercentage / 100) * circumference;

  return (
    <div className="relative flex items-center justify-center">
      <svg width={size} height={size} className="transform -rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="currentColor"
          strokeWidth="8"
          className="text-muted"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="currentColor"
          strokeWidth="8"
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={strokeDashoffset}
          className="text-primary transition-all duration-[var(--cp-transition-normal)]"
        />
      </svg>
      <div className="absolute text-center">
        <div className="text-3xl font-semibold text-foreground">{remainingGB.toFixed(1)}</div>
        <div className="text-sm text-muted-foreground -mt-1">GB remaining</div>
        <div className="text-xs text-muted-foreground mt-1">{usagePercentage.toFixed(1)}% used</div>
      </div>
    </div>
  );
}

function EsimDetailsView({ simDetails, embedded }: { simDetails: SimDetails; embedded: boolean }) {
  const remainingGB = simDetails.remainingQuotaMb / 1000;
  const totalGB = 1048.6;
  const usedGB = totalGB - remainingGB;
  const usagePercentage = (usedGB / totalGB) * 100;
  const headerClass = embedded ? "" : SECTION_PADDING_CLASS + " border-b border-border";

  return (
    <div className={embedded ? "" : CARD_BASE_CLASS}>
      <div className={headerClass}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <span
              className={`inline-flex px-3 py-1 text-xs font-medium rounded-full ${getStatusColor(simDetails.status)}`}
            >
              {Formatting.capitalize(simDetails.status)}
            </span>
            <span className="text-lg font-semibold text-foreground">
              {formatPlan(simDetails.planCode)}
            </span>
          </div>
        </div>
        <div className="text-sm text-muted-foreground mt-1">{simDetails.msisdn}</div>
      </div>
      <div className={`${embedded ? "" : CONTENT_PADDING_CLASS}`}>
        <div className="flex justify-center mb-6">
          <UsageDonut size={160} usagePercentage={usagePercentage} remainingGB={remainingGB} />
        </div>
        <div className="border-t border-border pt-4">
          <h4 className="text-sm font-medium text-foreground mb-3">Recent Usage History</h4>
          <div className="space-y-2">
            {[
              { date: "Sep 29", usage: "0 MB" },
              { date: "Sep 28", usage: "0 MB" },
              { date: "Sep 27", usage: "0 MB" },
            ].map((entry, index) => (
              <div key={index} className="flex justify-between items-center text-xs">
                <span className="text-muted-foreground">{entry.date}</span>
                <span className="text-foreground">{entry.usage}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function FeatureIndicator({
  icon,
  enabled,
  label,
}: {
  icon: React.ReactNode;
  enabled: boolean | undefined;
  label: string;
}) {
  return (
    <div className="flex items-center">
      {icon}
      <span className={`text-sm ${featureColorClass(enabled)}`}>
        {label} {enabled ? "Enabled" : "Disabled"}
      </span>
    </div>
  );
}

function PhysicalSimView({
  simDetails,
  embedded,
  showFeaturesSummary,
}: {
  simDetails: SimDetails;
  embedded: boolean;
  showFeaturesSummary: boolean;
}) {
  const headerClass = embedded ? "" : SECTION_PADDING_CLASS + " border-b border-border";
  return (
    <div className={embedded ? "" : CARD_BASE_CLASS}>
      <div className={headerClass}>
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <div className="text-2xl mr-3">
              <DevicePhoneMobileIcon className="h-8 w-8 text-primary" />
            </div>
            <div>
              <h3 className="text-lg font-medium text-foreground">Physical SIM Details</h3>
              <p className="text-sm text-muted-foreground">
                {formatPlan(simDetails.planCode)} • {`${simDetails.simType} SIM`}
              </p>
            </div>
          </div>
          <div className="flex items-center space-x-3">
            {getStatusIcon(simDetails.status)}
            <span
              className={`inline-flex px-3 py-1 text-sm font-semibold rounded-full ${getStatusColor(simDetails.status)}`}
            >
              {Formatting.capitalize(simDetails.status)}
            </span>
          </div>
        </div>
      </div>
      <div className={`${embedded ? "" : SECTION_PADDING_CLASS}`}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <SimInformationSection simDetails={simDetails} />
          {showFeaturesSummary && <ServiceFeaturesSection simDetails={simDetails} />}
        </div>
        {simDetails.expiresAt && (
          <div className="mt-6 pt-6 border-t border-border">
            <div className="flex items-center text-sm">
              <ClockIcon className="h-4 w-4 text-warning mr-2" />
              <span className="text-warning-foreground">
                Expires on {formatDate(simDetails.expiresAt)}
              </span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function SimInformationSection({ simDetails }: { simDetails: SimDetails }) {
  return (
    <div>
      <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">
        SIM Information
      </h4>
      <div className="space-y-3">
        <div>
          <label className="text-xs text-muted-foreground">Phone Number</label>
          <p className="text-sm font-medium text-foreground">{simDetails.msisdn}</p>
        </div>
        <div>
          <label className="text-xs text-muted-foreground">ICCID</label>
          <p className="text-sm font-mono text-foreground break-all">{simDetails.iccid}</p>
        </div>
        {simDetails.eid && (
          <div>
            <label className="text-xs text-muted-foreground">EID (eSIM)</label>
            <p className="text-sm font-mono text-foreground break-all">{simDetails.eid}</p>
          </div>
        )}
        {simDetails.imsi && (
          <div>
            <label className="text-xs text-muted-foreground">IMSI</label>
            <p className="text-sm font-mono text-foreground">{simDetails.imsi}</p>
          </div>
        )}
        {simDetails.activatedAt && (
          <div>
            <label className="text-xs text-muted-foreground">Service Start Date</label>
            <p className="text-sm text-foreground">{formatDate(simDetails.activatedAt)}</p>
          </div>
        )}
      </div>
    </div>
  );
}

function ServiceFeaturesSection({ simDetails }: { simDetails: SimDetails }) {
  return (
    <div>
      <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">
        Service Features
      </h4>
      <div className="space-y-3">
        <div>
          <label className="text-xs text-muted-foreground">Data Remaining</label>
          <p className="text-lg font-semibold text-success">
            {formatQuota(simDetails.remainingQuotaMb)}
          </p>
        </div>
        {simDetails.hasVoice === false ? (
          <p className="text-sm text-muted-foreground">Data-only plan (no voice features)</p>
        ) : (
          <>
            <div className="flex items-center space-x-4">
              <FeatureIndicator
                icon={
                  <SignalIcon
                    className={`h-4 w-4 mr-1 ${featureColorClass(simDetails.voiceMailEnabled)}`}
                  />
                }
                enabled={simDetails.voiceMailEnabled}
                label="Voicemail"
              />
              <FeatureIndicator
                icon={
                  <DevicePhoneMobileIcon
                    className={`h-4 w-4 mr-1 ${featureColorClass(simDetails.callWaitingEnabled)}`}
                  />
                }
                enabled={simDetails.callWaitingEnabled}
                label="Call Waiting"
              />
            </div>
            <FeatureIndicator
              icon={
                <WifiIcon
                  className={`h-4 w-4 mr-1 ${featureColorClass(simDetails.internationalRoamingEnabled)}`}
                />
              }
              enabled={simDetails.internationalRoamingEnabled}
              label="Int'l Roaming"
            />
          </>
        )}
      </div>
    </div>
  );
}

export function SimDetailsCard({
  simDetails,
  isLoading,
  error,
  embedded = false,
  showFeaturesSummary = true,
}: SimDetailsCardProps) {
  if (isLoading) return <SimDetailsCardSkeleton embedded={embedded} />;
  if (error) return <SimDetailsCardError embedded={embedded} error={error} />;
  if (simDetails.simType === "esim")
    return <EsimDetailsView simDetails={simDetails} embedded={embedded} />;
  return (
    <PhysicalSimView
      simDetails={simDetails}
      embedded={embedded}
      showFeaturesSummary={showFeaturesSummary}
    />
  );
}
