import { CheckCircle2, AlertTriangle, XCircle } from 'lucide-react';
import { useMemo } from 'react';

interface AnalyzerProps {
    focusKeyword: string;
    title: string;
    description: string;
    content: string;
}

export default function ContentAnalyzer({ focusKeyword, title, description, content }: AnalyzerProps) {
    const checks = useMemo(() => {
        const keyword = focusKeyword?.toLowerCase().trim();
        const plainContent = content?.replace(/<[^>]*>?/gm, '').toLowerCase() || '';
        const lowerTitle = title?.toLowerCase() || '';
        const lowerDesc = description?.toLowerCase() || '';

        const results = [];

        // 1. Focus Keyword presence
        if (!keyword) {
            return [{ status: 'error', text: 'No focus keyword set.' }];
        } else {
            results.push({ status: 'success', text: 'Focus keyword is set.' });
        }

        // 2. Keyword in Title
        if (lowerTitle.includes(keyword)) {
            results.push({ status: 'success', text: 'Focus keyword found in SEO title.' });
        } else {
            results.push({ status: 'error', text: 'Focus keyword not found in SEO title.' });
        }

        // 3. Keyword in Description
        if (lowerDesc.includes(keyword)) {
            results.push({ status: 'success', text: 'Focus keyword found in meta description.' });
        } else {
            results.push({ status: 'warning', text: 'Focus keyword not found in meta description.' });
        }

        // 4. Keyword in Content
        const count = plainContent.split(keyword).length - 1;
        if (count === 0) {
            results.push({ status: 'error', text: 'Focus keyword not found in content.' });
        } else if (count > 0 && count < 3) {
            results.push({ status: 'warning', text: `Focus keyword found ${count} times. Consider adding more.` });
        } else {
            results.push({ status: 'success', text: `Focus keyword found ${count} times.` });
        }

        // 5. Title Length
        if (title.length === 0) {
            results.push({ status: 'error', text: 'Please add an SEO title.' });
        } else if (title.length > 60) {
            results.push({ status: 'warning', text: 'SEO title is too long (over 60 chars).' });
        } else {
            results.push({ status: 'success', text: 'SEO title length is good.' });
        }

        // 6. Description Length
        if (description.length === 0) {
            results.push({ status: 'error', text: 'Please add a meta description.' });
        } else if (description.length > 160) {
            results.push({ status: 'warning', text: 'Meta description is too long (over 160 chars).' });
        } else if (description.length < 120) {
            results.push({ status: 'warning', text: 'Meta description is too short (under 120 chars).' });
        } else {
            results.push({ status: 'success', text: 'Meta description length is good.' });
        }

        return results;
    }, [focusKeyword, title, description, content]);

    return (
        <div className="bg-white border border-[#E8E6DF] rounded-2xl p-6 shadow-sm">
            <h4 className="font-semibold text-sm mb-4">SEO Analysis</h4>
            <div className="space-y-3">
                {checks.map((check, idx) => (
                    <div key={idx} className="flex items-start gap-2">
                        {check.status === 'success' && <CheckCircle2 className="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />}
                        {check.status === 'warning' && <AlertTriangle className="h-4 w-4 text-amber-500 mt-0.5 shrink-0" />}
                        {check.status === 'error' && <XCircle className="h-4 w-4 text-red-500 mt-0.5 shrink-0" />}
                        <span className="text-sm text-muted-foreground leading-tight">{check.text}</span>
                    </div>
                ))}
            </div>
        </div>
    );
}