'use client';

const PLATFORM_PATTERNS: { pattern: RegExp; label: string; color: string }[] = [
  { pattern: /instagram\.com/, label: 'Instagram', color: 'bg-pink-100 text-pink-700' },
  { pattern: /twitter\.com|x\.com/, label: 'X / Twitter', color: 'bg-sky-100 text-sky-700' },
  { pattern: /threads\.net/, label: 'Threads', color: 'bg-purple-100 text-purple-700' },
  { pattern: /tiktok\.com/, label: 'TikTok', color: 'bg-red-100 text-red-700' },
  { pattern: /linkedin\.com/, label: 'LinkedIn', color: 'bg-blue-100 text-blue-700' },
];

function detectPlatform(url: string): { label: string; color: string } | null {
  for (const p of PLATFORM_PATTERNS) {
    if (p.pattern.test(url)) return { label: p.label, color: p.color };
  }
  return null;
}

interface UrlInputProps {
  value: string;
  onChange: (value: string) => void;
}

export default function UrlInput({ value, onChange }: UrlInputProps): React.ReactElement {
  const platform = value ? detectPlatform(value) : null;

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-gray-700">Paste a link</label>
      <div className="relative">
        <input
          type="url"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="https://..."
          className="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 pr-32"
        />
        {platform && (
          <span className={`absolute right-3 top-1/2 -translate-y-1/2 text-xs font-medium px-2 py-1 rounded-full ${platform.color}`}>
            {platform.label}
          </span>
        )}
      </div>
      <p className="text-xs text-gray-400">
        Works with Instagram, X, Threads, TikTok, LinkedIn, and any webpage
      </p>
    </div>
  );
}