import { useState } from "react";
import {
    Button,
    Card,
    FileInput,
    Stack,
    Text,
    Group,
    Loader,
    Alert,
    Code,
} from "@mantine/core";
import { IconUpload, IconCheck, IconAlertTriangle } from "@tabler/icons-react";
import apiFetch from "@/lib/apiFetch";

export default function ChatterboxRegisterPromptFile() {
    const [file, setFile] = useState<File | null>(null);
    const [result, setResult] = useState<any>(null);
    const [loading, setLoading] = useState(false);

    const uploadPrompt = async () => {
        if (!file) return;

        setLoading(true);
        setResult(null);

        try {
            const res = await apiFetch.api["chatterbox-tts"]["register-prompt-file"].post({
                file: file
            });

            setResult({ success: true, data: res.data?.data });
        } catch (err) {
            setResult({ success: false, error: err + "" });
        } finally {
            setLoading(false);
        }
    };

    return (
        <Card shadow="md" radius="lg" p="xl" withBorder>
            <Stack gap="lg">
                <Text size="xl" fw={700}>
                    🎤 Register Prompt File
                </Text>

                <FileInput
                    label="Upload Prompt (.wav)"
                    placeholder="Choose WAV file"
                    value={file}
                    onChange={setFile}
                    accept="audio/wav"
                    clearable
                    radius="md"
                    size="md"
                    description="File harus format .wav — biasanya sample dari suara Anda"
                />

                <Button
                    onClick={uploadPrompt}
                    disabled={!file || loading}
                    loading={loading}
                    radius="md"
                    leftSection={!loading && <IconUpload size={18} />}
                    fullWidth
                >
                    {loading ? "Uploading..." : "Upload Prompt"}
                </Button>

                {/* --- Response Section --- */}
                {result && (
                    <>
                        {result.success ? (
                            <Alert
                                icon={<IconCheck size={16} />}
                                color="green"
                                title="Upload berhasil!"
                                radius="md"
                            >
                                Prompt file sudah terdaftar.
                            </Alert>
                        ) : (
                            <Alert
                                icon={<IconAlertTriangle size={16} />}
                                color="red"
                                title="Gagal upload"
                                radius="md"
                            >
                                {result.error}
                            </Alert>
                        )}

                        <Card shadow="sm" p="md" radius="md" bg="#fafafa" withBorder>
                            <Text fw={600} mb={4}>Server Response:</Text>
                            <Code block>
                                {JSON.stringify(result, null, 2)}
                            </Code>
                        </Card>
                    </>
                )}
            </Stack>
        </Card>
    );
}
