import { SERTIFICATE_PRICE } from '@/shared/lib/metadata';
import { useTranslations } from 'next-intl';
import React, { useEffect } from 'react';

// ─── FieldWrapper ────────────────────────────────────────────────────────────

interface FieldWrapperProps {
  label: string;
  htmlFor?: string;
  error?: string;
  required?: boolean;
  children: React.ReactNode;
}

export function FieldWrapper({
  label,
  htmlFor,
  error,
  required,
  children,
}: FieldWrapperProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <label
        htmlFor={htmlFor}
        className="text-sm font-semibold tracking-wide text-stone-700 uppercase"
      >
        {label}
        {required && <span className="ml-1 text-rose-500">*</span>}
      </label>
      {children}
      {error && (
        <p className="flex items-center gap-1.5 text-xs text-rose-600 font-medium">
          <span className="inline-block w-1 h-1 rounded-full bg-rose-500" />
          {error}
        </p>
      )}
    </div>
  );
}

// ─── TextInput ───────────────────────────────────────────────────────────────

interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  hasError?: boolean;
}

export function TextInput({
  hasError,
  className = '',
  ...props
}: TextInputProps) {
  return (
    <input
      className={`
        w-full px-4 py-3 rounded-xl border-2 bg-white
        text-stone-800 placeholder:text-stone-400 text-sm font-medium
        transition-all duration-200 outline-none
        ${
          hasError
            ? 'border-rose-400 focus:border-rose-500 ring-2 ring-rose-100'
            : 'border-stone-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100'
        }
        ${className}
      `}
      {...props}
    />
  );
}

// ─── ReadonlyField ───────────────────────────────────────────────────────────

interface ReadonlyFieldProps {
  value: string;
  icon?: React.ReactNode;
  autoFilledText?: string;
}

export function ReadonlyField({
  value,
  icon,
  autoFilledText = 'Auto-filled',
}: ReadonlyFieldProps) {
  return (
    <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-stone-100 border-2 border-stone-200">
      {icon && <span className="text-stone-500 shrink-0">{icon}</span>}
      <span className="text-sm font-semibold text-stone-700">{value}</span>
      <span className="ml-auto text-xs text-stone-400 italic font-medium">
        {autoFilledText}
      </span>
    </div>
  );
}

// ─── FileUploadField ─────────────────────────────────────────────────────────

interface FileUploadFieldProps {
  file: File | null;
  onFileChange: (file: File | null) => void;
  hasError?: boolean;
  accept?: string;
  clickToUploadText?: string;
  fileTypesText?: string;
  removeFileAriaLabel?: string;
}

export function FileUploadField({
  file,
  onFileChange,
  hasError,
  accept = '.pdf,.doc,.docx,.txt',
  clickToUploadText = 'Click to upload document',
  fileTypesText = 'PDF, DOC, DOCX, TXT · Max 20 MB',
  removeFileAriaLabel = 'Remove file',
}: FileUploadFieldProps) {
  const inputRef = React.useRef<HTMLInputElement>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selected = e.target.files?.[0] ?? null;
    onFileChange(selected);
    // Reset so the same file can be re-selected after removal
    e.target.value = '';
  };

  const handleRemove = () => {
    onFileChange(null);
  };

  const formatBytes = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  return (
    <div>
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        onChange={handleChange}
        className="sr-only"
        id="file-upload"
      />

      {!file ? (
        <label
          htmlFor="file-upload"
          className={`
            group flex flex-col items-center justify-center gap-3
            w-full px-6 py-2 rounded-xl border-2 border-dashed
            cursor-pointer transition-all duration-200
            ${
              hasError
                ? 'border-rose-400 bg-rose-50 hover:bg-rose-50'
                : 'border-stone-300 bg-stone-50 hover:border-blue-500 hover:bg-blue-50'
            }
          `}
        >
          <div
            className={`
            w-12 h-12 rounded-2xl flex items-center justify-center
            transition-colors duration-200
            ${hasError ? 'bg-rose-100' : 'bg-white group-hover:bg-blue-100'}
          `}
          >
            <UploadIcon
              className={
                hasError
                  ? 'text-rose-400'
                  : 'text-stone-400 group-hover:text-blue-500'
              }
            />
          </div>
          <div className="text-center">
            <p
              className={`text-sm font-semibold transition-colors ${hasError ? 'text-rose-600' : 'text-stone-600 group-hover:text-blue-700'}`}
            >
              {clickToUploadText}
            </p>
            <p className="text-xs text-stone-400 mt-0.5">{fileTypesText}</p>
          </div>
        </label>
      ) : (
        <div className="flex items-center gap-3 px-4 py-3.5 rounded-xl border-2 border-blue-400 bg-blue-50">
          <div className="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center shrink-0">
            <DocumentIcon className="text-blue-600" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold text-stone-800 truncate">
              {file.name}
            </p>
            <p className="text-xs text-stone-500">{formatBytes(file.size)}</p>
          </div>
          <button
            type="button"
            onClick={handleRemove}
            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-rose-500 hover:bg-rose-100 transition-colors shrink-0"
            aria-label={removeFileAriaLabel}
          >
            <XIcon />
          </button>
        </div>
      )}
    </div>
  );
}

// ─── CertificateCheckbox ─────────────────────────────────────────────────────

interface CertificateCheckboxProps {
  checked: boolean;
  onChange: () => void;
  title?: string;
  description?: string;
}

export function CertificateCheckbox({
  checked,
  onChange,
  title = 'Return result with certificate',
  description = 'An official certificate will be attached to your originality report.',
}: CertificateCheckboxProps) {
  const t = useTranslations('PlagiarismCheck');
  return (
    <label
      className={`
      flex items-start gap-3 px-4 py-4 rounded-xl border-2 cursor-pointer
      transition-all duration-200
      ${
        checked
          ? 'border-blue-400 bg-blue-50'
          : 'border-stone-200 bg-white hover:border-stone-300'
      }
    `}
    >
      <div className="relative mt-0.5 shrink-0">
        <input
          type="checkbox"
          checked={checked}
          onChange={onChange}
          className="sr-only"
        />
        <div
          className={`
          w-5 h-5 rounded-md border-2 flex items-center justify-center
          transition-all duration-150
          ${checked ? 'bg-blue-500 border-blue-500' : 'bg-white border-stone-300'}
        `}
        >
          {checked && (
            <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
              <path
                d="M2 6l3 3 5-5"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          )}
        </div>
      </div>
      <div>
        <p className="text-sm font-semibold text-stone-800">{title}</p>
        <p className="text-sm text-stone-500">
          {t('sertificate_price', { SERTIFICATE_PRICE })}
        </p>
        <p className="text-xs text-stone-500 mt-0.5">{description}</p>
      </div>
    </label>
  );
}

// ─── SubmitButton ────────────────────────────────────────────────────────────

interface SubmitButtonProps {
  isLoading: boolean;
  submittingText?: string;
  submitText?: string;
}

export function SubmitButton({
  isLoading,
  submittingText = 'Submitting…',
  submitText = 'Submit for Originality Check',
}: SubmitButtonProps) {
  return (
    <button
      type="submit"
      disabled={isLoading}
      className={`
        w-full flex items-center justify-center gap-2.5
        px-6 py-4 rounded-xl font-bold text-sm tracking-wide uppercase
        transition-all duration-200
        ${
          isLoading
            ? 'bg-stone-200 text-stone-400 cursor-not-allowed'
            : 'bg-stone-900 text-white hover:bg-blue-600 active:scale-[0.99] shadow-lg shadow-stone-900/20 hover:shadow-blue-600/30'
        }
      `}
    >
      {isLoading ? (
        <>
          <SpinnerIcon />
          {submittingText}
        </>
      ) : (
        <>
          <ShieldIcon />
          {submitText}
        </>
      )}
    </button>
  );
}

// ─── StatusBanner ────────────────────────────────────────────────────────────

interface StatusBannerProps {
  status: 'success' | 'error';
  message: string;
  onDismiss: () => void;
  dismissText?: string;
}

export function StatusBanner({
  status,
  message,
  onDismiss,
  dismissText = 'Dismiss',
}: StatusBannerProps) {
  const isSuccess = status === 'success';
  useEffect(() => {
    setTimeout(onDismiss, 3000);
  }, []);
  return (
    <div
      className={`
      max-w-md w-full
      flex items-center gap-3 px-4 py-4 rounded-xl border-2 absolute top-6 right-6 z-50
      ${isSuccess ? 'bg-emerald-50 border-emerald-400' : 'bg-rose-50 border-rose-400'}
    `}
    >
      <span
        className={`text-lg mt-0.5 ${isSuccess ? 'text-emerald-600' : 'text-rose-600'}`}
      >
        {isSuccess ? '✓' : '✕'}
      </span>
      <p
        className={`flex-1 text-sm font-medium ${isSuccess ? 'text-emerald-800' : 'text-rose-800'}`}
      >
        {message}
      </p>
      <button
        type="button"
        onClick={onDismiss}
        className={`text-xs font-bold uppercase ${isSuccess ? 'text-emerald-600 hover:text-emerald-800' : 'text-rose-600 hover:text-rose-800'}`}
      >
        {dismissText}
      </button>
    </div>
  );
}

// ─── Inline SVG Icons ────────────────────────────────────────────────────────

function UploadIcon({ className = '' }: { className?: string }) {
  return (
    <svg
      className={`w-6 h-6 ${className}`}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.5}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
      />
    </svg>
  );
}

function DocumentIcon({ className = '' }: { className?: string }) {
  return (
    <svg
      className={`w-5 h-5 ${className}`}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.5}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
      />
    </svg>
  );
}

function XIcon() {
  return (
    <svg
      className="w-4 h-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  );
}

function ShieldIcon() {
  return (
    <svg
      className="w-4 h-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
      />
    </svg>
  );
}

function SpinnerIcon() {
  return (
    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
      />
    </svg>
  );
}