// This is a Server Component
import React from "react";
import db from "@/lib/db";
import {
  Card,
  CardHeader,
  CardDescription,
  CardContent,
  CardFooter,
  CardTitle,
} from "@/components/ui/card";
import { NLP } from "sortug-ai";
import {
  BookOpen,
  Volume2,
  Link as LinkIcon,
  ChevronDown,
  ChevronUp,
  Search,
  Info,
  MessageSquareQuote,
  Tags,
  ListTree,
  Lightbulb,
} from "lucide-react";
import {
  Example,
  SubSense,
  RelatedEntry,
  Sense,
  WordData,
} from "@/zoom/logic/types";

export default async function Wordd({
  word,
  lang,
}: {
  word: string;
  lang: string;
}) {
  const data = db.fetchWordBySpelling(word, "en");
  console.log({ data });

  if (!data) return <p>oh...</p>;
  return (
    <Card>
      <CardHeader>
        <CardTitle>
          <h1 className="text-xl">{word}</h1>
        </CardTitle>
        <CardDescription>
          <IpaDisplay ipaEntries={data.ipa} />
        </CardDescription>
      </CardHeader>
      <CardContent>
        {/* Senses */}
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">
          Meanings & Definitions
        </h2>
        {data.senses.map((sense, index) => (
          <SenseCard key={index} senseData={sense} senseNumber={index + 1} />
        ))}
      </CardContent>
      <CardFooter></CardFooter>
    </Card>
  );
  // return (
  //   <div className="p-6">
  //     <h3 className="mb-2 text-2xl font-bold">{word}</h3>
  //     <p className="mb-1 text-xl text-green-600">${word.}</p>
  //     <p className="text-gray-700">{word}</p>
  //     <p className="mt-4 text-xs text-gray-500">
  //       Content rendered on the server at: {new Date().toLocaleTimeString()}
  //     </p>
  //   </div>
  // );
}

// Helper component for IPA display
const IpaDisplay = ({
  ipaEntries,
}: {
  ipaEntries: Array<{ ipa: string; tags?: string[] }>;
}) => {
  if (!ipaEntries || ipaEntries.length === 0) return null;
  return (
    <div className="flex items-center space-x-2 flex-wrap">
      {ipaEntries.map((entry, index) => {
        const tags = entry.tags ? entry.tags : [];
        return (
          <span key={index} className="text-lg text-blue-600 font-serif">
            {entry.ipa}{" "}
            {tags.length > 0 && (
              <span className="text-xs text-gray-500">({tags.join(", ")})</span>
            )}
          </span>
        );
      })}
      <button
        className="p-1 text-blue-500 hover:text-blue-700 transition-colors"
        title="Pronounce"
        // onClick={() => {
        //   /* Pronunciation logic would be client-side or a server roundtrip for audio file. */ alert(
        //     "Pronunciation feature not implemented for server component.",
        //   );
        // }}
      >
        <Volume2 size={20} />
      </button>
    </div>
  );
};

// Component for displaying examples
const ExampleDisplay = ({ examples }: { examples: Example[] }) => {
  if (!examples || examples.length === 0) return null;
  return (
    <div className="mt-2">
      <h5 className="text-xs font-semibold text-gray-600 mb-1 flex items-center">
        <MessageSquareQuote size={14} className="mr-1 text-gray-500" />
        Examples:
      </h5>
      <ul className="list-disc list-inside pl-2 space-y-1">
        {examples.map((ex, idx) => (
          <li key={idx} className="text-xs text-gray-600">
            <span className="italic">"{ex.text}"</span>
            {ex.ref && (
              <span className="text-gray-400 text-xxs"> ({ex.ref})</span>
            )}
            {ex.type !== "quote" && (
              <span className="ml-1 text-xxs bg-sky-100 text-sky-700 px-1 rounded-sm">
                {ex.type}
              </span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

// Component for displaying related terms (synonyms, antonyms, etc.)
const RelatedTermsDisplay = ({
  terms,
  type,
}: {
  terms: RelatedEntry[] | undefined;
  type: string;
}) => {
  if (!terms || terms.length === 0) return null;
  return (
    <div className="mt-1">
      <span className="text-xs font-semibold text-gray-500 capitalize">
        {type}:{" "}
      </span>
      {terms.map((term, idx) => (
        <React.Fragment key={idx}>
          <a
            href={`/search?q=${encodeURIComponent(term.word)}`}
            className="text-xs text-blue-500 hover:text-blue-700 hover:underline"
          >
            {term.word}
          </a>
          {term.source && (
            <span className="text-xxs text-gray-400"> ({term.source})</span>
          )}
          {idx < terms.length - 1 && ", "}
        </React.Fragment>
      ))}
    </div>
  );
};

// Component for displaying a SubSense
const SubSenseDisplay = ({
  subSense,
  subSenseNumber,
}: {
  subSense: SubSense;
  subSenseNumber: number;
}) => {
  return (
    <div className="mb-3 pl-4 border-l-2 border-indigo-200">
      {subSense.glosses.map((gloss, glossIdx) => (
        <p key={glossIdx} className="text-gray-700 mb-1">
          <span className="font-semibold">
            {subSenseNumber}.{glossIdx + 1}
          </span>{" "}
          {gloss}
        </p>
      ))}
      {subSense.raw_glosses &&
        subSense.raw_glosses.length > 0 &&
        subSense.raw_glosses.join("") !== subSense.glosses.join("") && (
          <p className="text-xs text-gray-500 italic mb-1">
            (Raw: {subSense.raw_glosses.join("; ")})
          </p>
        )}

      {subSense.categories && subSense.categories.length > 0 && (
        <div className="mt-1 mb-2">
          <h5 className="text-xs font-semibold text-gray-600 mb-0.5 flex items-center">
            <ListTree size={14} className="mr-1 text-gray-500" />
            Categories:
          </h5>
          <div className="flex flex-wrap gap-1">
            {subSense.categories.map((cat, idx) => (
              <span
                key={idx}
                className="text-xxs bg-gray-100 text-gray-700 px-1.5 py-0.5 rounded-full"
              >
                {cat}
              </span>
            ))}
          </div>
        </div>
      )}

      <ExampleDisplay examples={subSense.examples || []} />
      <RelatedTermsDisplay terms={subSense.synonyms} type="Synonyms" />

      {subSense.tags && subSense.tags.length > 0 && (
        <div className="mt-2">
          <h5 className="text-xs font-semibold text-gray-600 mb-0.5 flex items-center">
            <Tags size={14} className="mr-1 text-gray-500" />
            Tags:
          </h5>
          <div className="flex flex-wrap gap-1">
            {subSense.tags.map((tag, idx) => (
              <span
                key={idx}
                className="text-xxs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded-full"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      )}

      {subSense.links && subSense.links.length > 0 && (
        <div className="mt-2">
          {subSense.links.map(([type, target], linkIdx) => (
            <a
              key={linkIdx}
              href={target} // Assuming target is a full URL or a path
              target="_blank"
              rel="noopener noreferrer"
              className="text-xs text-blue-500 hover:text-blue-700 hover:underline mr-2 inline-flex items-center"
            >
              <LinkIcon size={12} className="mr-1" /> {type}
            </a>
          ))}
        </div>
      )}
    </div>
  );
};

// Component for individual sense
const SenseCard = ({
  senseData,
  senseNumber,
}: {
  senseData: Sense;
  senseNumber: number;
}) => {
  return (
    <div className="mb-6 p-4 border border-gray-200 rounded-lg shadow-sm bg-white">
      <div className="flex justify-between items-center mb-2">
        <h3 className="text-xl font-semibold text-indigo-700">
          {senseNumber}. {senseData.pos}
        </h3>
      </div>

      {senseData.etymology && (
        <details className="mb-3 group">
          <summary className="cursor-pointer flex items-center text-sm text-gray-600 hover:text-indigo-600 transition-colors list-none">
            Etymology
            <ChevronDown size={16} className="ml-1 group-open:hidden" />
            <ChevronUp size={16} className="ml-1 hidden group-open:inline" />
          </summary>
          <p className="mt-1 text-xs text-gray-500 italic bg-gray-50 p-2 rounded">
            {senseData.etymology}
          </p>
        </details>
      )}

      {senseData.forms && senseData.forms.length > 0 && (
        <div className="mb-3">
          <h4 className="text-sm font-medium text-gray-700">Forms:</h4>
          <div className="flex flex-wrap gap-2 mt-1">
            {senseData.forms.map((form, idx) => (
              <span
                key={idx}
                className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full"
              >
                {form.form}{" "}
                {form.tags.length > 0 && `(${form.tags.join(", ")})`}
              </span>
            ))}
          </div>
        </div>
      )}

      {senseData.senses.map((subSense, idx) => (
        <SubSenseDisplay
          key={idx}
          subSense={subSense}
          subSenseNumber={senseNumber}
        />
      ))}

      {senseData.related && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <h4 className="text-sm font-medium text-gray-700 mb-1 flex items-center">
            <Lightbulb size={16} className="mr-1 text-gray-500" />
            Related Terms:
          </h4>
          <RelatedTermsDisplay
            terms={senseData.related.related}
            type="Related"
          />
          <RelatedTermsDisplay
            terms={senseData.related.synonyms}
            type="Synonyms (POS)"
          />
          <RelatedTermsDisplay
            terms={senseData.related.antonyms}
            type="Antonyms (POS)"
          />
          <RelatedTermsDisplay
            terms={senseData.related.derived}
            type="Derived"
          />
        </div>
      )}
    </div>
  );
};
