import React, { useEffect, useState, useCallback, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
    Box, Typography, Button, CircularProgress, Alert, Chip, TextField,
    IconButton, Tooltip, Divider, Paper, Select, MenuItem, FormControl,
    InputLabel, Switch, FormControlLabel, Dialog, DialogTitle,
    DialogContent, DialogActions,
} from '@mui/material';
import {
    ArrowBack, Add, Delete, AutoAwesome, DragIndicator, Save,
    LibraryBooks, LinkOff,
} from '@mui/icons-material';
import { useAuth } from '../../contexts/AuthContext';

const API_BASE = import.meta.env.VITE_API_BASE || import.meta.env.VITE_API_URL || '/api';

// ─── Types ────────────────────────────────────────────────────────────────────

interface Objective {
    id: string;
    text: string;
    bloom_level?: string;
    order: number;
}

interface Activity {
    id: string;
    section: string;
    title: string;
    description: string;
    duration_minutes?: number;
    order: number;
}

interface LessonPlan {
    id: string;
    title: string;
    subject: string | null;
    year_group: string | null;
    duration_minutes: number | null;
    context_notes: string | null;
    objectives: Objective[];
    activities: Activity[];
    is_public: boolean;
    creator_id: string;
}

// ─── Constants ────────────────────────────────────────────────────────────────

const BLOOM_LEVELS = ['remember', 'understand', 'apply', 'analyse', 'evaluate', 'create'];
const SECTION_SUGGESTIONS = ['Starter', 'Main', 'Plenary', 'Extension', 'Assessment', 'Discussion'];
const BLOOM_COLORS: Record<string, string> = {
    remember: '#90caf9', understand: '#a5d6a7', apply: '#fff176',
    analyse: '#ffcc80', evaluate: '#ef9a9a', create: '#ce93d8',
};

// ─── AI Suggest button ────────────────────────────────────────────────────────

function SuggestButton({ onClick, loading }: { onClick: () => void; loading: boolean }) {
    return (
        <Tooltip title="AI suggest">
            <span>
                <IconButton size="small" onClick={onClick} disabled={loading} color="primary" sx={{ p: 0.5 }}>
                    {loading ? <CircularProgress size={16} /> : <AutoAwesome fontSize="small" />}
                </IconButton>
            </span>
        </Tooltip>
    );
}

// ─── Main page ────────────────────────────────────────────────────────────────

const LessonPlanDetailPage: React.FC = () => {
    const { planId } = useParams<{ planId: string }>();
    const navigate = useNavigate();
    const { accessToken } = useAuth();

    const [plan, setPlan] = useState<LessonPlan | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [saving, setSaving] = useState(false);
    const [saved, setSaved] = useState(false);
    const [suggestingField, setSuggestingField] = useState<string | null>(null);

    // Local editable state (mirrors plan)
    const [title, setTitle] = useState('');
    const [subject, setSubject] = useState('');
    const [yearGroup, setYearGroup] = useState('');
    const [duration, setDuration] = useState('');
    const [contextNotes, setContextNotes] = useState('');
    const [isPublic, setIsPublic] = useState(false);
    const [objectives, setObjectives] = useState<Objective[]>([]);
    const [activities, setActivities] = useState<Activity[]>([]);

    const autoSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

    const load = useCallback(async () => {
        if (!accessToken || !planId) return;
        setLoading(true);
        setError(null);
        try {
            const res = await fetch(`${API_BASE}/lessons/plans/${planId}`, {
                headers: { Authorization: `Bearer ${accessToken}` },
            });
            const data = await res.json();
            if (data.id) {
                setPlan(data);
                setTitle(data.title || '');
                setSubject(data.subject || '');
                setYearGroup(data.year_group || '');
                setDuration(data.duration_minutes?.toString() || '');
                setContextNotes(data.context_notes || '');
                setIsPublic(data.is_public || false);
                setObjectives(data.objectives || []);
                setActivities(data.activities || []);
            } else {
                setError(data.detail || 'Plan not found');
            }
        } catch (e: any) {
            setError(e.message);
        } finally {
            setLoading(false);
        }
    }, [accessToken, planId]);

    useEffect(() => { load(); }, [load]);

    // ── Save ──────────────────────────────────────────────────────────────────

    const save = useCallback(async (
        overrides?: Partial<{ title: string; subject: string; year_group: string; duration_minutes: number | null; context_notes: string; is_public: boolean; objectives: Objective[]; activities: Activity[] }>
    ) => {
        if (!accessToken || !planId) return;
        setSaving(true);
        setSaved(false);
        try {
            await fetch(`${API_BASE}/lessons/plans/${planId}`, {
                method: 'PATCH',
                headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    title,
                    subject: subject || null,
                    year_group: yearGroup || null,
                    duration_minutes: duration ? parseInt(duration, 10) : null,
                    context_notes: contextNotes || null,
                    is_public: isPublic,
                    objectives,
                    activities,
                    ...overrides,
                }),
            });
            setSaved(true);
            setTimeout(() => setSaved(false), 2000);
        } catch (e: any) {
            setError(e.message);
        } finally {
            setSaving(false);
        }
    }, [accessToken, planId, title, subject, yearGroup, duration, contextNotes, isPublic, objectives, activities]);

    const scheduleAutoSave = useCallback(() => {
        if (autoSaveTimer.current) clearTimeout(autoSaveTimer.current);
        autoSaveTimer.current = setTimeout(() => save(), 1500);
    }, [save]);

    // ── Objectives ────────────────────────────────────────────────────────────

    const addObjective = () => {
        const next: Objective = { id: crypto.randomUUID(), text: '', bloom_level: undefined, order: objectives.length };
        setObjectives(prev => [...prev, next]);
    };

    const updateObjective = (id: string, patch: Partial<Objective>) => {
        setObjectives(prev => prev.map(o => o.id === id ? { ...o, ...patch } : o));
        scheduleAutoSave();
    };

    const removeObjective = (id: string) => {
        setObjectives(prev => prev.filter(o => o.id !== id).map((o, i) => ({ ...o, order: i })));
        scheduleAutoSave();
    };

    // ── Activities ────────────────────────────────────────────────────────────

    const addActivity = () => {
        const next: Activity = {
            id: crypto.randomUUID(), section: 'Main', title: '', description: '', order: activities.length,
        };
        setActivities(prev => [...prev, next]);
    };

    const updateActivity = (id: string, patch: Partial<Activity>) => {
        setActivities(prev => prev.map(a => a.id === id ? { ...a, ...patch } : a));
        scheduleAutoSave();
    };

    const removeActivity = (id: string) => {
        setActivities(prev => prev.filter(a => a.id !== id).map((a, i) => ({ ...a, order: i })));
        scheduleAutoSave();
    };

    // ── AI Suggest ────────────────────────────────────────────────────────────

    const suggest = async (field: string, targetId?: string) => {
        if (!accessToken || !planId) return;
        const key = targetId ? `${field}_${targetId}` : field;
        setSuggestingField(key);
        try {
            const body: Record<string, any> = {
                field,
                context: contextNotes,
                objective_texts: objectives.map(o => o.text).filter(Boolean),
            };
            if (field === 'activity_description' && targetId) {
                const act = activities.find(a => a.id === targetId);
                if (act) body.activity_section = act.section;
            }
            const res = await fetch(`${API_BASE}/lessons/plans/${planId}/suggest`, {
                method: 'POST',
                headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
            });
            const data = await res.json();
            if (data.suggestion) {
                if (field === 'objectives') {
                    addObjective();
                    setObjectives(prev => {
                        const updated = [...prev];
                        updated[updated.length - 1] = { ...updated[updated.length - 1], text: data.suggestion };
                        return updated;
                    });
                } else if (field === 'activity_description' && targetId) {
                    updateActivity(targetId, { description: data.suggestion });
                } else if (field === 'title') {
                    setTitle(data.suggestion);
                    scheduleAutoSave();
                }
            }
        } catch (e: any) {
            setError('AI suggest failed: ' + e.message);
        } finally {
            setSuggestingField(null);
        }
    };

    // ── Render ────────────────────────────────────────────────────────────────

    if (loading) {
        return (
            <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
                <CircularProgress />
            </Box>
        );
    }

    if (error && !plan) {
        return (
            <Box sx={{ p: 3 }}>
                <Alert severity="error">{error}</Alert>
                <Button sx={{ mt: 2 }} startIcon={<ArrowBack />} onClick={() => navigate('/lesson-plans')}>
                    Back to Plans
                </Button>
            </Box>
        );
    }

    return (
        <Box sx={{ p: 3, maxWidth: 860, mx: 'auto' }}>
            {/* Header */}
            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
                <Button size="small" startIcon={<ArrowBack />} onClick={() => navigate('/lesson-plans')}>
                    Lesson Plans
                </Button>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    {saved && <Typography variant="caption" color="success.main">Saved</Typography>}
                    <Button
                        variant="contained"
                        size="small"
                        startIcon={saving ? <CircularProgress size={14} /> : <Save />}
                        onClick={() => save()}
                        disabled={saving}
                    >
                        Save
                    </Button>
                </Box>
            </Box>

            {error && (
                <Alert severity="error" onClose={() => setError(null)} sx={{ mb: 2 }}>{error}</Alert>
            )}

            {/* Title row */}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2.5 }}>
                <TextField
                    value={title}
                    onChange={e => { setTitle(e.target.value); scheduleAutoSave(); }}
                    variant="standard"
                    fullWidth
                    inputProps={{ style: { fontSize: '1.5rem', fontWeight: 700 } }}
                    placeholder="Lesson title…"
                />
                <SuggestButton
                    onClick={() => suggest('title')}
                    loading={suggestingField === 'title'}
                />
            </Box>

            {/* Metadata row */}
            <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap', mb: 3, alignItems: 'center' }}>
                <TextField
                    label="Subject"
                    value={subject}
                    onChange={e => { setSubject(e.target.value); scheduleAutoSave(); }}
                    size="small"
                    sx={{ width: 200 }}
                />
                <TextField
                    label="Year group"
                    value={yearGroup}
                    onChange={e => { setYearGroup(e.target.value); scheduleAutoSave(); }}
                    size="small"
                    sx={{ width: 120 }}
                />
                <TextField
                    label="Duration (min)"
                    value={duration}
                    onChange={e => { setDuration(e.target.value); scheduleAutoSave(); }}
                    size="small"
                    type="number"
                    inputProps={{ min: 1, max: 300 }}
                    sx={{ width: 140 }}
                />
                <FormControlLabel
                    control={
                        <Switch
                            size="small"
                            checked={isPublic}
                            onChange={e => { setIsPublic(e.target.checked); scheduleAutoSave(); }}
                        />
                    }
                    label={<Typography variant="caption">Public</Typography>}
                    sx={{ ml: 0.5 }}
                />
            </Box>

            {/* Context notes */}
            <Box sx={{ mb: 3 }}>
                <Typography variant="subtitle2" fontWeight={600} sx={{ mb: 0.75 }}>
                    Context / notes
                </Typography>
                <TextField
                    value={contextNotes}
                    onChange={e => { setContextNotes(e.target.value); scheduleAutoSave(); }}
                    multiline
                    minRows={2}
                    fullWidth
                    size="small"
                    placeholder="Class context, prior knowledge, SEN considerations, links to curriculum…"
                />
            </Box>

            <Divider sx={{ mb: 3 }} />

            {/* Objectives */}
            <Box sx={{ mb: 3 }}>
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.25 }}>
                    <Typography variant="subtitle1" fontWeight={700}>
                        Learning objectives
                    </Typography>
                    <Box sx={{ display: 'flex', gap: 0.5 }}>
                        <SuggestButton
                            onClick={() => suggest('objectives')}
                            loading={suggestingField === 'objectives'}
                        />
                        <Tooltip title="Add objective">
                            <IconButton size="small" onClick={addObjective}>
                                <Add fontSize="small" />
                            </IconButton>
                        </Tooltip>
                    </Box>
                </Box>

                {objectives.length === 0 ? (
                    <Typography variant="body2" color="text.secondary" sx={{ py: 1.5, textAlign: 'center' }}>
                        No objectives yet — add one or use ✨ to suggest.
                    </Typography>
                ) : (
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                        {objectives.map((obj, idx) => (
                            <Paper key={obj.id} variant="outlined" sx={{ p: 1.25 }}>
                                <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                                    <DragIndicator sx={{ color: 'text.disabled', mt: 0.5, flexShrink: 0 }} fontSize="small" />
                                    <TextField
                                        value={obj.text}
                                        onChange={e => updateObjective(obj.id, { text: e.target.value })}
                                        fullWidth
                                        size="small"
                                        multiline
                                        placeholder={`Objective ${idx + 1}…`}
                                        variant="standard"
                                    />
                                    <FormControl size="small" sx={{ minWidth: 120, flexShrink: 0 }}>
                                        <Select
                                            value={obj.bloom_level || ''}
                                            onChange={e => updateObjective(obj.id, { bloom_level: e.target.value || undefined })}
                                            displayEmpty
                                            variant="standard"
                                            renderValue={v => v ? (
                                                <Chip
                                                    label={v as string}
                                                    size="small"
                                                    sx={{ height: 18, fontSize: '0.65rem', bgcolor: BLOOM_COLORS[v as string] || 'grey.200' }}
                                                />
                                            ) : <Typography variant="caption" color="text.disabled">Bloom level</Typography>}
                                        >
                                            <MenuItem value=""><em>None</em></MenuItem>
                                            {BLOOM_LEVELS.map(l => (
                                                <MenuItem key={l} value={l}>
                                                    <Chip
                                                        label={l}
                                                        size="small"
                                                        sx={{ height: 18, fontSize: '0.65rem', bgcolor: BLOOM_COLORS[l] || 'grey.200' }}
                                                    />
                                                </MenuItem>
                                            ))}
                                        </Select>
                                    </FormControl>
                                    <Tooltip title="Remove">
                                        <IconButton size="small" color="error" onClick={() => removeObjective(obj.id)} sx={{ flexShrink: 0, p: 0.25 }}>
                                            <Delete fontSize="small" />
                                        </IconButton>
                                    </Tooltip>
                                </Box>
                            </Paper>
                        ))}
                    </Box>
                )}
            </Box>

            <Divider sx={{ mb: 3 }} />

            {/* Activities */}
            <Box sx={{ mb: 4 }}>
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.25 }}>
                    <Typography variant="subtitle1" fontWeight={700}>
                        Activities
                    </Typography>
                    <Tooltip title="Add activity">
                        <IconButton size="small" onClick={addActivity}>
                            <Add fontSize="small" />
                        </IconButton>
                    </Tooltip>
                </Box>

                {activities.length === 0 ? (
                    <Typography variant="body2" color="text.secondary" sx={{ py: 1.5, textAlign: 'center' }}>
                        No activities yet — add one to structure your lesson.
                    </Typography>
                ) : (
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                        {activities.map((act, idx) => (
                            <Paper key={act.id} variant="outlined" sx={{ p: 1.5 }}>
                                {/* Activity header */}
                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
                                    <DragIndicator sx={{ color: 'text.disabled', flexShrink: 0 }} fontSize="small" />

                                    {/* Section selector */}
                                    <TextField
                                        value={act.section}
                                        onChange={e => updateActivity(act.id, { section: e.target.value })}
                                        size="small"
                                        label="Section"
                                        sx={{ width: 140, flexShrink: 0 }}
                                        select={false}
                                        inputProps={{ list: `section-suggestions-${act.id}` }}
                                        placeholder="Starter / Main…"
                                    />
                                    <datalist id={`section-suggestions-${act.id}`}>
                                        {SECTION_SUGGESTIONS.map(s => <option key={s} value={s} />)}
                                    </datalist>

                                    <TextField
                                        value={act.title}
                                        onChange={e => updateActivity(act.id, { title: e.target.value })}
                                        size="small"
                                        label="Activity title"
                                        fullWidth
                                        placeholder={`Activity ${idx + 1}…`}
                                    />
                                    <TextField
                                        value={act.duration_minutes?.toString() || ''}
                                        onChange={e => updateActivity(act.id, { duration_minutes: e.target.value ? parseInt(e.target.value, 10) : undefined })}
                                        size="small"
                                        label="Min"
                                        type="number"
                                        inputProps={{ min: 1 }}
                                        sx={{ width: 72, flexShrink: 0 }}
                                    />
                                    <Tooltip title="Remove">
                                        <IconButton size="small" color="error" onClick={() => removeActivity(act.id)} sx={{ flexShrink: 0, p: 0.25 }}>
                                            <Delete fontSize="small" />
                                        </IconButton>
                                    </Tooltip>
                                </Box>

                                {/* Description */}
                                <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, pl: 3.5 }}>
                                    <TextField
                                        value={act.description}
                                        onChange={e => updateActivity(act.id, { description: e.target.value })}
                                        size="small"
                                        multiline
                                        minRows={2}
                                        fullWidth
                                        placeholder="Describe what the teacher and pupils do…"
                                    />
                                    <SuggestButton
                                        onClick={() => suggest('activity_description', act.id)}
                                        loading={suggestingField === `activity_description_${act.id}`}
                                    />
                                </Box>
                            </Paper>
                        ))}
                    </Box>
                )}
            </Box>
        </Box>
    );
};

export default LessonPlanDetailPage;