import type { ComponentType, ReactNode } from "react";
import { cn } from "@/lib/utils";

export function Screen({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div
      className={cn(
        "animate-rise space-y-5 sm:space-y-7 px-1.5 sm:px-3 pb-16 pt-3 w-full",
        className,
      )}
    >
      {children}
    </div>
  );
}

export function PageTitle({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <header className="space-y-1.5 pb-2.5 px-1">
      <h1 className="text-3xl sm:text-4xl leading-tight font-extrabold font-display tracking-tight text-foreground">
        {title}
      </h1>
      {subtitle ? (
        <p className="text-sm sm:text-base font-semibold text-muted-foreground leading-relaxed">
          {subtitle}
        </p>
      ) : null}
    </header>
  );
}

export function SectionHeading({
  title,
  action,
  onAction,
}: {
  title: string;
  action?: string;
  onAction?: () => void;
}) {
  return (
    <div className="flex items-center justify-between gap-3 px-1 py-1.5 w-full">
      <h2 className="truncate text-lg sm:text-xl font-extrabold tracking-tight text-foreground">
        {title}
      </h2>
      {action ? (
        <button
          type="button"
          onClick={onAction}
          className="press shrink-0 rounded-2xl bg-secondary px-4 py-2 text-xs sm:text-sm font-extrabold text-secondary-foreground border border-border shadow-xs hover:bg-secondary/80"
        >
          {action}
        </button>
      ) : null}
    </div>
  );
}

export function Card({
  children,
  className,
  onClick,
}: {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
}) {
  const Comp = onClick ? "button" : "div";
  return (
    <Comp
      onClick={onClick}
      className={cn(
        "glass-card w-full rounded-2xl sm:rounded-3xl p-4 sm:p-5 text-left transition-all duration-300 shadow-md border border-border/80 bg-card/95 backdrop-blur-md min-h-[84px]",
        onClick && "press hover:bg-card/80 active:scale-[0.99]",
        className,
      )}
    >
      {children}
    </Comp>
  );
}

export function StatTile({
  icon: Icon,
  label,
  value,
  hint,
  tone = "primary",
}: {
  icon: ComponentType<{ className?: string }>;
  label: string;
  value: string;
  hint?: string;
  tone?: "primary" | "accent" | "success";
}) {
  const toneMap = {
    primary:
      "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20",
    accent: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/20",
    success: "bg-teal-500/15 text-teal-600 dark:text-teal-400 border border-teal-500/20",
  } as const;
  return (
    <div className="glass-card w-full p-4 sm:p-5 rounded-2xl border border-border/80 bg-card/95 shadow-sm flex flex-col justify-between min-h-[105px]">
      <div className="flex items-center justify-between mb-2">
        <div className={cn("grid h-10 w-10 place-items-center rounded-xl", toneMap[tone])}>
          <Icon className="h-5 w-5" />
        </div>
      </div>
      <div>
        <p className="font-display text-xl sm:text-2xl font-extrabold text-foreground">{value}</p>
        <p className="mt-0.5 text-xs sm:text-sm font-bold text-muted-foreground">{label}</p>
        {hint ? (
          <p className="mt-1 text-xs font-semibold text-muted-foreground/80">{hint}</p>
        ) : null}
      </div>
    </div>
  );
}

export function Pill({
  children,
  tone = "muted",
  className,
}: {
  children: ReactNode;
  tone?: "muted" | "primary" | "accent" | "success" | "warning";
  className?: string;
}) {
  const toneMap = {
    muted: "bg-muted text-muted-foreground border border-border/60",
    primary:
      "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30",
    accent: "bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30",
    success: "bg-teal-500/15 text-teal-700 dark:text-teal-300 border border-teal-500/30",
    warning: "bg-orange-500/15 text-orange-700 dark:text-orange-300 border border-orange-500/30",
  } as const;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-extrabold",
        toneMap[tone],
        className,
      )}
    >
      {children}
    </span>
  );
}

export function ActionButton({
  children,
  onClick,
  variant = "primary",
  className,
  icon: Icon,
}: {
  children: ReactNode;
  onClick?: () => void;
  variant?: "primary" | "soft" | "outline" | "accent";
  className?: string;
  icon?: ComponentType<{ className?: string }>;
}) {
  const variants = {
    primary:
      "gradient-primary text-primary-foreground shadow-sm hover:shadow-md border border-emerald-400/30",
    accent:
      "gradient-accent text-accent-foreground shadow-sm hover:shadow-md border border-amber-400/30",
    soft: "bg-secondary backdrop-blur-md text-secondary-foreground border border-border/60",
    outline: "border border-border bg-card text-foreground hover:bg-muted/80",
  } as const;
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "press inline-flex min-h-[52px] sm:min-h-[56px] w-full items-center justify-center gap-2.5 rounded-2xl px-5 text-sm sm:text-base font-extrabold transition-all duration-200 active:scale-[0.98] shadow-sm",
        variants[variant],
        className,
      )}
    >
      {Icon ? <Icon className="h-5 w-5 shrink-0" /> : null}
      {children}
    </button>
  );
}

export function ProgressBar({
  value,
  tone = "primary",
}: {
  value: number;
  tone?: "primary" | "accent" | "success";
}) {
  const toneMap = {
    primary: "bg-primary",
    accent: "bg-accent",
    success: "bg-success",
  } as const;
  return (
    <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
      <div
        className={cn("h-full rounded-full transition-[width] duration-500", toneMap[tone])}
        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
      />
    </div>
  );
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
}: {
  icon: ComponentType<{ className?: string }>;
  title: string;
  description: string;
  action?: ReactNode;
}) {
  return (
    <div className="glass-card flex flex-col items-center gap-3 px-6 py-10 text-center">
      <div className="grid h-14 w-14 place-items-center rounded-2xl bg-secondary/50 backdrop-blur-md text-primary">
        <Icon className="h-6 w-6" />
      </div>
      <div className="space-y-1">
        <p className="font-display text-base font-semibold">{title}</p>
        <p className="text-sm text-muted-foreground">{description}</p>
      </div>
      {action}
    </div>
  );
}

export function SkeletonCard() {
  return (
    <div className="glass-card space-y-3 p-4">
      <div className="h-4 w-1/3 animate-pulse rounded-full bg-muted" />
      <div className="h-3 w-2/3 animate-pulse rounded-full bg-muted" />
      <div className="h-24 animate-pulse rounded-xl bg-muted" />
    </div>
  );
}