import React, { useState } from 'react';
import { Phone, MapPin, Loader2, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api';
import { cn } from '@/lib/utils';

/**
 * "Call" / "Visit" icon buttons for a contact. Clicking one opens an inline textarea to note
 * what was discussed; saving POSTs to /api/contacts/{contactId}/activities. Self-contained —
 * manages its own open/saving state, calls `onLogged` after a successful save so the parent can
 * refresh whatever activity timeline is showing.
 */
export default function ContactActivityLogger({ contactId, onLogged, className, iconSize = 'h-3.5 w-3.5' }) {
    const [openType, setOpenType] = useState(null); // 'call' | 'visit' | null
    const [notes, setNotes] = useState('');
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');

    if (!contactId) return null;

    const toggle = (type) => (e) => {
        e.stopPropagation();
        setError('');
        setOpenType((cur) => (cur === type ? null : type));
        setNotes('');
    };

    const cancel = (e) => {
        e.stopPropagation();
        setOpenType(null);
        setNotes('');
        setError('');
    };

    const save = async (e) => {
        e.stopPropagation();
        if (!openType) return;
        setSaving(true);
        setError('');
        try {
            const res = await apiFetch(`/api/contacts/${contactId}/activities`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ activity_type: openType, notes: notes.trim() }),
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
                setError(typeof data.detail === 'string' ? data.detail : 'Could not save activity');
                return;
            }
            setOpenType(null);
            setNotes('');
            onLogged && onLogged(data);
        } catch (err) {
            console.error(err);
            setError('Network error');
        } finally {
            setSaving(false);
        }
    };

    return (
        <div className={className} onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-1">
                <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className={cn(
                        'h-7 w-7 text-slate-500 hover:text-emerald-700 hover:bg-emerald-50',
                        openType === 'call' && 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'
                    )}
                    title="Log a call"
                    aria-label="Log a call"
                    onClick={toggle('call')}
                >
                    <Phone className={iconSize} aria-hidden />
                </Button>
                <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className={cn(
                        'h-7 w-7 text-slate-500 hover:text-violet-700 hover:bg-violet-50',
                        openType === 'visit' && 'bg-violet-100 text-violet-800 hover:bg-violet-100'
                    )}
                    title="Log a visit"
                    aria-label="Log a visit"
                    onClick={toggle('visit')}
                >
                    <MapPin className={iconSize} aria-hidden />
                </Button>
            </div>

            {openType ? (
                <div className="mt-2 w-72 rounded-lg border border-slate-200 bg-white p-2 shadow-sm">
                    <div className="mb-1 flex items-center justify-between">
                        <span className="text-xs font-medium text-slate-600">
                            {openType === 'call' ? 'What did you discuss on the call?' : 'What did you discuss on the visit?'}
                        </span>
                        <button
                            type="button"
                            className="text-slate-400 hover:text-slate-600"
                            onClick={cancel}
                            aria-label="Cancel"
                        >
                            <X className="h-3.5 w-3.5" aria-hidden />
                        </button>
                    </div>
                    <textarea
                        autoFocus
                        rows={2}
                        className="w-full resize-none rounded-md border border-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-violet-400"
                        placeholder="Notes (optional)"
                        value={notes}
                        onChange={(e) => setNotes(e.target.value)}
                        disabled={saving}
                        onClick={(e) => e.stopPropagation()}
                    />
                    {error ? <p className="mt-1 text-xs text-red-600">{error}</p> : null}
                    <div className="mt-1.5 flex justify-end gap-1.5">
                        <Button type="button" size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={cancel} disabled={saving}>
                            Cancel
                        </Button>
                        <Button type="button" size="sm" className="h-7 px-2 text-xs" onClick={save} disabled={saving}>
                            {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden /> : 'Save'}
                        </Button>
                    </div>
                </div>
            ) : null}
        </div>
    );
}