import { useState } from "react";
import { Modal, Button, Form, ListGroup, Alert } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { addStore, deleteStore, Store } from "../../../../types";

type Props = {
    isOpen: boolean;
    onClose: () => void;
    stores: Store[];
    onStoresChanged: (stores: Store[]) => void;
};

export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
    const [newName, setNewName] = useState('');
    const [newUrl, setNewUrl] = useState('');
    const [heslo, setHeslo] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const handleAdd = async () => {
        if (!newName.trim()) return;
        setError(null);
        setLoading(true);
        try {
            const res = await addStore({ body: { name: newName.trim(), url: newUrl.trim() || undefined, heslo } });
            if (res.error) {
                setError((res.error as any).error || 'Nastala chyba');
            } else if (res.data) {
                onStoresChanged(res.data as Store[]);
                setNewName('');
                setNewUrl('');
            }
        } catch (e: any) {
            setError(e.message || 'Nastala chyba');
        } finally {
            setLoading(false);
        }
    };

    const handleRemove = async (name: string) => {
        setError(null);
        setLoading(true);
        try {
            const res = await deleteStore({ body: { name, heslo } });
            if (res.error) {
                setError((res.error as any).error || 'Nastala chyba');
            } else if (res.data) {
                onStoresChanged(res.data as Store[]);
            }
        } catch (e: any) {
            setError(e.message || 'Nastala chyba');
        } finally {
            setLoading(false);
        }
    };

    return (
        <Modal show={isOpen} onHide={onClose}>
            <Modal.Header closeButton>
                <Modal.Title><h2>Správa obchodů</h2></Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {error && (
                    <Alert variant="danger" onClose={() => setError(null)} dismissible>
                        {error}
                    </Alert>
                )}

                <Form.Group className="mb-3">
                    <Form.Label>Admin heslo</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Heslo"
                        value={heslo}
                        onChange={e => setHeslo(e.target.value)}
                        onKeyDown={e => e.stopPropagation()}
                    />
                </Form.Group>

                <hr />
                <h6>Přidat obchod</h6>
                <Form.Control
                    className="mb-2"
                    type="text"
                    placeholder="Název obchodu"
                    value={newName}
                    onChange={e => setNewName(e.target.value)}
                    onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
                />
                <div className="d-flex gap-2 mb-3">
                    <Form.Control
                        type="url"
                        placeholder="URL na nabídku (volitelné, např. Bolt Food/Wolt)"
                        value={newUrl}
                        onChange={e => setNewUrl(e.target.value)}
                        onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
                    />
                    <Button variant="primary" onClick={handleAdd} disabled={loading || !newName.trim() || !heslo}>
                        Přidat
                    </Button>
                </div>

                <h6>Aktuální seznam</h6>
                {stores.length === 0 ? (
                    <p className="text-muted">Žádné obchody v seznamu</p>
                ) : (
                    <ListGroup>
                        {stores.map(s => (
                            <ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-center">
                                <span>
                                    {s.name}
                                    {s.url && /^https?:\/\//i.test(s.url) && (
                                        <a href={s.url} target="_blank" rel="noopener noreferrer" className="ms-2" title="Otevřít nabídku v nové záložce">
                                            <FontAwesomeIcon icon={faUpRightFromSquare} />
                                        </a>
                                    )}
                                </span>
                                <FontAwesomeIcon
                                    icon={faTrashCan}
                                    className="action-icon"
                                    title="Odebrat"
                                    onClick={() => handleRemove(s.name)}
                                    style={{ cursor: 'pointer' }}
                                />
                            </ListGroup.Item>
                        ))}
                    </ListGroup>
                )}
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={onClose}>Zavřít</Button>
            </Modal.Footer>
        </Modal>
    );
}