import React, {useEffect, useState} from 'react';
import {usePage} from '@inertiajs/react';
import {makeDeleteRequest, makeGetRequest, makePostRequest} from '@/lib/request';
import {notify} from '@/lib/notify';
import AppPageHeader from '@/components/AppPageHeader';
import MainLayout from '@/layouts/MainLayout';
import Create from '@/Pages/Matters/Create';

const css = `
  @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

  .mat {
    --white:      #ffffff;
    --border:     #e5e7eb;
    --border-md:  #d1d5db;
    --text:       #111827;
    --text-sm:    #374151;
    --muted:      #6b7280;
    --accent:     #2563eb;
    --accent-lt:  #eff6ff;
    --accent-mid: #bfdbfe;
    --green:      #16a34a;
    --green-lt:   #f0fdf4;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --radius:     5px;
    font-family: 'Geist', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
  }

  .mat-wrap {

  }

  /* ── Profile header card ── */
  .mat-profile-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .mat-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--accent-lt);
    border: 2px solid var(--accent-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .mat-profile-info { flex: 1; min-width: 0; }
  .mat-profile-name {
    font-size: 1.35rem; font-weight: 600;
    color: var(--text); letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
  }
  .mat-profile-meta {
    display: flex; flex-wrap: wrap; gap: 1.1rem;
  }
  .mat-meta-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.81rem; color: var(--muted);
  }
  .mat-badge {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 4px;
    font-size: 0.5rem; font-weight: 500;
  }
  .mat-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
  .mat-profile-actions { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: center; }
  .mat-btn {
    padding: 7px 15px; border-radius: 7px;
    font-size: 0.8rem; font-weight: 500; font-family: inherit;
    cursor: pointer; border: 1px solid var(--border-md);
    background: var(--white); color: var(--text-sm);
    transition: background 0.12s, border-color 0.12s;
  }
  .mat-btn:hover { background: var(--bg); border-color: #9ca3af; }
  .mat-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .mat-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

  /* ── Stats row ── */
  .mat-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
  }
  .mat-stat {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 1.1rem 1.25rem;
  }
  .mat-stat-label {
    font-size: 0.7rem; color: var(--muted); font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.35rem;
  }
  .mat-stat-value {
    font-size: 1.8rem; font-weight: 600;
    color: var(--text); letter-spacing: -0.03em; line-height: 1;
  }
  .mat-stat-sub { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }

  /* ── Body: two columns ── */
  .mat-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
  }
  @media (max-width: 900px) {
    .mat-stats { grid-template-columns: repeat(2, 1fr); }
    .mat-body  { grid-template-columns: 1fr; }
  }

  /* ── Shared card ── */
  .mat-card {
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .mat-card-header {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .mat-card-title { font-size: 0.84rem; font-weight: 600; color: var(--text); }
  .mat-card-count {
    font-size: 0.7rem; color: var(--muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 1px 9px;
  }
  .mat-card-body { padding: 1.25rem; }

  /* ── Communications ── */
  .mat-comm-item {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
  }
  .mat-comm-item:first-child { padding-top: 0; }
  .mat-comm-item:last-child  { border-bottom: none; padding-bottom: 0; }
  .mat-comm-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--accent-lt); border: 1px solid var(--accent-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; color: var(--accent); flex-shrink: 0;
  }
  .mat-comm-subject {
    font-size: 0.83rem; font-weight: 500; color: var(--text);
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .mat-comm-time { font-size: 0.69rem; color: var(--muted); font-family: 'Geist Mono', monospace; }

  /* ── Timeline ── */
  .mat-timeline { display: flex; flex-direction: column; }
  .mat-tl-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 0.65rem;
    position: relative;
  }
  /* connecting line */
  .mat-tl-item:not(:last-child) .mat-tl-gutter::after {
    content: '';
    position: absolute;
    left: 13px; top: 22px; bottom: 0;
    width: 1px;
    background: var(--border);
  }
  .mat-tl-gutter {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 1px;
  }
  .mat-tl-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--white);
    z-index: 1; margin-top: 5px;
    box-shadow: 0 0 0 3px var(--accent-lt);
    transition: background 0.14s;
    flex-shrink: 0;
  }
  .mat-tl-item:hover .mat-tl-dot { background: var(--accent); }
  .mat-tl-content { padding-bottom: 1.25rem; }
  .mat-tl-item:last-child .mat-tl-content { padding-bottom: 0; }
  .mat-tl-desc { font-size: 0.81rem; color: var(--text-sm); line-height: 1.5; }
  .mat-tl-time {
    font-size: 0.67rem; color: var(--muted);
    font-family: 'Geist Mono', monospace;
    margin-top: 3px;
  }

  /* ── Empty & loading ── */
  .mat-empty {
    text-align: center; padding: 2.25rem 1rem;
    color: var(--muted); font-size: 0.81rem;
  }
  .mat-empty-icon { font-size: 1.4rem; margin-bottom: 0.4rem; opacity: 0.35; }
  .mat-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 5rem; color: var(--muted); font-size: 0.85rem;
  }
  .mat-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: mat-spin 0.65s linear infinite;
  }
  @keyframes mat-spin { to { transform: rotate(360deg); } }
`;

function fmt(d: string) {
    try {
        return new Date(d).toLocaleString();
    } catch {
        return d;
    }
}

function memberName(tm: any) {
    return tm.user?.name;
}

function initials(name = '') {
    return String(name || '').split(' ').slice(0, 2).map((w: string) => (w || '')[0] ?? '').join('').toUpperCase() || '?';
}

export default function Show(): JSX.Element | null {
    const {auth, id} = usePage<{ auth: { user: any }, id: string }>().props;
    const token = auth?.user?.token ?? auth?.user?.api_token ?? undefined;

    const [matter, setMatter] = useState<any | null>(null);
    const [activities, setActivities] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [editOpen, setEditOpen] = useState<boolean>(false);

    // assign team modal state
    const expectedRoles = ['Lead Attorney', 'Associate', 'Paralegal', 'Co-Counsel', 'Legal Assistant'];
    const [assignOpen, setAssignOpen] = useState<boolean>(false);
    const [userQuery, setUserQuery] = useState<string>('');
    const [userLoading, setUserLoading] = useState<boolean>(false);
    const [filteredUsers, setFilteredUsers] = useState<any[]>([]);
    const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
    const [assignRole, setAssignRole] = useState<string>(expectedRoles[1] || 'Associate');
    const [assignSubmitting, setAssignSubmitting] = useState<boolean>(false);

    const [opposingOpen, setOpposingOpen] = useState<boolean>(false);
    const [opposingName, setOpposingName] = useState<string>('');
    const [opposingSubmitting, setOpposingSubmitting] = useState<boolean>(false);

    useEffect(() => {
        if (!id) return;
        fetchAll();
    }, [id, token]);

    // server-side user search (debounced)
    useEffect(() => {
        let mounted = true;
        const q = userQuery.trim();
        const timer = setTimeout(async () => {
            try {
                setUserLoading(true);
                const params = new URLSearchParams();
                params.append('per_page', '50');
                if (q) params.append('search', q);
                const url = `/api/users?${params.toString()}`;
                const res = await makeGetRequest(url, {token});
                const payload = res.data?.result ?? res.data ?? {};
                const list = payload?.data ?? payload ?? [];
                if (mounted) setFilteredUsers(Array.isArray(list) ? list : []);
            } catch (e) {
                if (mounted) setFilteredUsers([]);
            } finally {
                if (mounted) setUserLoading(false);
            }
        }, 300);

        return () => {
            mounted = false;
            clearTimeout(timer);
        };
    }, [userQuery, token]);

    async function fetchAll() {
        setLoading(true);
        try {
            const [mRes, aRes] = await Promise.all([
                makeGetRequest(`/api/matters/${id}`, {token}),
                makeGetRequest(`/api/matters/${id}/activity`, {token}),
            ]);

            const raw = mRes.data?.result ?? mRes.data ?? {};
            const normalized = {
                ...raw,
                teamMembers: raw.team_members ?? raw.teamMembers ?? [],
                opposingParties: raw.opposing_parties ?? raw.opposingParties ?? [],
                documents: raw.documents ?? [],
                communications: raw.communications ?? [],
                client: raw.client ?? raw.client_profile ?? null,
                attorney: raw.attorney ?? null,
            };

            setMatter(normalized);

            const ap = aRes.data?.result ?? aRes.data ?? [];
            setActivities(Array.isArray(ap) ? ap : []);
        } catch (e) {
            console.warn('Failed to fetch matter show data', e);
        } finally {
            setLoading(false);
        }
    }

    if (!id) return null;

    return (
        <MainLayout>
            <style>{css}</style>
            <AppPageHeader title="Matter" subtitle={matter?.reference_number ?? 'Matter details'}/>

            <div className="mat">
                <div className="mat-wrap">
                    <div className="mat-profile-card">
                        <div className="mat-avatar">{initials(matter?.client?.name ?? matter?.reference_number)}</div>
                        <div className="mat-profile-info">
                            <h1 className="mat-profile-name">
                                {matter?.reference_number ?? '—'}
                                <span className="mat-badge">
                                    <span className="mat-badge-dot"/>{matter?.status.toUpperCase()}
                                </span>
                            </h1>
                            <div style={{display: 'flex', gap: '0.75rem', marginTop: 6}}>
                                {matter?.client?.name &&
                                    <div style={{color: '#6b7280'}}>
                                        <i className="ti ti-user"></i>
                                        {matter.client.name}
                                    </div>}
                                {matter?.attorney?.name &&
                                    <div style={{color: '#6b7280'}}>
                                        <i className="ti ti-scale"></i>
                                        {matter.attorney.name}
                                    </div>
                                }
                            </div>
                        </div>
                        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.5rem'}}>
                            <div>
                                <button onClick={() => setEditOpen(true)} className="px-3 py-1 border rounded">
                                    <i className="ri ri-edit-line mr-2"></i> Edit
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="mat-body">

                        <div className="mat-card" style={{marginBottom: '1rem'}}>
                            <div className="mat-card-header">
                                <div className="mat-card-title">
                                    <span>Team members</span>
                                </div>
                                <div className="mat-card-count" style={{border: '0px'}}>
                                    <button onClick={() => {
                                        setAssignOpen(true);
                                        setSelectedUserId(null);
                                        setUserQuery('');
                                        setFilteredUsers([]);
                                        setAssignRole(expectedRoles[1] || 'Associate');
                                    }} className="px-3 py-1 border rounded">
                                        <i className="ti ti-plus"></i> Assign team member
                                    </button>
                                </div>
                            </div>
                            <div className="mat-card-body">
                                {(!matter?.teamMembers || matter.teamMembers.length === 0) ? (
                                    <div className="text-sm text-gray-500">No team members.</div>
                                ) : (
                                    <ul className="space-y-2">
                                        {matter.teamMembers.map((tm: any) => (
                                            <li key={tm.id ?? tm.team_member_id} style={{
                                                padding: 8,
                                                border: '1px solid #e5e7eb',
                                                borderRadius: 6,
                                                display: 'flex',
                                                justifyContent: 'space-between',
                                                alignItems: 'center'
                                            }}>
                                                <div>
                                                    <div style={{fontWeight: 600}}>{memberName(tm)}</div>
                                                    <div style={{fontSize: 12, color: '#6b7280'}}>{tm.role}</div>
                                                </div>
                                                <div>
                                                    <button className="px-2 py-1 bg-danger" onClick={async () => {
                                                        if (!confirm('Remove this team member?')) return;
                                                        try {
                                                            const uid = tm.team_member_id ?? tm.team_member?.id ?? tm.id;
                                                            await makeDeleteRequest(`/api/matters/${id}/team-members/${uid}`, {token});
                                                            notify.toastSuccessMessage('Team member removed');
                                                            fetchAll();
                                                        } catch (e: any) {
                                                            notify.toastErrorMessage(e?.response?.data?.message || 'Failed to remove team member');
                                                        }
                                                    }}><i className="ti ti-trash text-white"></i>
                                                    </button>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </div>

                            <div className="mat-card-header">
                                <div className="mat-card-title">Opposing parties</div>
                                <div className="mat-card-count" style={{border: '0px'}}>
                                    <button onClick={() => {
                                        setOpposingOpen(true);
                                        setOpposingName('');
                                    }} className="px-3 py-1 border rounded">
                                        <i className="ti ti-plus"></i> Add opposing party
                                    </button>
                                </div>
                            </div>
                            <div className="mat-card-body">
                                {(!matter?.opposingParties || matter.opposingParties.length === 0) ? (
                                    <div className="text-sm text-gray-500">No opposing parties.</div>
                                ) : (
                                    <ul className="space-y-2">
                                        {matter.opposingParties.map((op: any) => (
                                            <li key={op.id} style={{
                                                padding: 8,
                                                border: '1px solid #e5e7eb',
                                                borderRadius: 6,
                                                display: 'flex',
                                                justifyContent: 'space-between',
                                                alignItems: 'center'
                                            }}>
                                                <div style={{fontWeight: 600}}>{op.opposing_party}</div>
                                                <div>
                                                    <button onClick={async () => {
                                                        if (!confirm('Remove this opposing party?')) return;
                                                        try {
                                                            await makeDeleteRequest(`/api/matters/${id}/opposing-parties/${op.id}`, {token});
                                                            notify.toastSuccessMessage('Opposing party removed');
                                                            fetchAll();
                                                        } catch (e: any) {
                                                            notify.toastErrorMessage(e?.response?.data?.message || 'Failed to remove opposing party');
                                                        }
                                                    }} className="px-2 py-1 bg-danger"><i
                                                        className="ti ti-trash text-white"></i>
                                                    </button>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                )}

                            </div>
                        </div>


                        <div className="mat-card">
                            <div className="mat-card-header">
                                <span className="mat-card-title">Activity Log</span>
                                <span className="mat-card-count">{activities.length}</span>
                            </div>
                            <div className="mat-card-body">
                                {activities.length === 0 ? (
                                    <div className="mat-empty">
                                        <div className="mat-empty-icon">◎</div>
                                        No recent activity.</div>
                                ) : (
                                    <div className="mat-timeline">
                                        {activities.map((a: any) => (
                                            <div key={a.id} className="mat-tl-item">
                                                <div className="mat-tl-gutter">
                                                    <div className="mat-tl-dot"/>
                                                </div>
                                                <div>
                                                    <div className="mat-tl-desc">{a.description}</div>
                                                    {a.changes && a.changes.length > 0 && (
                                                        <div style={{marginTop: 6}}>
                                                            {a.changes.map((chg: any, idx: number) => (
                                                                <div key={idx}
                                                                     style={{fontSize: 12, color: '#6b7280'}}>
                                                                        <span
                                                                            style={{fontWeight: 600}}>{chg.field}</span>:&nbsp;
                                                                    <span style={{
                                                                        textDecoration: 'line-through',
                                                                        color: '#dc2626'
                                                                    }}>{String(chg.before ?? '—')}</span>
                                                                    &nbsp;→&nbsp;
                                                                    <span style={{
                                                                        fontWeight: 600,
                                                                        color: '#16a34a'
                                                                    }}>{String(chg.after ?? '—')}</span>
                                                                </div>
                                                            ))}
                                                        </div>
                                                    )}
                                                    <div className="mat-tl-time" style={{
                                                        marginTop: 6,
                                                        fontSize: 12,
                                                        color: '#6b7280'
                                                    }}>{fmt(a.created_at)}</div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </div>

                    </div>
                </div>

                <Create open={editOpen} onClose={() => setEditOpen(false)} matter={matter ?? undefined}
                        mode={matter ? 'edit' : 'create'}/>

                {assignOpen && (
                    <div role="dialog" aria-modal="true"
                         className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
                        <div className="bg-white rounded-xl shadow-xl w-full max-w-md max-h-[80vh] overflow-auto">
                            <div className="flex items-center justify-between px-5 py-4 border-b">
                                <h3 className="text-base font-semibold">Assign team member</h3>
                                <button type="button" onClick={() => setAssignOpen(false)} aria-label="Close">✕</button>
                            </div>
                            <div className="px-5 py-4">
                                <label className="ti-form-label">Search user</label>
                                <input type="text" className="ti-form-input" placeholder="Search users by name or email"
                                       value={userQuery} onChange={e => setUserQuery(e.target.value)}/>
                                {userLoading && <div className="text-xs text-gray-500 mt-2">Loading...</div>}
                                {filteredUsers.length > 0 && (
                                    <ul className="mt-2 max-h-40 overflow-auto border rounded">
                                        {filteredUsers.map(u => (
                                            <li key={u.id}
                                                className={`p-2 hover:bg-gray-100 cursor-pointer ${selectedUserId === u.id ? 'bg-indigo-50' : ''}`}
                                                onClick={() => setSelectedUserId(u.id)}>
                                                <div style={{fontWeight: 600}}>{u.name}</div>
                                                <div style={{fontSize: 12, color: '#6b7280'}}>{u.email}</div>
                                            </li>
                                        ))}
                                    </ul>
                                )}

                                <div style={{marginTop: 8}}>
                                    <label className="ti-form-label">Role</label>
                                    <select className="ti-form-input" value={assignRole}
                                            onChange={e => setAssignRole(e.target.value)}>
                                        {expectedRoles.map(r => <option key={r} value={r}>{r}</option>)}
                                    </select>
                                </div>
                            </div>
                            <div className="flex items-center justify-end gap-2 px-5 py-4 border-t">
                                <button onClick={() => setAssignOpen(false)} className="px-4 py-2">Cancel</button>
                                <button onClick={async () => {
                                    if (!selectedUserId) {
                                        alert('Select a user to assign');
                                        return;
                                    }
                                    setAssignSubmitting(true);
                                    try {
                                        await makePostRequest(`/api/matters/${id}/team-members`, {
                                            user_id: selectedUserId,
                                            role: assignRole
                                        }, {token});
                                        notify.toastSuccessMessage('Team member assigned');
                                        setAssignOpen(false);
                                        fetchAll();
                                    } catch (e: any) {
                                        notify.toastErrorMessage(e?.response?.data?.message || 'Failed to assign team member');
                                    } finally {
                                        setAssignSubmitting(false);
                                    }
                                }}
                                        className="px-4 py-2 bg-indigo-600 text-white rounded">{assignSubmitting ? 'Assigning...' : 'Assign'}</button>
                            </div>
                        </div>
                    </div>
                )}

                {opposingOpen && (
                    <div role="dialog" aria-modal="true"
                         className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
                        <div className="bg-white rounded-xl shadow-xl w-full max-w-md max-h-[80vh] overflow-auto">
                            <div className="flex items-center justify-between px-5 py-4 border-b">
                                <h3 className="text-base font-semibold">Add opposing party</h3>
                                <button type="button" onClick={() => setOpposingOpen(false)} aria-label="Close">✕
                                </button>
                            </div>
                            <div className="px-5 py-4">
                                <label className="ti-form-label">Opposing party name</label>
                                <input type="text" className="ti-form-input" placeholder="Enter opposing party name"
                                       value={opposingName} onChange={e => setOpposingName(e.target.value)}/>
                            </div>
                            <div className="flex items-center justify-end gap-2 px-5 py-4 border-t">
                                <button onClick={() => setOpposingOpen(false)} className="px-4 py-2">Cancel</button>
                                <button onClick={async () => {
                                    if (!opposingName.trim()) {
                                        alert('Enter opposing party name');
                                        return;
                                    }
                                    setOpposingSubmitting(true);
                                    try {
                                        await makePostRequest(`/api/matters/${id}/opposing-parties`, {opposing_party: opposingName.trim()}, {token});
                                        notify.toastSuccessMessage('Opposing party added');
                                        setOpposingOpen(false);
                                        fetchAll();
                                    } catch (e: any) {
                                        notify.toastErrorMessage(e?.response?.data?.message || 'Failed to add opposing party');
                                    } finally {
                                        setOpposingSubmitting(false);
                                    }
                                }}
                                        className="px-4 py-2 bg-indigo-600 text-white rounded">{opposingSubmitting ? 'Adding...' : 'Add'}</button>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </MainLayout>
    );
}