import React, { useState } from 'react';
import { useAppDispatch, useAppSelector } from '../app/hooks';
import {
  shortenUrl,
  selectShortUrl,
  selectUrlStatus,
  selectUrlError,
  clearShortUrl,
} from '../features/url/urlSlice';

const Home: React.FC = () => {
  // Component-level state
  const [longUrl, setLongUrl] = useState('');

  // Redux state
  const dispatch = useAppDispatch();
  const shortUrl = useAppSelector(selectShortUrl);
  const status = useAppSelector(selectUrlStatus);
  const error = useAppSelector(selectUrlError);

  // Methods
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && longUrl.trim() !== '') {
      dispatch(shortenUrl(longUrl));
    }
  };

  const handleCopy = () => {
    if (shortUrl) {
      navigator.clipboard.writeText(shortUrl);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-purple-100 px-4">
      <div className="text-center space-y-6 max-w-md w-full">
        <h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>

        <input
          type="text"
          placeholder="Enter your long URL here"
          value={longUrl}
          onChange={(e) => setLongUrl(e.target.value)}
          onKeyDown={handleKeyDown}
          className="w-full p-3 rounded-md text-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
        />

        {/* Loading State */}
        {status === 'loading' && (
          <p className="text-gray-600 text-sm">Shortening your URL...</p>
        )}

        {/* Error Message */}
        {status === 'failed' && error && (
          <p className="text-red-600 text-sm">{error}</p>
        )}

        {/* Short URL Display */}
        {status === 'succeeded' && shortUrl && (
          <div className="space-y-2">
            <p className="text-green-700 font-medium text-lg">
              Your short URL:
              <a
                href={shortUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="underline ml-2"
              >
                {shortUrl}
              </a>
            </p>
            <button
              onClick={handleCopy}
              className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition"
            >
              Copy to Clipboard
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Home;