import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'
import type { AcAppKey } from '../lib/acAssets'
import { AcIcon } from './AcIcon'

export function PageTitle({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <div className="mb-8">
      <div className="ac-title-bar">{title}</div>
      {subtitle ? (
        <p className="max-w-2xl text-base leading-relaxed text-ink-secondary">{subtitle}</p>
      ) : null}
    </div>
  )
}

export function Card({ children, className = '' }: { children: ReactNode; className?: string }) {
  return (
    <div className={`ac-dialog rounded-[var(--radius-lg)] p-5 md:p-6 ${className}`}>{children}</div>
  )
}

export function Field({
  label,
  children,
}: {
  label: string
  children: ReactNode
}) {
  return (
    <label className="block text-sm">
      <span className="mb-2 block font-bold text-ink">{label}</span>
      {children}
    </label>
  )
}

export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <input
      {...props}
      className={`ac-field w-full px-4 py-3 text-[15px] text-ink outline-none transition placeholder:text-subtle focus:border-brand focus:ring-4 focus:ring-brand-soft ${props.className ?? ''}`}
    />
  )
}

export function Textarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return (
    <textarea
      {...props}
      className={`ac-field w-full px-4 py-3 font-mono text-[15px] text-ink outline-none transition placeholder:text-subtle focus:border-brand focus:ring-4 focus:ring-brand-soft ${props.className ?? ''}`}
    />
  )
}

export function Button({
  children,
  variant = 'primary',
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: 'primary' | 'ghost' | 'danger' | 'soft' }) {
  const styles =
    variant === 'primary'
      ? 'ac-btn-primary'
      : variant === 'danger'
        ? 'ac-btn-danger'
        : variant === 'soft'
          ? 'ac-btn-secondary bg-brand-soft text-brand'
          : 'ac-btn-secondary'
  const { className, ...rest } = props
  return (
    <button
      {...rest}
      className={`inline-flex min-h-11 items-center justify-center rounded-[var(--radius-pill)] px-5 py-2.5 text-sm whitespace-nowrap transition disabled:opacity-50 ${styles} ${className ?? ''}`}
    >
      {children}
    </button>
  )
}

export function Badge({
  children,
  tone = 'neutral',
}: {
  children: ReactNode
  tone?: 'neutral' | 'brand' | 'sky' | 'success' | 'warning' | 'danger'
}) {
  const tones = {
    neutral: 'border-wood-dark bg-accent-soft text-ink',
    brand: 'border-brand bg-brand-soft text-brand',
    sky: 'border-accent bg-accent-soft text-accent',
    success: 'border-success bg-success-soft text-success',
    warning: 'border-warning bg-warning-soft text-warning',
    danger: 'border-danger bg-danger-soft text-danger',
  }
  return (
    <span
      className={`inline-flex items-center rounded-[var(--radius-pill)] border-2 px-3 py-1 text-[13px] font-bold ${tones[tone]}`}
    >
      {children}
    </span>
  )
}

export function ErrorText({ message }: { message?: string }) {
  if (!message) return null
  return <p className="mt-2 text-sm font-semibold text-danger">{message}</p>
}

export function CopyableId({ label, value }: { label: string; value: string }) {
  const copy = async () => {
    if (!value) return
    await navigator.clipboard.writeText(value)
  }
  return (
    <div className="ac-slot px-4 py-3">
      <div className="text-xs font-bold text-ink-secondary">{label}</div>
      <div className="mt-1 flex items-start justify-between gap-2">
        <code className="break-all text-sm text-ink">{value || '—'}</code>
        {value ? (
          <button type="button" onClick={copy} className="ac-btn-secondary shrink-0 px-3 py-1 text-xs">
            複製
          </button>
        ) : null}
      </div>
    </div>
  )
}

export function QuickLinkCard({
  to,
  title,
  desc,
  icon,
}: {
  to: string
  title: string
  desc: string
  icon: AcAppKey
  tag?: string
}) {
  return (
    <Link to={to} className="ac-app-card group block p-5">
      <AcIcon app={icon} size="lg" className="mx-auto" />
      <h3 className="mt-3 text-center text-lg font-bold text-ink transition group-hover:text-brand">{title}</h3>
      <p className="mt-2 text-center text-sm leading-relaxed text-ink-secondary">{desc}</p>
      <p className="mt-3 text-center text-sm font-bold text-brand">打開 →</p>
    </Link>
  )
}

export function StatCard({
  label,
  value,
  hint,
  tone = 'default',
}: {
  label: string
  value: ReactNode
  hint?: string
  tone?: 'default' | 'brand' | 'sky'
}) {
  const slot =
    tone === 'brand' ? 'ac-slot ac-slot--brand' : tone === 'sky' ? 'ac-slot ac-slot--sky' : 'ac-slot'
  return (
    <div className={`${slot} p-5`}>
      <p className="text-sm font-bold text-ink-secondary">{label}</p>
      <div className="mt-2 text-2xl font-black tracking-tight text-ink md:text-3xl">{value}</div>
      {hint ? <p className="mt-2 text-sm text-muted">{hint}</p> : null}
    </div>
  )
}