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

const Home: React.FC = () => {
    /* component level state */
    const [url, setUrl] = useState('');

    /* global 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' && url.trim() !== '') {
            dispatch(shortenUrl(url));
        }
    };

    const handleCopy = () => {
        if (shortUrl) {
            copyToClipboard(shortUrl)
                .then(() => console.log('Copied!'))
                .catch((err) => console.error('Copy failed', err));
        }
    };

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

                <input
                    type="text"
                    placeholder="https://example.com/my-long-url"
                    value={url}
                    onChange={(e) => setUrl(e.target.value)}
                    onKeyDown={handleKeyDown}
                    className="w-80 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' && (
                    <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;