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 { faPen, faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
import { addStore, deleteStore, updateStore, Store } from "../../../../types";
import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";

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

/** Rozpracovaná editace obchodu — původní název slouží k jeho identifikaci na serveru. */
type EditState = {
    originalName: string;
    name: string;
    urls: string[];
};

/** Vstupní pole pro URL nabídek — vždy alespoň jedno prázdné, aby bylo kam psát. */
function toUrlInputs(urls: string[]): string[] {
    return urls.length > 0 ? urls : [''];
}

export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
    const [newName, setNewName] = useState('');
    // Jeden podnik může být dostupný přes více dovozových služeb — proto seznam URL
    const [newUrls, setNewUrls] = useState<string[]>(['']);
    const [edit, setEdit] = useState<EditState | null>(null);
    const [heslo, setHeslo] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const addUrlRow = (urls: string[]) => [...urls, ''];

    const removeUrlRow = (urls: string[], index: number) =>
        urls.length === 1 ? [''] : urls.filter((_, i) => i !== index);

    const setUrlAt = (urls: string[], index: number, value: string) =>
        urls.map((u, i) => (i === index ? value : u));

    /** Zpracuje odpověď API — vrací true při úspěchu. Chybu z API hlásí globální toaster. */
    const applyResult = (res: { data?: unknown; error?: unknown }): boolean => {
        if (res.error) {
            return false;
        }
        if (res.data) {
            onStoresChanged(res.data as Store[]);
            return true;
        }
        return false;
    };

    const handleAdd = async () => {
        if (!newName.trim()) return;
        setError(null);
        setLoading(true);
        try {
            const urls = newUrls.map(u => u.trim()).filter(Boolean);
            const res = await addStore({ body: { name: newName.trim(), urls: urls.length > 0 ? urls : undefined, heslo } });
            if (applyResult(res)) {
                setNewName('');
                setNewUrls(['']);
            }
        } catch (e: any) {
            setError(e.message || 'Nastala chyba');
        } finally {
            setLoading(false);
        }
    };

    const startEdit = (store: Store) => {
        setError(null);
        setEdit({ originalName: store.name, name: store.name, urls: toUrlInputs(store.urls ?? []) });
    };

    const handleSaveEdit = async () => {
        if (!edit || !edit.name.trim()) return;
        setError(null);
        setLoading(true);
        try {
            const res = await updateStore({
                body: {
                    name: edit.originalName,
                    newName: edit.name.trim(),
                    urls: edit.urls.map(u => u.trim()).filter(Boolean),
                    heslo,
                },
            });
            if (applyResult(res)) {
                setEdit(null);
            }
        } 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 (applyResult(res) && edit?.originalName === name) {
                setEdit(null);
            }
        } catch (e: any) {
            setError(e.message || 'Nastala chyba');
        } finally {
            setLoading(false);
        }
    };

    /** Řádky se vstupy pro URL — používá se pro přidání i pro editaci obchodu. */
    const renderUrlInputs = (urls: string[], onChange: (urls: string[]) => void, onSubmit: () => void) => (
        <>
            {urls.map((url, index) => (
                <div key={index} className="d-flex gap-2 mb-2 align-items-center">
                    <Form.Control
                        type="url"
                        placeholder={index === 0
                            ? 'URL na nabídku (volitelné, např. Bolt Food/Wolt)'
                            : 'Další URL na nabídku (jiná dovozová služba)'}
                        value={url}
                        onChange={e => onChange(setUrlAt(urls, index, e.target.value))}
                        onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') onSubmit(); }}
                    />
                    <Button
                        variant="outline-secondary"
                        onClick={() => onChange(removeUrlRow(urls, index))}
                        disabled={urls.length === 1 && !url}
                        title="Odebrat tuto URL"
                    >
                        <FontAwesomeIcon icon={faXmark} />
                    </Button>
                </div>
            ))}
            <Button variant="link" size="sm" className="p-0" onClick={() => onChange(addUrlRow(urls))}>
                <FontAwesomeIcon icon={faPlus} className="me-1" />
                Přidat další URL
            </Button>
        </>
    );

    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(); }}
                />
                {renderUrlInputs(newUrls, setNewUrls, handleAdd)}
                <div className="d-flex justify-content-end mb-3">
                    <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 => {
                            const urls = getStoreUrls(s);
                            const isEditing = edit?.originalName === s.name;

                            if (isEditing) {
                                return (
                                    <ListGroup.Item key={s.name}>
                                        <Form.Control
                                            className="mb-2"
                                            type="text"
                                            placeholder="Název obchodu"
                                            value={edit.name}
                                            onChange={e => setEdit({ ...edit, name: e.target.value })}
                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveEdit(); }}
                                        />
                                        {renderUrlInputs(edit.urls, next => setEdit({ ...edit, urls: next }), handleSaveEdit)}
                                        <div className="d-flex justify-content-end gap-2 mt-2">
                                            <Button variant="secondary" size="sm" onClick={() => setEdit(null)}>
                                                Zrušit
                                            </Button>
                                            <Button
                                                variant="primary"
                                                size="sm"
                                                onClick={handleSaveEdit}
                                                disabled={loading || !edit.name.trim() || !heslo}
                                            >
                                                Uložit
                                            </Button>
                                        </div>
                                    </ListGroup.Item>
                                );
                            }

                            return (
                                <ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-start">
                                    <div>
                                        <div>{s.name}</div>
                                        {urls.length > 0 && (
                                            <small className="text-muted d-flex flex-wrap gap-2">
                                                {urls.map(url => (
                                                    <a
                                                        key={url}
                                                        href={url}
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        title={url}
                                                    >
                                                        {storeUrlLabel(url)}
                                                        <FontAwesomeIcon icon={faUpRightFromSquare} className="ms-1" />
                                                    </a>
                                                ))}
                                            </small>
                                        )}
                                    </div>
                                    <div className="d-flex gap-3">
                                        <FontAwesomeIcon
                                            icon={faPen}
                                            className="action-icon"
                                            title="Upravit"
                                            onClick={() => startEdit(s)}
                                            style={{ cursor: 'pointer' }}
                                        />
                                        <FontAwesomeIcon
                                            icon={faTrashCan}
                                            className="action-icon"
                                            title="Odebrat"
                                            onClick={() => handleRemove(s.name)}
                                            style={{ cursor: 'pointer' }}
                                        />
                                    </div>
                                </ListGroup.Item>
                            );
                        })}
                    </ListGroup>
                )}
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={onClose}>Zavřít</Button>
            </Modal.Footer>
        </Modal>
    );
}