import { useEffect, useState } from 'react';
import { useAuthServiceContext } from '../../../services/AuthService.tsx';
import { useOrganizationServiceContext } from '../../../services/OrganizationService.tsx';
import { Alert, AlertDescription } from '../../../components/ui/alert.tsx';
import PracticeAddressPanel from '../../../components/PracticeAddress/PracticeAddressPanel';
import '../../../components/PracticeAddress/PracticeAddress.css';
import { relayServerFailure } from '../../../utils/fetchFailureMessage';
import { PracticeAddressHeld } from '../../../components/PracticeAddress/PracticeAddressHeld';

// The practice's permanent web address: read-only once held, and claimed through the same
// review-and-confirm flow as onboarding when it is not.
const PracticeAddressSection = () => {
    const { currentOrganization } = useAuthServiceContext();
    const { fetchMyPracticeHostname } = useOrganizationServiceContext();

    const [held, setHeld] = useState<string>();
    const [loading, setLoading] = useState(true);
    const [readError, setReadError] = useState<string>();

    useEffect(() => {
        let current = true;
        setHeld(undefined);
        setReadError(undefined);
        setLoading(true);
        void (async () => {
            try {
                const mine = await fetchMyPracticeHostname();
                if (current && mine.claimed) setHeld(mine.hostname ?? mine.label);
            } catch (err) {
                if (current) setReadError(relayServerFailure(err, "This practice's web address could not be read."));
            } finally {
                if (current) setLoading(false);
            }
        })();
        return () => {
            current = false;
        };
    }, [currentOrganization?.id, fetchMyPracticeHostname]);

    return (
        <div className="space-y-3">
            {!held && <h3 className="ak-section-title">Your practice's web address</h3>}
            {loading ? (
                <div className="text-sm text-muted-foreground">Checking this practice's address…</div>
            ) : readError ? (
                // A failed read is not a practice without an address; offering the form could invite a second claim.
                <Alert variant="destructive">
                    <AlertDescription>{readError}</AlertDescription>
                </Alert>
            ) : held ? (
                // The deck's read-only field: label, the permanent value, then the hint - never a
                // section heading over plain text (admin-v2.html "Phone · saved address is read-only").
                <PracticeAddressHeld hostname={held} />
            ) : (
                <PracticeAddressPanel onSaved={setHeld} />
            )}
        </div>
    );
};

export default PracticeAddressSection;