import React, { useState } from 'react';
import type { Grid } from '@/types/grid';
import { getSavedArt, deleteSavedArt, type SavedArt } from '@/utils/storage';
import { GridComponent } from './grid/GridComponent';
import { gridFromAscii } from '@/utils/grid';

const demoArt = [
    { name: '🎨 Butterfly', art: `|                      |
|  ⠀⠀⠀⠀⊹               |
|  ⢶⢻⣑⣒⢤⡀⠀⢄⠀⠀⡠⠀⢀⡤⣆⣊⡿⡷  |
|  ⠀⠹⠹⣚⣣⠻⣦⡀⠀⠀⢀⣴⠟⣸⢓⢎⠏⠀  |
|  ⠀⠀⢡⣱⣖⣢⡾⢿⣾⣷⡿⢷⣖⣒⣎⡎⠀⠀  |
|  ⠀⠀⠀⣠⠓⢬⠅⡺⢻⡟⢗⠨⡥⠚⣄⠀⠀⠀  |
|  ⠀⠀⠀⣿⡆⠘⠆⢇⢸⡇⠸⠰⠃⢰⣿⠀⠀⠀  |
|  ⠀⠀⠀⠐⡻⣮⣬⠞⠈⠁⠳⣤⣴⢿⠂⠀⠀⠀  |
|  ⠀⠀⠀⡜⠀⠁⠉⠀⠀⠀⠀⠈⠈⠀⢣⠀⠀⠀  |
|  ⊹                   |
|                      |` },
    { name: '😊 Smiley', art: `    ████████
  ██        ██
 ██  ██  ██  ██
██              ██
██   ██    ██   ██
██              ██
 ██  ██████████ ██
  ██          ██
    ████████    ` },
    { name: '🌟 Star', art: `    ★
   ███
  █████
 ███████
█████████
 ███████
  █████
   ███
    █    ` },
];

interface LoadScreenProps {
    onLoad: (grid: Grid) => void;
    onNew: () => void;
    onPaste: (ansiText: string) => void;
}

export const LoadScreen: React.FC<LoadScreenProps> = ({ onLoad, onNew, onPaste }) => {
    const [saves] = useState<SavedArt[]>(getSavedArt());
    const [pasteText, setPasteText] = useState('');

    const handleDemoLoad = (art: string) => {
        const grid = gridFromAscii(art);
        onLoad(grid);
    };

    const formatDate = (timestamp: number) => {
        const date = new Date(timestamp);
        return date.toLocaleString();
    };

    const handleDelete = (id: string, e: React.MouseEvent) => {
        e.stopPropagation();
        deleteSavedArt(id);
        window.location.reload();
    };

    const handlePaste = () => {
        if (pasteText.trim()) {
            onPaste(pasteText.trim());
        }
    };

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '1.5rem',
            padding: '2rem',
            width: '100%',
            maxWidth: '900px',
            margin: '0 auto',
        }}>
            <h2>ANSI Color Paint</h2>

            <div>
                <h3>Demo Templates</h3>
                <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                    {demoArt.map((demo, idx) => (
                        <button
                            key={idx}
                            onClick={() => handleDemoLoad(demo.art)}
                            style={{ flex: '1 1 calc(33% - 0.5rem)', minWidth: '150px' }}
                        >
                            {demo.name}
                        </button>
                    ))}
                </div>
            </div>

            <div>
                <h3>Recent Saves</h3>
                {saves.length > 0 ? (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                        {saves.map((save) => (
                            <div
                                key={save.id}
                                onClick={() => onLoad(save.grid)}
                                style={{
                                    border: '2px solid var(--regular3)',
                                    borderRadius: '4px',
                                    padding: '1rem',
                                    cursor: 'pointer',
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    transition: 'border-color 0.2s',
                                }}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.borderColor = 'var(--regular6)';
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.borderColor = 'var(--regular3)';
                                }}
                            >
                                <div>
                                    <div style={{ fontWeight: 'bold', marginBottom: '0.25rem' }}>
                                        {save.name}
                                    </div>
                                    <div style={{ fontSize: '0.9rem', opacity: 0.7 }}>
                                        {formatDate(save.timestamp)}
                                    </div>
                                </div>
                                <button
                                    onClick={(e) => handleDelete(save.id, e)}
                                    style={{
                                        padding: '0.25rem 0.5rem',
                                        fontSize: '0.9rem',
                                        width: 'auto',
                                        minWidth: 'fit-content',
                                    }}
                                >
                                    Delete
                                </button>
                            </div>
                        ))}
                    </div>
                ) : (
                    <p style={{ opacity: 0.7 }}>No saves yet</p>
                )}
            </div>

            <div>
                <h3>Import from ANSI Text</h3>
                <textarea
                    value={pasteText}
                    onChange={(e) => setPasteText(e.target.value)}
                    placeholder="Paste ANSI art here..."
                    style={{ width: '100%', minHeight: '100px', marginBottom: '0.5rem' }}
                />
                <button onClick={handlePaste} disabled={!pasteText.trim()}>
                    Import
                </button>
            </div>
        </div>
    );
};