'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Info } from 'lucide-react';
import { cn } from '@/lib/utils';

export function Section({
  icon: Icon,
  title,
  subtitle,
  children,
  delay = 0,
}: {
  icon: React.ElementType;
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  delay?: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay, duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
      className="bg-white/60 backdrop-blur-xl border border-gray-200 rounded-3xl overflow-hidden shadow-sm"
    >
      <div className="flex items-center gap-4 px-6 sm:px-8 py-6 border-b border-gray-200 bg-white/40">
        <div className="p-2.5 bg-yellow-50 border border-yellow-200 rounded-xl shrink-0 shadow-sm">
          <Icon className="w-5 h-5 text-yellow-600" />
        </div>
        <div>
          <h2 className="text-sm font-bold text-gray-900 tracking-wide">
            {title}
          </h2>
          {subtitle && (
            <p className="text-[10px] text-gray-500 font-bold uppercase tracking-widest mt-1">
              {subtitle}
            </p>
          )}
        </div>
      </div>
      <div className="p-6 sm:p-8">{children}</div>
    </motion.div>
  );
}

export function Field({
  label,
  required,
  hint,
  error,
  children,
}: {
  label: string;
  required?: boolean;
  hint?: string;
  error?: string;
  children: React.ReactNode;
}) {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <label className="flex items-center gap-1.5 text-xs font-bold text-gray-600 tracking-wide">
          {label}
          {required && <span className="text-rose-500">*</span>}
          {hint && (
            <span title={hint} className="text-gray-500 cursor-help ml-1">
              <Info className="w-3.5 h-3.5" />
            </span>
          )}
        </label>
      </div>
      {children}
      {error && (
        <p className="text-[10px] font-bold text-rose-400 uppercase tracking-widest flex items-center gap-1.5 mt-2">
          <span className="w-1 h-1 bg-rose-400 rounded-full shrink-0" />
          {error}
        </p>
      )}
    </div>
  );
}

export function DarkInput({
  className,
  icon: Icon,
  error,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement> & {
  icon?: React.ElementType;
  error?: boolean | string;
}) {
  return (
    <div
      className={cn(
        'relative bg-white/40 border rounded-xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm',
        error ? 'border-rose-300 ring-1 ring-rose-300' : 'border-gray-200',
        props.disabled && 'opacity-50 cursor-not-allowed bg-gray-50'
      )}
    >
      {Icon && (
        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
          <Icon className="w-4 h-4 text-gray-400" />
        </div>
      )}
      <input
        className={cn(
          'w-full py-3.5 bg-transparent text-gray-900 text-sm font-medium placeholder:text-gray-400 focus:outline-none tracking-wide disabled:cursor-not-allowed',
          Icon ? 'pl-11 pr-4' : 'px-4',
          className
        )}
        {...props}
      />
    </div>
  );
}

export function DarkTextarea({
  className,
  error,
  ...props
}: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
  error?: boolean | string;
}) {
  return (
    <div
      className={cn(
        'relative bg-white/40 border rounded-xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm',
        error ? 'border-rose-300 ring-1 ring-rose-300' : 'border-gray-200'
      )}
    >
      <textarea
        className={cn(
          'w-full px-4 py-3.5 bg-transparent text-gray-900 text-sm font-medium placeholder:text-gray-400 focus:outline-none tracking-wide resize-none',
          className
        )}
        {...props}
      />
    </div>
  );
}

export function DirtyDot() {
  return (
    <span
      className="inline-block w-2 h-2 rounded-full bg-yellow-400 shrink-0 animate-pulse shadow-[0_0_8px_rgba(250,204,21,0.6)]"
      title="Ada perubahan"
    />
  );
}